Easyui 实现3级联动的用户选择功能
- WBOY原創
- 2016-06-07 11:39:261618瀏覽
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元