日期:2014-05-16  浏览次数:20327 次

extjs tree checkbox 复选框实现 取值 显示
  
            var trNode;  
            var Tree = Ext.tree;  
            var loader = new Tree.TreeLoader({  
                dataUrl: '../../system/address_list/Default.aspx',  
                listeners: {  
                    "beforeload": function(treeLoader, node) {  
                        treeLoader.baseParams.id = (node.id != "0" ? node.id : "");  
                    }  
                }  
  
            });  
            var tree = new Tree.TreePanel({  
                //        el: 'tree-div',  
                useArrows: true,  
                autoScroll: true,  
                animate: true,  
                //        enableDD: true,  
                containerScroll: true,  
                //        dropConfig: {appendOnly:true},  
                loader: loader,  
                listeners: {  
                    "click": function(node) {  
                        trNode = node;  
                        //                Ext.get("nodeid").dom.value = node.id;  
                        //                alert(Ext.get("nodeid").dom.value);  
                    },  
                    "checkchange": function(node, state) {  
                        if (node.hasChildNodes()) {  
                            for (i = 0; i < node.childNodes.length; i++) {  
                                node.childNodes[i].getUI().checkbox.checked = state;  
                            }  
                        }  
                    }  
  
                }  
            });  
  
  
            var root = new Tree.AsyncTreeNode({  
                text: '我的通讯录',  
                draggable: false,  
                id: '0'  
            });  
            tree.setRootNode(root);  
            //        tree.render();  
            root.expand();  
  
            win = new Ext.Window({  
                title: '通讯录',  
                iconCls: 'address_list',  
                applyTo: 'txl-win',  
                layout: 'fit',  
                width: 300,  
                height: 400,  
                closeAction: 'hide',  
                plain: true,  
                modal: 'true',  
                items: [tree],  
                buttons: [{  
                    text: '获取选中值',  
                    handler: function() {  
  
                    //var nodes = tree.getChecked();  
                      //  alert(nodes);  
                                            var nodes = tree.getRootNode().childNodes;  
                        for (var j = 0; j < nodes.length; j++) {  
                            var node = tree.getRootNode().childNodes[j];  
                            if (node.hasChildNodes()) {  
                                for (var i = 0; i < node.childNodes.length; i++) {  
                                    if (node.childNodes[i].getUI().checkbox.checked) {  
                                         alert(node.childNodes[i].id);  
                                    }  
                                }  
                            }  
                        }  
  
                    } }]  
                });  
  
  
            }  
            win.show(this);  
  
        });  
    });  

 
 
获取数据方法:
shuju.aspx.cs
[c-sharp] view plaincopy
protected void Page_Load(object sender, EventArgs e)  
    {  
        string node = Request["node"];  
        string json = "";  
        if ("0".Equals(node))  
        {  
            DataTable dt = 获取的数据集            json += "[";  
            for (int i = 0; i < dt.Rows.Count; i++)  
            {  
                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},";  
            }  
            json = json.TrimEnd(new char[] { ',' });  
            json += "]";