easyui中带checkbox框的tree
程序员文章站
2024-02-04 21:27:40
...
1 var data = [{
2 "id": 1,
3 "checked":true,
4 "text": "系统菜单",
5 "children": [{
6 "id": 11,
7 "text": "用户管理",
8 "checked":true,
9 "children": [{
10 "id": 19,
11 "text": "增加用户"
12 }, {
13 "id": 3,
14 "text": "修改用户"
15 }, {
16 "id": 5,
17 "text": "删除用户",
18 "checked":true
19 }]
20 }, {
21 "id": 12,
22 "text": "角色管理",
23 "children": [{
24 "id": 13,
25 "text": "增加角色",
26 "checked":true
27 }, {
28 "id": 3,
29 "text": "修改角色"
30 }, {
31 "id": 5,
32 "text": "删除角色"
33 }]
34 }]
35 }, {
36 "id": 2,
37 "text": "其他",
38 "state": "closed"
39 }];
40
41 $(function () {
42 $("#tt").tree({
43 data: data,
44 checkbox: true,
45 cascadeCheck: false,
46 onCheck: function (node, checked) {
47 if (checked) {
48 var parentNode = $("#tt").tree('getParent', node.target);
49 if (parentNode != null) {
50 $("#tt").tree('check', parentNode.target);
51 }
52 } else {
53 var childNode = $("#tt").tree('getChildren', node.target);
54 if (childNode.length > 0) {
55 for (var i = 0; i < childNode.length; i ) {
56 $("#tt").tree('uncheck', childNode[i].target);
57 }
58 }
59 }
60 }
61 });
62 });
63
64 function getChecked()
65 {
66 var arr = [];
67 var checkeds = $('#tt').tree('getChecked', 'checked');
68 for (var i = 0; i < checkeds.length; i ) {
69 arr.push(checkeds[i].id);
70 }
71 alert(arr.join(','));
72 } <ul id="tt"></ul>
<input type="button" value="获取选中" onclick="getChecked()" />但是有时候我们从后台返回list,
然后将list转换成一个Tree. easyui根据这个数据生成一个树.
那么如何将list转换成一棵树的基本代码就要查看上面一片博客了(http://www.cnblogs.com/guoyansi19900907/p/4701746.html)
现在给出从数据库获取数据,根据指定数据来控制树的选中和未选中状态.
下面这段代码是将list的数据转换成tree,并且加入checked=true或false来控制选中,未选中.
1 /**
2 * checkbox 树
3 * @param rows
4 * @param param
5 * @returns {Array}
6 */
7 function convertCheckbox(rows,param){
8 /*for(var gys=0;gys<rows.length;gys ){
9 console.log(rows[gys]["if_fuquan"]);
10 }*/
11 function getTreeCheck(n){
12 if(n==1){
13 return true;
14 }else{
15 return false;
16 }
17 }
18
19
20 function exists(rows, parentId){
21 for(var i=0; i<rows.length; i ){
22 if (rows[i][param.id] == parentId) return true;
23 }
24 return false;
25 }
26
27 var nodes = [];
28 // 获取*的node
29 for(var i=0; i<rows.length; i ){
30 var row = rows[i];
31 if (!exists(rows, row[param.parentId])){
32
33 //gys 给顶层添加链接
34 var topNode={id:row[param.id],text:row[param.name],checked:getTreeCheck(row[param.checked])};
35 nodes.push(topNode);
36
37 // nodes.push({
38 //id:row.id,
39 //text:row.name
40 //});
41 }
42 }
43
44 var toDo = [];
45 for(var i=0; i<nodes.length; i ){
46 toDo.push(nodes[i]);
47 }
48 while(toDo.length){//循环toDo当toDo长度为零时停止
49 var node = toDo.shift();//删除第一个元素,然后返回第一个元素,改变数组长度
50 // 获取子节点
51 for(var i=0; i<rows.length; i ){
52 var row = rows[i];
53 if (row[param.parentId] == node.id){
54 var child = {id:row[param.id],text:row[param.name]};
55 // gys 添加链接
56
57 //if(row[param.checked]){
58 //alert(row[param.checked]);
59 child.checked=getTreeCheck(row[param.checked]);
60 //}
61 if (node.children){
62 node.children.push(child);
63 } else {
64 node.children = [child];
65 }
66 toDo.push(child);
67 }
68 }
69 }
70 return nodes;
71 } 1 var objTree= $("#fuquanTree");
2 objTree.tree({
3 url:"data.json",
4 method: 'get',
5 checkbox:true,
6 cascadeCheck: false,
7 loadFilter:function(data){//这里的privilege_id,privilege_name,if_fuquan,parent_privilege_id对应的都是数据库的字段.
8 return convertCheckbox(data,{id:"privilege_id",name:"privilege_name",checked:"if_fuquan",parentId:"parent_privilege_id"});
9 },
10 onCheck: function (node, checked) {
11 if (checked) {
12 var parentNode =objTree.tree('getParent', node.target);
13 if (parentNode != null) {//选中子集时,父级没选中就选中父级
14 objTree.tree('check', parentNode.target);
15 }
16 } else {//取消选中,如果有子集就取消选中子集
17 var childNode = objTree.tree('getChildren', node.target);
18 if (childNode.length > 0) {
19 for (var i = 0; i < childNode.length; i ) {
20 objTree.tree('uncheck', childNode[i].target);
21 }
22 }
23 }
24 }
25 });