Easyui 实现3级联动的用户选择功能 -php手册-PHP中文網

首頁

php教程

php手册

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 am 11:39 AM

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

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

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

先看看selectUser.html的代码吧！<div> <div> <div> <div> <table></table> </div> <div> </div> </div> </div> <div> <ul></ul> </div> <div> <a></a> </div> <div> <ul></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组件的！！