JQuery Ztree 树插件配置与应用小结
测试环境
Win7
jquery-3.2.1.min.js
下载地址：
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
zTree_v3-master.zip
下载地址：
https://github.com/zTree/zTree_v3
插件配置与应用
应用效果展示
HTML代码片段
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
{% load staticfiles %}
……略
<!-- zTree -->
<link rel="stylesheet" href="{% static 'website/zTree-3.5/css/demo.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'website/zTree-3.5/css/metroStyle/metroStyle.css' %}" type="text/css" />
<script type="text/javascript" src="{% static 'website/zTree-3.5/js/jquery.ztree.core.js' %}" defer></script>
<script type="text/javascript" src="{% static 'website/zTree-3.5/js/jquery.ztree.excheck.js' %}" defer></script>
<script type="text/javascript" src="{% static 'website/zTree-3.5/js/jquery.ztree.exedit.js' %}" defer></script>
……略
<script type="text/javascript" src="{% static 'website/js/resource-setting.js' %}" defer></script>
……略
</head>
<body>
<div class="container-fluid">
<div class="row">
<div>
<button class="btn btn-primary" data-toggle="modal" data-target="#resourceDialog">点击创建一级根目录</button>
</div>
<div class="zTreeDemoBackground left">
{# <ul id="treeDemo" class="ztree" style="height:800px"></ul>#}
<ul id="ztree" class="ztree"></ul>
</div>
</div>
</div>
……略
</body>
</html>
JS代码片段
resource-setting.js
/**
* ztree 设置
*
*/
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
check: {
enable: false
},
data: {
simpleData: { // true / false 分别表示使用 / 不使用简单数据模式如果设置为 true，请务必设置 setting.data.simpleData 内的其他参数: idKey / pIdKey / rootPId，并且让数据满足父子关系。
enable: true,
idKey: "id", // 节点数据中保存唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
pIdKey: "pId", // 节点数据中保存其父节点唯一标识的属性名称。[setting.data.simpleData.enable = true 时生效]
rootPId: 0 // 用于修正根节点父节点数据，即 pIdKey 指定的属性值。[setting.data.simpleData.enable = true 时生效]
}
},
edit: {
enable: true
},
callback: {
beforeRemove: zTreeBeforeRemove,
beforeEditName: zTreeBeforeEditName,
beforeDrag:function(){return false;} // 禁止拖拽
}
};
/**
* 用于当鼠标移动到节点上时，显示用户自定义控件，同时给控件(例中为“新增”按钮)绑定点击事件：打开新增资源树节点信息模态对话框
*/
function addHoverDom(treeId, treeNode) {
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='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId); //“新增”图标按钮
if (btn) btn.bind("click", function(){ // 给“新增”图标按钮绑定点击事件
currentZtreeNode = treeNode; // 保存点击的节点，作为新增资源节点的父节点，在提交表单时使用
opType = 'add'; // 设置操作类型为新增
$('#'+ resourceDialogID).modal('show'); // 打开对话框
return false;
});
};
/**
* 于当鼠标移出节点时，隐藏用户自定义控件
* @param treeId
* @param treeNode
*/
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};
/**
* 用于捕获节点被删除之前的事件回调函数，并且根据返回值确定是否允许删除操作
* @param treeId
* @param treeNode
* @returns {boolean}
*/
function zTreeBeforeRemove(treeId, treeNode) {
var index = treeNode.name.indexOf(' [')
var nodeName = ''
if (index != -1) {
nodeName = treeNode.name.substr(0, index);
} else {
nodeName = treeNode.name;
}
var mark = true; // 标记是否删除成功
if (confirm('是否删除资源"' + nodeName + '"?')) {
var nodeID = treeNode.id;
$.ajax({
type: "POST",
url: deleteResourceZtreeNodeURL,
async: false,
data: {'nodeID': nodeID},
success: function (result) {
if (result.success == 'true') {
alert(result.msg);
mark = true;
} else {
alert(result.msg + "，" + result.reason);
mark = false;
}
},
error: function(XmlHttpRequest, textStatus, errorThrown) {
alert('删除资源树节点请求失败' + XmlHttpRequest.responseText);
mark = false;
}
});
return mark;
} else {
return false;
}
}
/**
* 用于捕获节点编辑按钮的 click 事件，并且根据返回值确定是否允许进入名称编辑状态，同时打开资源树修改节点信息模态对话框
* @param treeId
* @param treeNode
* @returns {boolean}
*/
function zTreeBeforeEditName(treeId, treeNode) {
currentZtreeNode = treeNode; // 记录操作的节点
opType = 'update'; // 设置操作类型为修改
var nodeID = treeNode.id;
// 获取节点信息，并填充表单
$.ajax({
type: "get",
url: queryResourceZtreeNodeURL,
async: false,
data: {'nodeID': nodeID },
success: function (result) {
if (result.success == 'true') {
//alert(result.msg);
var resourceFormSelector = '#' + resourceFormID;
// 序列化表单，获取表单组件 name属性，表单设计 name属性值和id属性值是一样的，所以也就获取表单组件id
var dataArray = $(resourceFormSelector).serializeArray();
$.each(dataArray, function () {
$('#' + this.name).val(result.data[this.name]);
});
$('#' + resourceDialogID).modal('show'); // 打开修改模态对话框
} else {
// 重置变量
currentZtreeNode = null;
opType = 'add';
alert(result.msg + "，" + result.reason);
}
},
error: function(XmlHttpRequest, textStatus, errorThrown) {
// 重置变量
opType = 'add';
currentZtreeNode = null;
alert('查询资源树节点信息请求失败' + XmlHttpRequest.responseText);
}
});
return false; // 不进入编辑状态
}
getResourcesTreeNodes().then(function(result) {
if (result.success == 'true') {
$.fn.zTree.init($('#' + resouceZtreeID), setting, result.data);
} else {
alert(result.msg + "，" + result.reason);
}
});
代码分析
setting.view.addHoverDom
用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
请务必与 setting.view.removeHoverDom 同时使用；属于高级应用，使用时请确保对 zTree 比较了解。
默认值：null
参数说明
treeIdString 对应 zTree 的 treeId，便于用户操控
treeNodeJSON 需要显示自定义控件的节点 JSON 数据对象
setting.view.removeHoverDom
用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
请务必与 addHoverDom 同时使用；属于高级应用，使用时请确保对 zTree 比较了解。
默认值：null
参数说明
treeIdString 对应 zTree 的 treeId，便于用户操控
treeNodeJSON 需要隐藏自定义控件的节点 JSON 数据对象
setting.check.enable
设置 zTree 的节点上是否显示 checkbox / radio
默认值: false
参数值：true / false 分别表示 显示 / 不显示 复选框或单选框
setting 举例：需要显示 checkbox
var setting = {
check: {
enable: true
}
};
......
setting.check.chkStyle
勾选框类型(checkbox 或 radio）[setting.check.enable = true 时生效]
默认值："checkbox"
参数值： 值为 "checkbox" 时，显示 checkbox 选择框，setting.check.chkboxType 属性有效。 值为 "radio" 时，显示 radio 选择框， setting.check.radioType 属性有效。
请注意大小写，不要改变
