jquery zTree的基本用法
阿新 • • 發佈：2017-11-20
sele 顯示 style post children 標識 for sheet 根節點
①在頁面引用zTree的js和css：
<link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>
②代碼基本實現
//======html <div> <ul id="treeContainer"class="ztree"></ul> </div>
//================js腳本 var zNodes = []; $(function(){ loadTree(); //初始化樹 getTreeData(); //後臺加載數據 }); function loadTree(){ $.fn.zTree.init($.(‘#treeContainer‘),{ data:{ simpleData:{ enable:true } }, view:{ nameIsHTML:true, showLine:true, dblClick:false }, callback:{ onClick : nodeEvents //點擊節點執行的方法 } },zNodes); } function getTreeData(){ $.ajax({ type:"post", url:"", async:true, data:{}, dataType:"TEXT", success:function(data) { var arr = data.split(‘\1‘); zNodes.push({ id:arr[0], //本身id pId:arr[1], //父級id name:‘‘, //顯示的名稱 data:‘‘, //這個data是傳到下面nodeEvent()裏面的 open:true //默認節點打開 }); } }); } function nodeEvents(e,treeId,treeNode){ var data = treeNode.data; var zTree = $.fn.zTree.getZTreeObj(‘treeContainer‘); zTree.expandNode(treeNode,true); }
3.setting 配置詳解
1 一. zTree的 setting 配置詳解 2 3 var setting = { 4 treeId : "",//zTree 的唯一標識，初始化後，等於 用戶定義的 zTree 容器的 id 屬性值。 5 //請勿進行初始化 或 修改，屬於內部參數。 6 treeObj : null,//zTree 容器的 jQuery 對象，主要功能：便於操作。 7 //請勿進行初始化 或 修改，屬於內部參數。 8 9 10 async : {// 是否異步加載 相當於ajax 11 autoParam : [], //可以設置提交時的參數名稱，例如 server 只接受 zId : ["id=zId"] ; 默認值空 12 contentType : "application...", 13 dataFilter : null, 14 dataType : "text", 15 enable : false,//設置 zTree 是否開啟異步加載模式 16 //默認值：false 17 otherParam : [],//其他參數 ;直接用 JSON 格式制作鍵值對，例如：{ key1:value1, key2:value2 } 18 type : "post", //請求方式 19 url : "" //路徑 20 }, 21 callback : {//返回函數; 根據需求選擇合適的監聽事件 //以下事件默認權威null 事件例子參見第83行 22 beforeAsync : null,//異步加載之前的事件回調函數，zTree 根據返回值確定是否允許進行異步加載 23 24 beforeCheck : null,//勾選 或 取消勾選 之前的事件回調函數，並且根據返回值確定是否允許 勾選 或 取消勾選 25 26 beforeClick : null,//單擊節點之前的事件回調函數，並且根據返回值確定是否允許單擊操作 27 28 beforeCollapse : null,//父節點折疊之前的事件回調函數，並且根據返回值確定是否允許折疊操作 29 30 beforeDblClick : null,// zTree 上鼠標雙擊之前的事件回調函數，並且根據返回值確定觸發 onDblClick 事件回調函數 31 32 beforeDrag : null,//節點被拖拽之前的事件回調函數，並且根據返回值確定是否允許開啟拖拽操作 33 34 beforeDragOpen : null,//拖拽節點移動到折疊狀態的父節點後，即將自動展開該父節點之前的事件回調函數，並且根據返回值確定是否允許自動展開操作 35 36 beforeDrop : null,//節點拖拽操作結束之前的事件回調函數，並且根據返回值確定是否允許此拖拽操作 37 38 beforeEditName : null,//節點編輯按鈕的 click 事件，並且根據返回值確定是否允許進入名稱編輯狀態 39 40 beforeExpand : null,//父節點展開之前的事件回調函數，並且根據返回值確定是否允許展開操作 41 42 beforeMouseDown : null,// zTree 上鼠標按鍵按下之前的事件回調函數，並且根據返回值確定觸發 onMouseDown 事件回調函數 43 44 beforeMouseUp : null,//zTree 上鼠標按鍵松開之前的事件回調函數，並且根據返回值確定觸發 onMouseUp 事件回調函數 45 46 beforeRemove : null,//節點被刪除之前的事件回調函數，並且根據返回值確定是否允許刪除操作 47 48 beforeRename : null,//節點編輯名稱結束（Input 失去焦點 或 按下 Enter 鍵）之後，更新節點名稱數據之前的事件回調函數，並且根據返回值確定是否允許更改名稱的操作 49 50 beforeRightClick : null,// zTree 上鼠標右鍵點擊之前的事件回調函數，並且根據返回值確定觸發 onRightClick 事件回調函數 51 52 onAsyncError : null,//異步加載出現異常錯誤的事件回調函數 53 54 onAsyncSuccess : null,//異步加載正常結束的事件回調函數 55 56 onCheck : null,// checkbox / radio 被勾選 或 取消勾選的事件回調函數 57 58 onClick : null,//節點被點擊的事件回調函數 59 60 onCollapse : null,//節點被折疊的事件回調函數 61 62 onDblClick : null,// zTree 上鼠標雙擊之後的事件回調函數 63 64 onDrag : null,//節點被拖拽的事件回調函數 65 66 onDragMove : null,//節點被拖拽過程中移動的事件回調函數 67 68 onDrop : null,//節點拖拽操作結束的事件回調函數 69 70 onExpand : null,//節點被展開的事件回調函數 71 72 onMouseDown : null,// zTree 上鼠標按鍵按下後的事件回調函數 73 74 onMouseUp : null,// zTree 上鼠標按鍵松開後的事件回調函數 75 76 onNodeCreated : null,//節點生成 DOM 後的事件回調函數 77 78 onRemove : null,//刪除節點之後的事件回調函數。 79 80 onRename : null,//節點編輯名稱結束之後的事件回調函數。 81 82 onRightClick : null// zTree 上鼠標右鍵點擊之後的事件回調函數 83 }, 84 例. 節點勾選或取消事件 85 function zTreeOnCheck(event, treeId, treeNode) { 86 alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked); 87 }; 88 var setting = { 89 callback: { 90 onCheck: zTreeOnCheck 91 } 92 }; 93 Function 參數說明 94 參數數據類型說明 95 eventjs event 對象標準的 js event 對象 96 treeId String對應 zTree 的 treeId，便於用戶操控 97 treeNode JSON被勾選 或 取消勾選的節點 JSON 數據對象 98 99 100 setting參數配置講解繼續... 101 check : {//設置zTree是否可以被勾選,及勾選的參數配置 102 autoCheckTrigger : false,//設置自動關聯勾選時是否觸發 beforeCheck / onCheck 事件回調函數。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時生效] 103 104 105 chkboxType : {"Y": "ps", "N": "ps"},//勾選 checkbox 對於父子節點的關聯關系。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 時生效] 106 107 108 chkStyle : "checkbox",//勾選框類型(checkbox 或 radio）[setting.check.enable = true 時生效] 109 110 111 enable : false,//設置 zTree 的節點上是否顯示 checkbox / radio 112 //默認值: false 113 114 115 nocheckInherit : false//當父節點設置 nocheck = true 時，設置子節點是否自動繼承 nocheck = true 。[setting.check.enable = true 時生效] 116 117 118 chkDisabledInherit : false//當父節點設置 chkDisabled = true 時，設置子節點是否自動繼承 chkDisabled = true 。[setting.check.enable = true 時生效] 119 120 121 radioType : "level"//radio 的分組範圍。[setting.check.enable = true 且 setting.check.chkStyle = "radio" 時生效] 122 }, 123 data : {//非常重要 124 keep : { //子節點和父節點屬性設置 默認值都為false 125 leaf : false,//zTree 的節點葉子節點屬性鎖，是否始終保持 isParent = false 126 127 128 parent : false//zTree 的節點父節點屬性鎖，是否始終保持 isParent = true 129 }, 130 key : { //節點數據 131 checked : "checked",//zTree 節點數據中保存 check 狀態的屬性名稱。 132 133 134 children : "children",//zTree 節點數據中保存子節點數據的屬性名稱。 135 136 137 name : "name",//zTree 節點數據保存節點名稱的屬性名稱。 138 139 140 title : "" //zTree 節點數據保存節點提示信息的屬性名稱。[setting.view.showTitle = true 時生效] 141 142 143 url : "url" //設置 zTree 顯示節點時，將 treeNode 的 xUrl 屬性當做節點鏈接的目標 URL 144 }, 145 simpleData : { 146 enable : false,//確定 zTree 初始化時的節點數據、異步加載時的節點數據、或 addNodes 方法中輸入的 newNodes 數據是否采用簡單數據模式 (Array) 147 148 149 idKey : "id",//節點數據中保存唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效] 150 151 152 pIdKey : "pId",//節點數據中保存其父節點唯一標識的屬性名稱。[setting.data.simpleData.enable = true 時生效] 153 154 155 rootPId : null//用於修正根節點父節點數據，即 pIdKey 指定的屬性值。[setting.data.simpleData.enable = true 時生效] 156 } 157 }, 158 edit : {//可以編輯節點 : 增 刪 改 159 drag : { 160 autoExpandTrigger : true,//拖拽時父節點自動展開是否觸發 onExpand 事件回調函數。[setting.edit.enable = true 時生效] 161 162 163 isCopy : true,//拖拽時, 設置是否允許復制節點。[setting.edit.enable = true 時生效] 164 165 166 isMove : true,//拖拽時, 設置是否允許移動節點。[setting.edit.enable = true 時生效] 167 168 169 prev : true, //拖拽到目標節點時，設置是否允許移動到目標節點前面的操作。[setting.edit.enable = true 時生效] 170 171 172 next : true, //拖拽到目標節點時，設置是否允許移動到目標節點後面的操作。[setting.edit.enable = true 時生效] 173 174 175 inner : true, //拖拽到目標節點時，設置是否允許成為目標節點的子節點。[setting.edit.enable = true 時生效] 176 177 178 borderMax : 10,//拖拽節點成為根節點時的 Tree 內邊界範圍 (單位：px)。[setting.edit.enable = true 時生效] 179 180 181 borderMin : -5,//拖拽節點成為根節點時的 Tree 外邊界範圍 (單位：px)。[setting.edit.enable = true 時生效] 182 183 184 minMoveSize : 5,//判定是否拖拽操作的最小位移值 (單位：px)。[setting.edit.enable = true 時生效] 185 186 187 maxShowNodeNum : 5,//拖拽多個兄弟節點時，浮動圖層中顯示的最大節點數。 多余的節點用...代替。[setting.edit.enable = true 時生效] 188 189 190 autoOpenTime : 500//拖拽時父節點自動展開的延時間隔。 (單位：ms)[setting.edit.enable = true 時生效] 191 192 }, 193 editNameSelectAll : false, 194 enable : false,//設置 zTree 是否處於編輯狀態,true / false 分別表示 可以 / 不可以 編輯 195 196 removeTitle : "remove",//刪除按鈕的 Title 輔助信息。[setting.edit.enable = true & setting.edit.showRemoveBtn = true 時生效] 197 198 renameTitle : "rename",//編輯名稱按鈕的 Title 輔助信息。[setting.edit.enable = true & setting.edit.showRenameBtn = true 時生效] 199 200 showRemoveBtn : true,//設置是否顯示刪除按鈕。[setting.edit.enable = true 時生效] 201 202 showRenameBtn : true//設置是否顯示編輯名稱按鈕。[setting.edit.enable = true 時生效] 203 204 }, 205 view : { 206 addDiyDom : null,//用於在節點上固定顯示用戶自定義控件 207 208 addHoverDom : null,//用於當鼠標移動到節點上時，顯示用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕 209 210 autoCancelSelected : true,//點擊節點時，按下 Ctrl 或 Cmd 鍵是否允許取消選擇操作。 211 212 dblClickExpand : true,//雙擊節點時，是否自動展開父節點的標識 213 214 expandSpeed : "fast",//zTree 節點展開、折疊時的動畫速度，設置方法同 JQuery 動畫效果中 speed 參數。 215 216 fontCss : {}, //個性化文字樣式，只針對 zTree 在節點上顯示的<A>對象。 217 218 nameIsHTML : false,//設置 name 屬性是否支持 HTML 腳本 219 220 removeHoverDom : null,//用於當鼠標移出節點時，隱藏用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕 221 222 selectedMulti : true,//設置是否允許同時選中多個節點。 223 224 showIcon : true,//設置 zTree 是否顯示節點的圖標。 225 226 showLine : true,//設置 zTree 是否顯示節點之間的連線。 227 228 showTitle : true,//設置 zTree 是否顯示節點的 title 提示信息(即節點 DOM 的 title 屬性)。 229 230 txtSelectedEnable : false//設置 zTree 是否允許可以選擇 zTree DOM 內的文本。 231 } 232 }
jquery zTree的基本用法