zTree實現樹節點單選的兩種方式
阿新 • • 發佈:2018-12-15
方式一:利用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);重新選中被勾選的節點 } }