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

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


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

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

先看看selectUser.html的代码吧！

JS代码：Hzcwd.ns("Hzcwd.Admin.Common.SelectUser");

var $selectUserTree = $('#admin_common_selectuser_tree'), $selectUserUnselectDataList = $('#admin_common_selectuser_unselect_datalist'), $selectUserSelectDataList = $('#admin_common_selectuser_selected_datalist');

$(function() {
$selectUserTree.tree({
url: '{:U("/Admin/Common/getDeptTree")}',
fit: true,
animate: true,
nowarp: false,
border: false,
idField: 'id',
treeField: 'deptname',
columns: [
[{
field: 'deptname',
title: '部门名称',
width: 180
}]
],
onClick: function(node) {
if ($(this).tree('isLeaf', node.target) ==true) {
var selected = $selectUserSelectDataList.datalist('getRows');
var uids = [];
$.each(selected, function() {
uids.push(this.uid);
});
$selectUserUnselectDataList.datalist('load',{
deptid:node.id,
uids:uids,
})
}else{
$(this).tree('toggle', node.target);
}
}
});

$selectUserUnselectDataList.datalist({
title:'待选用户',
fit:true,
border:true,
plain:false,
valueField: 'uid',
textField: 'username',
singleSelect: false,
url: '{:U("./Admin/Common/getUserList")}',
onClickRow:function(index,row){
$selectUserSelectDataList.datalist('appendRow',row)
$(this).datalist('deleteRow',index)
}

})

$selectUserSelectDataList.datalist({
title:'已选用户',
fit:true,
border:true,
plain:false,
valueField: 'uid',
textField: 'username',
singleSelect: false,

onClickRow:function(index,row){
$selectUserUnselectDataList.datalist('appendRow',row)
$(this).datalist('deleteRow',index)
}
})

Hzcwd.Admin.Common.SelectUser.selectAll = function(){
var data = $selectUserSelectDataList.datalist('getRows');
var uids = [];
$.each(data, function() {
uids.push(this.uid);
});
console.info(uids)
}
})后台代码：public function selectUser() {
$this->display();
}

public function getDeptTree(){ //部门树形表格数据
$data = M('Department')->order('sort')->select();
$this->ajaxReturn(getTree($data,'id','pid','deptname'));
}

public function getUserList(){ //获取部门列表
$deptid = I('deptid');
$uids = I('uids');
$where['department'] = array('eq',$deptid);
$where['uid'] = array('not in',$uids);
if (empty($deptid)) {
$dataArr[0]['username'] = '没有数据';
}else{
$dataArr = M('User')->where($where)->field('uid,department,username')->order('sort')->select();
if (empty($dataArr)) {
$dataArr[0]['username'] = '没有数据';
}
}
$this->ajaxReturn($dataArr);
}不太懂去表达要去表达的东西，希望可以看得懂，也希望可以帮到您，更希望大家可以给更好的建议！！勿喷~~~~

pm：easyui是最新的1.4.2版本，老版本没有datalist组件的！！

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