天天看點

ExtJs4 樹形結構中,部分節點不可選中

JS檔案中的代碼      
// 資料
var treeStore = Ext.create('Ext.data.TreeStore', {
    fields: [
        'text', 'children', 'leaf', 'conceptId', 'roleURI', 'itemType', 'abstract', 'substitutionGroup', 'numeric','disabled',
        {name:'checked',defaultValue: false}
    ],
    proxy: {
        type: 'ajax',
        url: loadRoleElementUrl
    }
});
// 這裡加載資料後,周遊資料,如果背景傳回來的資料disable設定為true,則添加自定義class,用來設定樣式。
treeStore.load({callback:function(){
        treeStore.getRootNode().cascadeBy(function(node){
            if(node.get('conceptId')){
                if(node.get('disabled') == true){
                    node.set('checked', false);
                    node.set("cls","custom_tree_class"); // 設定自定義class
                }
            }
        });
}});
// 
var treePanel = Ext.create('Ext.tree.Panel', {
    store: treeStore,
    border: false,
    animate: false,
    rootVisible: false,
    buttonAlign:'center',
    viewConfig: {
        onCheckboxChange: function (e, t) {
            var item = e.getTarget(this.getItemSelector(), this.getTargetEl()), record;
            if (item) {
                record = this.getRecord(item);
                var check = !record.get('checked');
                record.set('checked', check);
                if (check) {
                    record.cascadeBy(function (node) {
                        //當節點選中時觸發,這裡判斷disabled是否為true,如果為true,則不可選中,并且設定自定義class。
                        if(node.get('disabled') == true){
                            node.set("cls","custom_tree_class");
                            node.set('checked', false);
                        } else {
                            node.set('checked', true);
                        }
                    });
                } else {
                    record.cascadeBy(function (node) {
                        node.set('checked', false);
                    });
                }
            }
        }
    }
});
           

樣式代碼:

<style type="text/css">
        .custom_tree_class {
            color: #D4D4D4 !important;
        }
    </style>
           

繼續閱讀