1. 程式人生 > >EXTjS4下拉樹 支援單選多選級聯選擇 comboxtree

EXTjS4下拉樹 支援單選多選級聯選擇 comboxtree

     初學EXTjS,程式碼參照了很多帖,忙活了一天,程式碼寫的比較簡單,容易看懂.

   本下拉樹支援帶複選框和不帶複選框的JSON資料的,帶複選框的下拉樹也實現了單選功能,只需配置一下即可!

效果圖.

  • 不帶checked的json資料格式只支援單選

  • 帶jchecked的json資料的單選

  • 帶checked的json資料的多選,可支援級聯操作,級聯分為級聯父節點,級聯子節點,兩者都級聯

封裝基類程式碼

:comboxtree.js

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);
            }
        }
    }
});


呼叫方法

	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格式的資料

一,不帶複選框的資料

[{
    "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
       
    }]
}]

二.帶複選框的資料

[{
    "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
    }]
}]


如果有幫助記得支援一下哦,可能也有不完善的地方歡迎改進!微笑