本文講解 新手如何使用ZTree
1.首先引入ZTree相關文件 點我下載
<link rel="stylesheet" href="../../vendor/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../vendor/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../../vendor/ztree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../../vendor/ztree/js/jquery.ztree.exedit.js"></script>
2.創建一個ul 的標籤
<ul id="treeDemo" class="ztree"></ul>
3.完整代碼如下，
// 樹 代碼 var setting = { view: { addHoverDom: addHoverDom, removeHoverDom: removeHoverDom, selectedMulti: false, showIcon: true }, edit: { removeTitle: "刪除", renameTitle: "編輯", enable: true, editNameSelectAll: true, showRemoveBtn: showRemoveBtn, showRenameBtn: showRenameBtn, }, data: { simpleData: { enable: true, rootPId: "group_all_id" } }, callback: { onClick: onClick, beforeDrag: beforeDrag, beforeEditName: beforeEditName, beforeRemove: beforeRemove, beforeRename: beforeRename, onRemove: onRemove, onRename: onRename } }; var log, className = "dark"; function beforeDrag(treeId, treeNodes) { return false; } var treeName; function beforeEditName(treeId, treeNode, newname) { treeName = treeNode.name; } function beforeRemove(treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj(treeId); layer.confirm("確認刪除 分組 " + treeNode.name + " 嗎？", { btn: ['是', '否'] }, function(index) { var loading = layer.load(2, { shade: [0.2, '#000'] }); $.ajax({ url: config.testConfig.APIURL type: 'get', data: { id: treeNode.id, }, success: function(r) { if(JSON.parse(r).error == 0) { layer.msg('刪除成功', { icon: 6 }); zTree.removeNode(treeNode); layer.close(index); } else { layer.msg('刪除失敗', { icon: 5 }); error(r); //如果error!=0; } layer.close(loading); loadTree() }, error: function(s) { layer.msg('刪除出錯了'); } }); }, function(index) { layer.close(index); }); return false; } function onRemove(e, treeId, treeNode) { showLog("[ " + getTime() + " onRemove ] " + treeNode.name); } function beforeRename(treeId, treeNode, newName, isCancel) { className = (className === "dark" ? "" : "dark"); showLog((isCancel ? "<span style='color:red'>" : "") + "[ " + getTime() + " beforeRename ] " + treeNode.name + (isCancel ? "</span>" : "")); if(newName.length == 0 || newName.trim().length == 0) { setTimeout(function() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.cancelEditName(); layer.msg('節點名不能爲空', { icon: 2 }); }, 0); return false; } if(newName.length > 8) { setTimeout(function() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.cancelEditName(); layer.msg('節點名稱過長', { icon: 2 }); }, 0); return false; } return true; } function onRename(e, treeId, treeNode, isCancel) { if(isCancel) { return; } var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var onodes = zTree.getNodes(); if(treeName == treeNode.name) { } else { //發送請求修改節點信息 var loading = layer.load(2, { shade: [0.2, '#000'] }); $.ajax({ url: config.testConfig.APIURL ， type: 'get', data: { Id: treeNode.id, title: treeNode.name, }, success: function(r) { if(JSON.parse(r).error == 0) { layer.msg('修改成功', { icon: 6 }); } else { layer.msg('修改失敗', { icon: 5 }); error(r); //如果error!=0; } layer.close(loading); loadTree() }, error: function(s) { layer.msg('修改出錯了'); } }); } } function showRemoveBtn(treeId, treeNode) { if(treeNode.id == "group_all_id" || treeNode.id == "group_default_id") { return false; } return !treeNode.isParent; } function showRenameBtn(treeId, treeNode) { if(treeNode.id == "group_all_id" || treeNode.id == "group_default_id") { return false; } return true } function showLog(str) { if(!log) log = $("#log"); log.append("<li class='" + className + "'>" + str + "</li>"); if(log.children("li").length > 8) { log.get(0).removeChild(log.children("li")[0]); } } function getTime() { var now = new Date(), h = now.getHours(), m = now.getMinutes(), s = now.getSeconds(), ms = now.getMilliseconds(); return(h + ":" + m + ":" + s + " " + ms); } var newCount = 1; function addHoverDom(treeId, treeNode) { if(treeNode.id == "group_default_id") { return false; } var sObj = $("#" + treeNode.tId + "_span"); if(treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return; var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='添加節點' οnfοcus='this.blur();'></span>"; sObj.after(addStr); var btn = $("#addBtn_" + treeNode.tId); //當點擊添加按鈕時： if(btn) btn.bind("click", function() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var name = "新節點" + (newCount++); var newNode; //發送請求保存一個新建的節點，後臺返回ID，用返回的ID新增節點 var loading = layer.load(2, { shade: [0.2, '#000'], content: '<span style="margin-left: -25px;color: #000;">正在新增節點....</span>', success: function(layero) { layero.find('.layui-layer-content').css({ 'padding': '40px 0', 'width': '100px', }); } }); var name = "新節點" + (newCount++); $.ajax({ url: config.testConfig.APIURL type: 'get', data: { parentId: treeNode.id, title: name, }, success: function(r) { if(JSON.parse(r).error == 0) { layer.msg('添加成功', { icon: 6 }); newNode = zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: name }); // zTree.editName(newNode[0]) //新增的節點進入編輯狀態 } else { layer.msg('添加失敗', { icon: 5 }); error(r); //如果error!=0; } layer.close(loading); loadTree() }, error: function(s) { layer.msg('添加失敗'); // window.location.reload(); } }); return false; }); }; function removeHoverDom(treeId, treeNode) { $("#addBtn_" + treeNode.tId).unbind().remove(); }; function selectAll() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked"); } $(document).ready(function() { loadTree(); $("#selectAll").bind("click", selectAll); }); //加載樹 function loadTree() { var loading = layer.load(2, { shade: [0.4, '#000'] }); $.ajax({ type: 'GET', url: config.testConfig.APIURL success: function(data) { if(JSON.parse(data).error == 0) { $.fn.zTree.init($("#treeDemo"), setting, JSON.parse(data).data); } else { error(data); //如果error!=0;出錯執行此函數; } layer.close(loading); }, error: function() { layer.close(loading); } }) } //點擊樹加載表格數據 function onClick(event, treeId, treeNode) { //點擊樹節點 去操作其他數據 }
如有其他問題，請在下方留言評論噢