extjs tree checkbox 复选框实现 取值 显示

原来做EXTTREE的复选其实很简单！

数据：

[{id:'55',text:'节点11',leaf:false,checked:true}

checked属性就是控制复选框是否出现，true出现复选框  false 不出现。

 

 

获取tree的选中值方法：var nodes = tree.getChecked();

 

当点击父级节点同时选中子节点方法：

需要添加“checkchange”事件。

"checkchange": function(node, state) {
                        if (node.hasChildNodes()) {
                            for (i = 0; i < node.childNodes.length; i++) {
                                node.childNodes[i].getUI().checkbox.checked = state;
                            }
                        }
                    }

 

 第二种方法：递归所有节点

                    "checkchange": function(node, state) {
                        if (node.hasChildNodes()) {
                            node.eachChild(function(child) {
                                child.ui.toggleCheck(state);
                                child.attributes.checked = state;
                                child.fireEvent('checkchange', child, state); //递归调用
                            });
                        }

 

实例代码：

[javascript]  view plain copy

1. Ext.onReady(function() {  
2.     Ext.BLANK_IMAGE_URL = '../../Images/s.gif';  
3.     var win;  
4.     var abutton = Ext.get('tx_l');  
5.     abutton.on('click', function() {  
6.         if (!win) {  
7.   
8.             var trNode;  
9.             var Tree = Ext.tree;  
10.             var loader = new Tree.TreeLoader({  
11.                 dataUrl: '../../system/address_list/Default.aspx',  
12.                 listeners: {  
13.                     "beforeload": function(treeLoader, node) {  
14.                         treeLoader.baseParams.id = (node.id != "0" ? node.id : "");  
15.                     }  
16.                 }  
17.   
18.             });  
19.             var tree = new Tree.TreePanel({  
20.                 //        el: 'tree-div',  
21.                 useArrows: true,  
22.                 autoScroll: true,  
23.                 animate: true,  
24.                 //        enableDD: true,  
25.                 containerScroll: true,  
26.                 //        dropConfig: {appendOnly:true},  
27.                 loader: loader,  
28.                 listeners: {  
29.                     "click": function(node) {  
30.                         trNode = node;  
31.                         //                Ext.get("nodeid").dom.value = node.id;  
32.                         //                alert(Ext.get("nodeid").dom.value);  
33.                     },  
34.                     "checkchange": function(node, state) {  
35.                         if (node.hasChildNodes()) {  
36.                             for (i = 0; i < node.childNodes.length; i++) {  
37.                                 node.childNodes[i].getUI().checkbox.checked = state;  
38.                             }  
39.                         }  
40.                     }  
41.   
42.                 }  
43.             });  
44.   
45.   
46.             var root = new Tree.AsyncTreeNode({  
47.                 text: '我的通讯录',  
48.                 draggable: false,  
49.                 id: '0'  
50.             });  
51.             tree.setRootNode(root);  
52.             //        tree.render();  
53.             root.expand();  
54.   
55.             win = new Ext.Window({  
56.                 title: '通讯录',  
57.                 iconCls: 'address_list',  
58.                 applyTo: 'txl-win',  
59.                 layout: 'fit',  
60.                 width: 300,  
61.                 height: 400,  
62.                 closeAction: 'hide',  
63.                 plain: true,  
64.                 modal: 'true',  
65.                 items: [tree],  
66.                 buttons: [{  
67.                     text: '获取选中值',  
68.                     handler: function() {  
69.   
70.                     //var nodes = tree.getChecked();  
71.                       //  alert(nodes);  
72.                                             var nodes = tree.getRootNode().childNodes;  
73.                         for (var j = 0; j < nodes.length; j++) {  
74.                             var node = tree.getRootNode().childNodes[j];  
75.                             if (node.hasChildNodes()) {  
76.                                 for (var i = 0; i < node.childNodes.length; i++) {  
77.                                     if (node.childNodes[i].getUI().checkbox.checked) {  
78.                                          alert(node.childNodes[i].id);  
79.                                     }  
80.                                 }  
81.                             }  
82.                         }  
83.   
84.                     } }]  
85.                 });  
86.   
87.   
88.             }  
89.             win.show(this);  
90.   
91.         });  
92.     });  

 

 

获取数据方法：

shuju.aspx.cs

[c-sharp]  view plain copy

1. protected void Page_Load(object sender, EventArgs e)  
2.     {  
3.         string node = Request["node"];  
4.         string json = "";  
5.         if ("0".Equals(node))  
6.         {  
7.             DataTable dt = 获取的数据集            json += "[";  
8.             for (int i = 0; i < dt.Rows.Count; i++)  
9.             {  
10.                 json += "{id:'" + dt.Rows[i]["id"].ToString() + "',text:'" + dt.Rows[i]["name"].ToString() + "',leaf:" + (!bool.Parse(dt.Rows[i]["cc"].ToString())).ToString().ToLower() + ",checked:true},";  
11.             }  
12.             json = json.TrimEnd(new char[] { ',' });  
13.             json += "]";  
14.         }  
15.         else  
16.         {  
17.             DataTable dt = 获取的数据集            //json += "[{id:'554c49b6-bf2e-451d-ab10-64a4d1960d66',text:'节点11',leaf:false},{id:2,text:'节点12',leaf:true}]";  
18.             json += "[";  
19.             for (int i = 0; i < dt.Rows.Count; i++)  
20.             {  
21.                 json += "{id:'" + dt.Rows[i]["name"].ToString() + "',leaf:" + (!bool.Parse(dt.Rows[i]["cc"].ToString())).ToString().ToLower() + ",checked:true},";  
22.             }  
23.             json = json.TrimEnd(new char[] { ',' });  
24.             json += "]";  
25.         }  
26.   
27.         Response.Write(json);    
28.     }  

 

 

补充说明：

经过测试：var nodes = tree.getChecked();只能获取点击操作复选的值。用js 点击父级同时勾选子级节点这个方法无效。

 

第二种方法：递归显示tree选中节点

点击显示方法中：

function onclick()

{

var nodes = tree.getRootNode().childNodes;
  if (nodes.length>0)
       get_allnode(tree.getRootNode().childNodes[0], true);

}

 

 

 

get_allnode = function(node, flag) {
    if (node.hasChildNodes()) {
        node.eachChild(function(child) {
            //child.ui.toggleCheck(flag);
            if(child.attributes.checked)
                alert(child.attributes.id);
            get_allnode(child, flag); //递归调用
        });
    }
}

 

解决方法：

获取tree对象循环判断是否选中

[javascript]  view plain copy

1. var nodes = tree.getRootNode().childNodes;  
2.  for (var j = 0; j < nodes.length; j++) {  
3.      var node = tree.getRootNode().childNodes[j];  
4.      if (node.hasChildNodes()) {  
5.          for (var i = 0; i < node.childNodes.length; i++) {  
6.              if (node.childNodes[i].getUI().checkbox.checked) {  
7.                   alert(node.childNodes[i].id);  
8.              }  
9.          }  
10.      }  
11.  }