`

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 += "]";  
        }  
        else  
        {  
            DataTable dt = 获取的数据集            //json += "[{id:'554c49b6-bf2e-451d-ab10-64a4d1960d66',text:'节点11',leaf:false},{id:2,text:'节点12',leaf:true}]";  
            json += "[";  
            for (int i = 0; i < dt.Rows.Count; i++)  
            {  
                json += "{id:'" + dt.Rows[i]["name"].ToString() + "',leaf:" + (!bool.Parse(dt.Rows[i]["cc"].ToString())).ToString().ToLower() + ",checked:true},";  
            }  
            json = json.TrimEnd(new char[] { ',' });  
            json += "]";  
        }  
  
        Response.Write(json);    
    }  

 
 
补充说明:
经过测试: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 plaincopy
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);  
             }  
         }  
     }  
 }  

 

分享到:
评论

相关推荐

    带复选框的 ExtJs tree

    综上所述,“带复选框的ExtJS tree”这一主题深入探讨了如何在ExtJS框架中实现具有复选框功能的树形结构。通过对标题、描述、标签和部分内容的分析,我们可以看到这是一个关于ExtJS TreePanel高级用法的案例,涉及到...

    ExtJs4 Checkbox tree

    ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件,它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景,比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...

    解决Extjs当中复选框全选后,取消选中某一项,全选框仍是选中状态的问题

    全选功能通常通过添加一个特殊的复选框来实现,该复选框与所有其他复选框的状态联动,当所有项被选中时,全选复选框自动选中;反之,当至少有一项未被选中时,全选复选框应该变为未选中状态。 问题的根源在于事件...

    extjs4.1下拉复选框完整DEMO

    下拉复选框组件在ExtJS中通常是通过`Ext.form.field.CheckboxGroup`实现的。在动态加载数据的情况下,它会与后端服务进行异步通信,获取可选项列表。这通常涉及到以下步骤: 1. **创建下拉复选框组件**:使用`Ext....

    extjs带复选框的树包括全选 反选 子选父以及 父选子

    - `extjs复选框树.js`:这是实现上述功能的JavaScript代码,包括工具类和针对树节点的操作方法。 - `样式文件.css`:可能包含了一些自定义的样式,用于美化复选框和树的显示效果。 - `示例HTML文件.html`:演示如何...

    基于EXTjs 的 动态复选框树

    基于EXTjs 的 动态复选框树 json数据交互

    extjs tree CHECKBOX 多选删除未实现(带SQL脚本)

    在网上下载别人的代码,改进加上CHECKBOX ,但是批量删除做不出来,希望高手完成并分享。

    Extjs4.2带复选框下拉树组件

    网上搜索了许久未找到...Extjs4.2 带复选框的下拉树,解决了向下勾选子节点、向上勾选父节点,正选反选获取值等问题,勾选的节点显示displayfield值直接显示在下拉文本框中。需要引用ext-all.js和ext-all-neptune.css

    Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法

    在Extjs中,GridPanel组件是非常常用的一个表格组件,它提供了丰富的功能来...总的来说,通过上述方法,我们可以在Extjs的GridPanel中根据某行数据的条件控制复选框的显示及选中状态,有效地实现复杂的业务逻辑需求。

    解决 extjs2.2 给tree-panel 添加 checkbox 的add-on

    在EXTJS 2.2版本中,Tree Panel是EXTJS框架中用于展示树形结构数据的一个组件,但原生的EXTJS 2.2并未提供内置的复选框(checkbox)功能,这对于需要用户进行多选操作的场景来说是一个限制。标题提到的“解决extjs...

    extjs3.X 带复选框的树

    在本例中,我们关注的是"带复选框的树",这是一个在ExtJS 3.x版本中实现的功能,特别是在3.2、3.3和3.4版本中经过验证的特性。 "带复选框的树"是ExtJS中的TreePanel组件的一个扩展,允许用户通过复选框选择树结构中...

    EXTJS checkbox赋值

    7. `items`: 这是一个数组,包含了每个复选框的配置,每个配置项包括`boxLabel`(复选框显示的文本)、`name`(与`checkboxgroup`相同的name,用于数据绑定)和`inputValue`(当复选框被选中时,对应的值)。...

    EXTJS动态树支持checkbox 全选

    标题中的“EXTJS动态树支持checkbox全选”指的是EXTJS中树组件的一个特性,即在树形结构中添加复选框(checkbox)功能,并支持全选和全取消选中操作。这样的功能对于需要用户进行多项选择的场景非常有用,比如文件...

    extjs4带全选复选框的下列表(有bug)

    1、解压,进入extjs4.2.1\examples\form,浏览器打开 hbox-form.html 文件,当我勾选中任意一个多选下拉框,然后再勾选‘ALL’时,‘ALL’却是不被选中的状态,且...extjs4.2.1\examples\form\MultipleComboBox.js

    关于extjs treepanel复选框选中父节点与子节点的问题

    总的来说,EXTJS TreePanel的复选框功能是通过监听节点状态变化并递归地更新子节点状态来实现的,同时需要确保所有子节点未选中时父节点才能取消选中。这种设计提高了用户界面的交互性和易用性。

    checkbox tree extjs2

    这个"checkbox tree extjs2"主题主要涉及如何在ExtJS 2版本中实现带有复选框功能的树形控件。 在ExtJS 2中,Checkbox Tree是基于TreePanel组件的扩展,它提供了一种可视化的方式,让用户可以多选树结构中的节点。这...

    ExtJS实现动态读写Checkboxgroup

    在ExtJS中,CheckboxGroup是一个控件,允许用户以多选框的形式展示一组可选的选项。动态读写Checkboxgroup涉及了对用户交互的响应以及数据的实时更新,这对于创建交互性强、用户友好的界面至关重要。下面将详细讲解...

    extjs tree 异步加载树型

    在 ExtJS Tree 中实现异步加载,主要涉及以下几个关键点: 1. **TreeStore**:存储树节点数据的模型,可以配置 `proxy` 来指定数据来源。对于异步加载,一般使用 `ajax` 类型的 proxy,并设置 `url` 参数指向服务器...

    动态加载extjs tree

    在ExtJS Tree中实现动态加载,主要涉及以下几个关键概念: 1. **TreeStore**: TreeStore是ExtJS Tree的数据源,负责管理树节点的数据。它可以配置为从服务器异步获取数据,通过`proxy`配置项来指定数据源类型,通常...

Global site tag (gtag.js) - Google Analytics