- 引入文件:
jquery
例如:jquery-2.1.4.min.js
ztree
例如:
jquery.ztree.all.min.js
jquery.ztree.core.js
jquery.ztree.exedit.js
jquery.ztree.excheck.js - 配置
var setting = {
/* async: {
enable: true,//采用异步加载
url : "mvc/safeCheck/get-check-Project/",
autoParam: ["id"],//自动提交的参数,每次异步加载时都会附带该参数
type:"get",
dataType : "json"//返回json格式的数据
},*/
view: {
addHoverDom: addHoverDom,//api查询该方法
removeHoverDom: removeHoverDom, //
expandSpeed: "slow", //tree展示的速度
showIcon: true, //展示图标
selectedMulti: false,//允许多选
},
edit: {
//编辑相关
enable: true,
showRemoveBtn: setRemoveBtn, //展示删除按钮
showRenameBtn: true, //展示重命名按钮
removeTitle: "删除节点", //按钮的名称
renameTitle: "重命名"
},
data: {
simpleData: {
enable: true
}
},
check: {
//复选框
enable: false, //是否启用
chkStyle: "checkbox",//类型
chkboxType: { "Y": "", "N": "" } //父类及子类是否受节点展开或关闭影响.
},
callback: {
//回调方法相关
onCheck: false,
beforeRename: zTreeBeforeRename, //重命名前执行的方法
beforeRemove: zTreeBeforeRemove,
onClick: zTreeOnClick, //单击tree时的方法
}
};
3 初始化
比如一个按钮绑定了data_edit()这个方法.
//查看
function data_edit(mid) {
// 节点数据
var zNodes;
$.get("mvc/safeCheck/get-check-Project/"+mid+"?"+Math.random(),function(resp){
zNodes = resp.data;
$.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化
var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //得到tree对象
var nodes = treeObj.getNodes(); //得到所有节点.
if (nodes.length>0) {
treeObj.expandNode(nodes[0], true, false, false); //展开一二级,具体看api中 expandNode用法
}
},"json");
$("#userDepartModal").modal('show');
}
其中添加按钮没有提供,但是可以自己加
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (t