开发者社区> 技术小美> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

eXtjs4下拉树支持单选复选级联选择 [复制链接]

简介:
+关注继续查看

效果图.

  • 不带checked的json数据格式只支持单选

1353833937_8116.jpg
  • 带jchecked的json数据的单选

1353833993_4202.jpg
  • 带checked的json数据的多选,可支持级联操作,级联分为级联父节点,级联子节点,两者都级联

1353834040_1258.jpg
封装基类代码:comboxtree.js
[html]view plaincopy

  • Ext.define("Ext.ux.comboboxtree", {  

  •    extend: "Ext.form.field.Picker",  

  •    requires: ["Ext.tree.Panel"],  

  •    initComponent: function() {  

  •        var self = this;  

  •        Ext.apply(self, {  

  •            fieldLabel: self.fieldLabel,  

  •            labelWidth: self.labelWidth  

  •        });  

  •        self.callParent();  

  •    },  

  •    createPicker: function() {  

  •        var self = this;  

  •        var store = Ext.create('Ext.data.TreeStore', {  

  •            proxy: {  

  •                type: 'ajax',  

  •                url: self.storeUrl  

  •            },  

  •            sorters: [{  

  •                property: 'leaf',  

  •                direction: 'ASC'  

  •            },  

  •            {  

  •                property: 'text',  

  •                direction: 'ASC'  

  •            }],  

  •            root: {  

  •                id: self.rootId,  

  •                text: self.rootText  

  •            },  

  •            nodeParameter: self.treeNodeParameter  

  •        });  

  •        self.picker = new Ext.tree.Panel({  

  •            height: 300,  

  •            autoScroll: true,  

  •            floating: true,  

  •            focusOnToFront: false,  

  •            shadow: true,  

  •            ownerCt: this.ownerCt,  

  •            useArrows: true,  

  •            store: store,  

  •            rootVisible: false  

  •        });  

  •        self.picker.on({  

  •            checkchange: function(record, checked) {  

  •                var checkModel = self.checkModel;  

  •                if (checkModel == 'double') {  

  •                    var root = self.picker.getRootNode();  

  •                    root.cascadeBy(function(node) {  

  •                        if (node.get('text') != record.get('text')) {  

  •                            node.set('checked', false);  

  •                        }  

  •                    });  

  •                    if (record.get('leaf') && checked) {  


  •                        self.setRawValue(record.get('id')); // 隐藏值  

  •                        self.setValue(record.get('text')); // 显示值  

  •                    } else {  

  •                        record.set('checked', false);  

  •                        self.setRawValue(''); // 隐藏值  

  •                        self.setValue(''); // 显示值  

  •                    }  

  •                } else {  


  •                    var cascade = self.cascade;  


  •                    if (checked == true) {  

  •                        if (cascade == 'both' || cascade == 'child' || cascade == 'parent') {  

  •                            if (cascade == 'child' || cascade == 'both') {  

  •                                if (!record.get("leaf") && checked) record.cascadeBy(function(record) {  

  •                                    record.set('checked', true);  

  •                                });  


  •                            }  

  •                            if (cascade == 'parent' || cascade == 'both') {  

  •                                pNode = record.parentNode;  

  •                                for (; pNode != null; pNode = pNode.parentNode) {  

  •                                    pNode.set("checked", true);  

  •                                }  

  •                            }  


  •                        }  


  •                    } else if (checked == false) {  

  •                        if (cascade == 'both' || cascade == 'child' || cascade == 'parent') {  

  •                            if (cascade == 'child' || cascade == 'both') {  

  •                                if (!record.get("leaf") && !checked) record.cascadeBy(function(record) {  


  •                                    record.set('checked', false);  


  •                                });  

  •                            }  


  •                        }  


  •                    }  


  •                    var records = self.picker.getView().getChecked(),  

  •                    names = [],  

  •                    values = [];  

  •                    Ext.Array.each(records,  

  •                    function(rec) {  

  •                        names.push(rec.get('text'));  

  •                        values.push(rec.get('id'));  

  •                    });  

  •                    self.setRawValue(values.join(';')); // 隐藏值  

  •                    self.setValue(names.join(';')); // 显示值  

  •                }  


  •            },  

  •            itemclick: function(tree, record, item, index, e, options) {  

  •                var checkModel = self.checkModel;  


  •                if (checkModel == 'single') {  

  •                    if (record.get('leaf')) {  

  •                        self.setRawValue(record.get('id')); // 隐藏值  

  •                        self.setValue(record.get('text')); // 显示值  

  •                    } else {  

  •                        self.setRawValue(''); // 隐藏值  

  •                        self.setValue(''); // 显示值  

  •                    }  

  •                }  


  •            }  

  •        });  

  •        return self.picker;  

  •    },  

  •    alignPicker: function() {  

  •        var me = this,  

  •        picker, isAbove, aboveSfx = '-above';  

  •        if (this.isExpanded) {  

  •            picker = me.getPicker();  

  •            if (me.matchFieldWidth) {  

  •                picker.setWidth(me.bodyEl.getWidth());  

  •            }  

  •            if (picker.isFloating()) {  

  •                picker.alignTo(me.inputEl, "", me.pickerOffset); // ""->tl  

  •                isAbove = picker.el.getY() < me.inputEl.getY();  

  •                me.bodyEl[isAbove ? 'addCls': 'removeCls'](me.openCls + aboveSfx);  

  •                picker.el[isAbove ? 'addCls': 'removeCls'](picker.baseCls + aboveSfx);  

  •            }  

  •        }  

  •    }  

  • });  



调用方法
[html]view plaincopy

  • Ext.onReady(function() {  

  •    var com = Ext.create("Ext.ux.comboboxtree", {  

  •        id : 'name',  

  •        name : 'name',  

  •        hiddenName : 'hiddenName',  

  •        storeUrl : 'data/tree2.json',  

  •        cascade : 'child',//级联方式:1.child子级联;2.parent,父级联,3,both全部级联  

  •        checkModel:'single',//当json数据为不带checked的数据时只配置为single,带checked配置为double为单选,不配置为多选  

  •        width : 270,  

  •        fieldLabel : '单位树',  

  •        labelWidth : 60,  

  •        rootId : '1',  

  •        rootText : 'DRP',  

  •        treeNodeParameter : '',  

  •        renderTo : Ext.getBody()  

  •    });  

  • });  











前面帖子放不下加到这里以供参考
两种json格式的数据
一,不带复选框的数据
[html] view plaincopy

   [{  
       "text": "To Do",   
       "cls": "folder",  
       "expanded": true,  
       "children": [{  
           "text": "Go jogging",  
           "leaf": true  
       },{  
           "text": "Take a nap",  
           "leaf": true  

       },{  
           "text": "Climb Everest",  
           "leaf": true  

       }]  
   },{  
       "text": "Grocery List",  
       "cls": "folder",  
       "children": [{  
           "text": "Bananas",  
           "leaf": true  

       },{  
           "text": "Milk",  
           "leaf": true  

       },{  
           "text": "Cereal",  
           "leaf": true  

       },{  
           "text": "Energy foods",  
           "cls": "folder",  
           "children": [{  
               "text": "Coffee",  
               "leaf": true  

           },{  
               "text": "Red Bull",  
               "leaf": true  

           }]  
       }]  
   },{  
       "text": "Remodel Project",   
       "cls": "folder",  
       "children": [{  
           "text": "Finish the budget",  
           "leaf": true  

       },{  
           "text": "Call contractors",  
           "leaf": true  

       },{  
           "text": "Choose design",  
           "leaf": true  

       }]  
   }]  



二.带复选框的数据


[html] view plaincopy

   [{  
       "text": "To Do",   
       "cls": "folder",  
       "expanded": true,  
       "children": [{  
           "text": "Go jogging",  
           "leaf": true,  
           "checked": true  
       },{  
           "text": "Take a nap",  
           "leaf": true,  
           "checked": false  
       },{  
           "text": "Climb Everest",  
           "leaf": true,  
           "checked": false  
       }]  
   },{  
       "text": "Grocery List",  
       "cls": "folder",  
       "children": [{  
           "text": "Bananas",  
           "leaf": true,  
           "checked": false  
       },{  
           "text": "Milk",  
           "leaf": true,  
           "checked": false  
       },{  
           "text": "Cereal",  
           "leaf": true,  
           "checked": false  
       },{  
           "text": "Energy foods",  
           "cls": "folder",  
           "children": [{  
               "text": "Coffee",  
               "leaf": true,  
               "checked": false  
           },{  
               "text": "Red Bull",  
               "leaf": true,  
               "checked": false  
           }]  
       }]  
   },{  
       "text": "Remodel Project",   
       "cls": "folder",  
       "children": [{  
           "text": "Finish the budget",  
           "leaf": true,  
           "checked": false  
       },{  
           "text": "Call contractors",  
           "leaf": true,  
           "checked": false  
       },{  
           "text": "Choose design",  
           "leaf": true,  
           "checked": false  
       }]  
   }]  














本文转自yunlielai51CTO博客,原文链接:http://blog.51cto.com/4925054/1281319,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
深度解析:关于创建BSC币安链DAPP智能合约系统开发方案详细(技术方案)
深度解析:关于创建BSC币安链DAPP智能合约系统开发方案详细(技术方案)
62 0
Linux centos如何让普通用户获取Root权限?超详细图文教程
前提条件 你需要有一台云服务器,并且是Linux操作系统。这里我用的是阿里云的服务器这里也分享一个:免费的阿里云服务器给大家使用。就是普通用户拥有root权限,仅供学习使用。 你会使用shell工具,链接Linux远程云服务器。
8154 0
Linux 命令详解(八)Systemd 入门教程:实战篇
Systemd 入门教程:实战篇 http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-part-two.html
968 0
Run busybox httpd with php, sqlite
/*********************************************************************************** * Run busybox httpd with php, sqlite * ...
1237 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载