EasyUI Combotree只選擇葉子節點

EasyUI Combotree的方法拓展自Combo和Tree。而Tree有一個onBeforSelect事件來幫助我們實現只選擇葉子節點的功能。

Tree事件需要 'node' 參數，它包括下列屬性：

• id：綁定到節點的標識值。
• text：要顯示的文本。
• iconCls：用來顯示圖標的 css class。
• checked：節點是否被選中。
• state：節點狀態，'open' 或 'closed'。
• attributes：綁定到節點的自定義屬性。
• target：目標的 DOM 對象。

onBeforeSelect

node

節點被選中前觸發，返回 false 則取消選擇動作。

    //只選中葉子節點        
    $('#ct').combotree({
                data: data,
                onBeforeSelect: function (node) {
                    if (!$(this).tree('isLeaf', node.target)) {
                        return false;
                    }
                },
                onClick: function (node) {
                    if (!$(this).tree('isLeaf', node.target)) {
                        $('#ct').combo('showPanel');
                    }
                }
            });
//不選中頂級節點                       
 onBeforeSelect: function (node) {
                   if ($(this).tree('getParent', node.target) == null) {
                               alert("禁止選擇頂級節點");
                            }
                        },

通過“$(this).tree('isLeaf', node.target)” 判斷當前選中節點是否包含子節點，若包含則返回false阻止選中，若不包含，則為葉子節點，可以正常選擇。

還有一種需求只需要過濾頂級節點，其他節點均可選擇。這種情況可以通過 $(this).tree('getParent', node.target) 獲取當前選中節點的父項，如果該節點為頂級節點則獲取值為null，所以通過判斷是否為null來確定是否為頂級節點進行過濾。