本文讲解 新手如何使用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) { //点击树节点 去操作其他数据 }
如有其他问题，请在下方留言评论噢