search
Homephp教程php手册Easyui 实现3级联动的用户选择功能

3级联动用户选择功能
由于最近开发了一个新的办公信息系统,需要用到站内信功能,发站内信时接受人的信息是用点选的,找了好多资料,但实现起来还是比较麻烦,做完上去easyui的官网看了下,已经更新到1.4.2了,看了下更新内容新增了datalist的功能,昨晚睡前想好实现的思路,今天一早开始码代码!很简单的一个方法,放上来分享,没有demo,只说说实现的方法和简单的代码。
先上一张图吧!
Easyui 实现3级联动的用户选择功能

左边的部门是个tree,点击部门的时候,会获取该部门的用户,获取到的用户显示到中间的“待选用户”里,单击"待选用户"的姓名,会直接在已选用户中插入。

单击部门的tree组件的时候,会获取“已选用户”的uid,然后将获取到的uid和部门id发给后台过滤,这样,“待选用户”里的数据就不会和“已选用户”的数据重复。

先看看selectUser.html的代码吧!<div> <br>     <div> <br>         <div> <br>             <div> <br>                 <table></table> <br>             </div> <br>             <div> <br> <br>             </div> <br>         </div> <br>     </div> <br>     <div> <br>         <ul></ul> <br>     </div> <br>     <div> <br>         <a></a><br>     </div> <br>     <div> <br>         <ul></ul> <br>     </div> <br> </div>JS代码:Hzcwd.ns("Hzcwd.Admin.Common.SelectUser");<br> <br> var $selectUserTree = $('#admin_common_selectuser_tree'), $selectUserUnselectDataList = $('#admin_common_selectuser_unselect_datalist'), $selectUserSelectDataList = $('#admin_common_selectuser_selected_datalist');<br> <br> $(function() {<br>     $selectUserTree.tree({<br>         url: '{:U("/Admin/Common/getDeptTree")}',<br>         fit: true,<br>         animate: true,<br>         nowarp: false,<br>         border: false,<br>         idField: 'id',<br>         treeField: 'deptname',<br>         columns: [<br>             [{<br>                 field: 'deptname',<br>                 title: '部门名称',<br>                 width: 180<br>             }]<br>         ],<br>         onClick: function(node) {<br>             if ($(this).tree('isLeaf', node.target) ==true) {<br>                 var selected = $selectUserSelectDataList.datalist('getRows');<br>                 var uids = [];<br>                 $.each(selected, function() {<br>                     uids.push(this.uid);<br>                 });<br>                 $selectUserUnselectDataList.datalist('load',{<br>                     deptid:node.id,<br>                     uids:uids,<br>                 })<br>             }else{<br>                 $(this).tree('toggle', node.target);<br>             }<br>         }<br>     });<br> <br>     $selectUserUnselectDataList.datalist({<br>         title:'待选用户',<br>         fit:true, <br>         border:true, <br>         plain:false,  <br>         valueField: 'uid', <br>         textField: 'username', <br>         singleSelect: false,<br>         url: '{:U("./Admin/Common/getUserList")}',<br>         onClickRow:function(index,row){<br>             $selectUserSelectDataList.datalist('appendRow',row)<br>             $(this).datalist('deleteRow',index)<br>         }<br> <br>     })<br> <br>     $selectUserSelectDataList.datalist({<br>         title:'已选用户',<br>         fit:true, <br>         border:true, <br>         plain:false,  <br>         valueField: 'uid', <br>         textField: 'username', <br>         singleSelect: false,<br>     <br>         onClickRow:function(index,row){<br>             $selectUserUnselectDataList.datalist('appendRow',row)<br>             $(this).datalist('deleteRow',index)<br>         }<br>     })<br> <br>     Hzcwd.Admin.Common.SelectUser.selectAll = function(){<br>         var data = $selectUserSelectDataList.datalist('getRows');<br>         var uids = [];<br>         $.each(data, function() {<br>             uids.push(this.uid);<br>         });<br>         console.info(uids)<br>     }<br> })后台代码:public function selectUser() {<br>         $this->display();<br>     }<br> <br>     public function getDeptTree(){    //部门树形表格数据<br>         $data = M('Department')->order('sort')->select();<br>         $this->ajaxReturn(getTree($data,'id','pid','deptname'));<br>     }<br> <br>     public function getUserList(){        //获取部门列表<br>         $deptid = I('deptid');<br>         $uids = I('uids');<br>         $where['department'] = array('eq',$deptid);<br>         $where['uid'] = array('not in',$uids);<br>         if (empty($deptid)) {<br>             $dataArr[0]['username'] = '没有数据';<br>         }else{<br>             $dataArr = M('User')->where($where)->field('uid,department,username')->order('sort')->select();<br>             if (empty($dataArr)) {<br>                 $dataArr[0]['username'] = '没有数据';<br>             }<br>         }<br>         $this->ajaxReturn($dataArr);<br>     }不太懂去表达要去表达的东西,希望可以看得懂,也希望可以帮到您,更希望大家可以给更好的建议!!勿喷~~~~

pm:easyui是最新的1.4.2版本,老版本没有datalist组件的!!

AD:真正免费,域名+虚机+企业邮箱=0元

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.