Easyui 实现3级联动的用户选择功能

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


左边的部门是个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元