`
福将1032
  • 浏览: 44561 次
文章分类
社区版块
存档分类
最新评论

EXT 树形结构 增加的时候 下拉列表里的树形结构

 
阅读更多

        //添加接口
        var treeIface = new Ext.tree.TreePanel({
            title : '接口',
            split : true,
            frame:false,
            border : true,
            collapsible : true,
            width : 250,
            minSize : 80,
            maxSize : 250,
            enableDD : true,
            autoScroll : true,
            loader : new Ext.tree.TreeLoader({
                        //applyLoader : true,
                        url : 'merchant__loadAddFormIface.action'
                    }),
            root: new Ext.tree.AsyncTreeNode( {
                id : "0",
                text : "添加接口"
                //expandable: true,
                //expanded: true
            }),
            rootVisible: false,
            listeners : {
                checkchange : function(node, event) {
                   
                        var parentNode = node.parentNode;
                        var childs = parentNode.childNodes;// 获得兄弟节点
                        if (node.ui.isChecked() == true) {
                            parentNode.attributes.checked = true;
                            parentNode.ui.toggleCheck(true);
                        } else {
                            var flag = false;
                            node.attributes.checked = flag;
                            for ( var i = 0; i < childs.length; i++) {
                                if (childs[i].ui.isChecked() == true) {
                                    flag = true;
                                }
                            }
                            if (flag == false) {
                                parentNode.attributes.checked = flag;
                                parentNode.ui.toggleCheck(flag);
                            }
                        }
                   
                },
                click : function(node, event) {
                    node.expand();
                },
                expandnode : function(node, event) {
                }
            }

});       


                var iface = new Ext.form.ComboBox(
                {
                editable : false,
                fieldLabel : '接口',               
                name : 'iface',
                hiddenName : 'iface',
                width : 150,
                mode : 'local',
                triggerAction : 'all',                   
                tpl: '<div id="treeIface" style="height:200px;width:144px;"></div>',
                store : new Ext.data.SimpleStore({ fields: [], data: [[]] }),
                valueField : 'value',
                value:'',
                displayField : 'text',
                editable : false
                });   
                iface.on('expand', function() { treeIface.render('treeIface'); });
                var nodeIfaceArray = new Array();
                var treeIface_click = function(node, e) {
               
                var nodeIfaceValue ='';             
                // if (node.attributes.leaf) {
                if (node.attributes.checked == true) {             
                var temp =1;
                for ( var j = 0; j < nodeIfaceArray.length; j++) {
               
                if(nodeIfaceArray[j].attributes.id==node.attributes.id){
                     
                     temp +=1;   
                    }
                }
               
                if(temp==1){
               
                    nodeIfaceArray.push(node);
                }          
               
                }
                if (node.attributes.checked == false) {
               
                for ( var i = 0; i < nodeIfaceArray.length; i++) {
                if(nodeIfaceArray[i].attributes.id==node.attributes.id){
                    nodeIfaceArray.splice(i,1);
                    //nodeArray[i].attributes.id='';
                   
                 }
                 
                   
                 
                 
                } 
                }
                for ( var i = 0; i < nodeIfaceArray.length; i++) {
                if(nodeIfaceArray[i].attributes.id!=''){
                    nodeIfaceValue +=nodeIfaceArray[i].attributes.id+" ";
                //nodeValue +=' ';
                }
                }
                iface.setValue(nodeIfaceValue);
                };
                // tree.on("click", tree_click);
               
                treeIface.on("checkchange", treeIface_click);

分享到:
评论

相关推荐

    Ext下拉列表树

    Ext下拉列表树是一种在ExtJS框架中实现的组件,它结合了下拉列表和树形结构的功能,为用户提供了一种交互式的、层次化的选择项。这种组件在数据管理、菜单选择、分类筛选等场景中非常常见,尤其适用于需要展现多级...

    EXT下拉框显示树形结构源代码

    而在某些情况下,我们可能需要在下拉框中展示树形结构的数据,这就是EXT COMBO TREE的用武之地。 EXT COMBO TREE是EXT COMBO的一种扩展,它允许用户在下拉菜单中以树形结构展示数据。这在处理层级关系或者分类数据...

    ext 下拉树demo

    下拉树(Dropdown Tree)是EXT中的一个组件,它结合了下拉菜单和树形结构,通常用于选择具有层级关系的数据,比如组织结构、目录树或者地区层级等。 在EXT中,创建下拉树的过程可能涉及到以下关键知识点: 1. **...

    ext 下拉树 ext2

    下拉树是UI设计中一个实用的元素,它将传统下拉列表与树形结构相结合,用户在下拉框中可以看到层次化的选项,这在需要展示多级分类或者有层级关系的数据时非常有用。例如,在选择国家/地区、组织架构或产品分类等...

    [Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree

    总的来说,Ext.ux.ComboBoxTree是ExtJS中一种实用的组件,它将下拉框的便捷性与树形结构的层次性结合在一起,提高了用户在处理层级数据时的交互体验。开发者可以通过调整配置和编写回调函数,实现各种定制化的需求。

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...

    Ext下拉树、下拉表格

    在Ext中,下拉树是将传统的下拉列表与树形控件相结合的一种方式,用户可以点击输入框打开一个包含树结构的下拉菜单。这种组件常用于需要层次结构选择的场景,例如组织架构、文件目录等。创建下拉树通常涉及以下步骤...

    TreeCombo,Ext TreeCombo 树形 下拉框,树形下拉框

    TreeCombo是Ext JS库中的一个组件,它结合了树形结构和下拉框的功能,为用户提供了一种在有限空间内展示复杂数据结构的选择方式。在Web应用开发中,这种组件非常实用,尤其当用户需要从层次化的选项中进行选择时。 ...

    Ext TreeCombo 树形 下拉框

    总的来说,Ext TreeCombo是ExtJS中一种强大的组件,结合了树形结构和下拉框的优点,适合于展示和操作层次化数据。理解和掌握其使用方法对提升Web应用的用户体验大有裨益。通过源码学习和相关工具的支持,开发者可以...

    ExtJS下拉列表树控件1

    它提供了丰富的组件库,其中包括下拉列表树控件(ComboBox Tree),这种控件结合了下拉列表和树形结构,使得用户能够在一个下拉菜单中浏览和选择层次化的数据。本文将深入探讨如何在ExtJS中实现下拉列表树控件,并...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    用户可以在下拉列表中看到一个树形结构,逐级展开节点,选择需要的项。这种组件特别适合于那些需要展示层级关系且允许用户多选或单选的情况,如部门组织结构、地区分类等。 2. **多选与单选支持** 在ExtJS 4.x的...

    ext+dwr实现树形菜单源代码

    4. **JavaScript事件处理**:EXT TreePanel提供了丰富的事件监听器,如`beforeitemmove`、`itemmove`等,我们可以监听这些事件,通过DWR调用服务器端的方法来实现动态修改树形菜单的结构。 5. **yahaitt_ext_...

    【叨、校长】Ext 下拉树插件_ComboTree_xz

    然而,`ComboTree`则是在`ComboBox`的基础上增加了树形结构,使得用户不仅可以浏览一个简单的列表,还可以展开和折叠节点,查看和选择嵌套的数据项。 `ComboTree_xz.js`文件是实现这个功能的核心脚本,包含了`...

    Extjs下拉多选树

    在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单中选择多个树节点,提供了一种高效且直观的用户交互方式。 1. **下拉树组件**:在ExtJS中,树形组件...

    ext2.0 树的增删改操作

    Ext2.0的下拉树结合了下拉框和树的功能,用户可以像选择下拉列表中的项一样选择树形结构中的节点。创建下拉树需要使用`Ext.form.ComboBox`,并配置其`store`为树形数据的`TreeStore`,`displayField`为显示的字段,...

    ExtJS下拉列表树控件

    下拉列表树控件结合了下拉框和树结构的特点,用户可以方便地在下拉菜单中展开和选择树形结构的数据。 在ExtJS中,下拉列表树控件通常由两个主要部分组成:`ComboBox` 和 `TreePanel`。`ComboBox` 是基础的下拉框...

    ExtJs4实现下拉树选择框ComboTree

    其中,`ComboTree` 是一个自定义组件,它结合了`ComboBox` 和 `Tree` 的功能,允许用户在一个下拉列表中选择树形结构的数据项。 #### 组件介绍 `ComboTree` 在本文档中被定义为一个自定义类 `Slk.view.ui.ComboTree...

    extjs4 下拉菜单树 combobox+tree 支持单选多选

    在EXTJS4中,下拉菜单树(ComboBox+Tree)是一种高级UI组件,它结合了ComboBox的下拉选择框和TreePanel的树形结构,提供了一种用户友好的交互方式,用于展示层次化的数据。这种组件特别适用于需要从多个选项中进行...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    ComboBoxTree将这两者融合,创建了一个下拉树菜单,用户可以在其中浏览和选择树形结构的数据。 要实现单选功能,ComboBoxTree可能使用了Ext.selection.Model类,通过配置singleSelect选项来限制用户只能选择一个...

Global site tag (gtag.js) - Google Analytics