由于最近开发了一个新的办公信息系统，需要用到站内信功能，发站内信时接受人的信息是用点选的，找了好多资料，但实现起来还是比较麻烦，做完上去easyui的官网看了下，已经更新到1.4.2了，看了下更新内容新增了datalist的功能，昨晚睡前想好实现的思路，今天一早开始码代码！很简单的一个方法，放上来分享，没有demo，只说说实现的方法和简单的代码。
先上一张图吧！
左边的部门是个tree，点击部门的时候，会获取该部门的用户，获取到的用户显示到中间的“待选用户”里，单击"待选用户"的姓名，会直接在已选用户中插入。
单击部门的tree组件的时候，会获取“已选用户”的uid，然后将获取到的uid和部门id发给后台过滤，这样，“待选用户”里的数据就不会和“已选用户”的数据重复。
先看看selectUser.html的代码吧！
<div style="margin:5px; width:680px; height:350px; overflow:hidden;">
<div style="float:left; width:160px; height:350px; ">
<div class="easyui-accordion" data-options="fit:true, border:true, plain:false">
<div title="按部门选择" selected="true">
<table id="admin_common_selectuser_tree"></table>
</div>
<div title="好友组分组">
</div>
</div>
</div>
<div style="float:left; width:160px; height:350px; margin-left:5px;">
<ul id="admin_common_selectuser_unselect_datalist"></ul>
</div>
<div style="float:left; width:60px; height:350px; margin-left:5px;">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-arrow-right', iconAlign:'top' " onclick="Hzcwd.Admin.Common.SelectUser.selectAll();"></a>
</div>
<div style="float:left; width:160px; height:350px; margin-left:5px;">
<ul id="admin_common_selectuser_selected_datalist"></ul>
</div>
</div>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组件的！！
