1. 程式人生 > >zTree實現樹節點單選的兩種方式

zTree實現樹節點單選的兩種方式

方式一:利用setting配置來實現單選按鈕功能

        原理:取消父子節點聯動,設定節點的選擇框為radio單選框。

   程式碼設定:    

var setting = {
        
        ......

        check: { //表示tree的節點在點選時的相關設定
            enable: true, //是否顯示radio/checkbox
            autoCheckTrigger: false,
            chkStyle: "radio",//值為checkbox或者radio表示
            radioType:"all",
            chkboxType: {"Y": "", "N": ""}//表示父子節點的聯動效果,不聯動
        }

        ......
    };

chkStyle:"radio"   節點樹樣式展示

方式二:樹節點為checkbox複選框時,利用樹節點的節點選中回撥函式來實現樹節點單選

原理:取消樹節點的父子節點聯動,依靠每次勾選樹節點時會觸發勾選的回撥函式,在回撥函式中進行判斷,

           如果是選中節點操作,先清空所有節點的選中狀態,再設定被勾選的節點狀態為選中。

chkStyle:"checkbox"   節點樹樣式展示

程式碼設定:

var setting = {

        ......

        check: { //表示tree的節點在點選時的相關設定
            enable: true, //是否顯示radio/checkbox
            autoCheckTrigger: false,
            chkStyle: "checkbox",//值為checkbox或者radio表示
            chkboxType: {"Y": "", "N": ""}//表示父子節點的聯動效果,這裡設定不聯動
        },

        callback: {
            onCheck: zTreeOnCheck,//勾選事件回撥函式
            onClick: zTreeOnClick,//點選事件回撥函式
            onAsyncSuccess: ztreeOnAsyncSuccess,//非同步載入成功後執行的方法
        }

        ......
    };




function zTreeOnCheck(event, treeId, treeNode) {
        if(treeNode.checked){    //注意,這裡的樹節點的checked狀態表示勾選之後的狀態
            treeObj.checkAllNodes(false);//取消所有節點的選中狀態
            treeObj.checkNode(treeNode,true,false,false);重新選中被勾選的節點
        }
}