本文介绍了ZTree插件的引入文件，包括jQuery和ZTree的不同组件。接着讲解了配置和初始化过程，并提及了几个常用的方法，如getNodeByTId获取节点，updateNode更新节点，以及getCheckedNodes获取已选节点。此外，还包含了个人代码备忘和页面效果展示。
- 引入文件:
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 (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='新增子项' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
alert("***");
});
}再介绍几个我常用的方法,
getNodeByTId() 根据id获得节点
updateNode() 更新节点
getCheckedNodes() 得到被勾选的节点
更具体要查看api了,ztree 是中国人写的,aip好懂,为他点赞,人活着不能只为了钱,要活的坦荡,上进,穷则独善其身,达则兼济天下.
自己的代码备忘:
// ztree相关
var setting = {
/* async: {
enable: true,//采用异步加载
url : "mvc/safeCheck/get-check-Project/",
autoParam: ["id"],//自动提交的参数，每次异步加载时都会附带该参数
type:"get",
dataType : "json"//返回json格式的数据
},*/
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
expandSpeed: "slow",
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,
}
};
//查看
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");
var nodes = treeObj.getNodes();
if (nodes.length>0) {
treeObj.expandNode(nodes[0], true, false, false);
}
},"json");
$("#userDepartModal").modal('show');
}
var newCount = 1;
function addHoverDom(treeId, treeNode) {
//第四级不显示添加按钮
var level = treeNode.level+1;
if (level == 4) {
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='新增子项' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//获取服务器新增的数据
$.post("mvc/safeCheck/add-new-project" + "?" + Math.random(),
{pid: treeNode.id, level: treeNode.level},
function (resp) {
if (!resp.succ) {
alert("数据异常,请联系管理员！");
return true;
}else {
var node = resp.project;
zTree.addNodes(treeNode, {id: node.id, pId:treeNode.id, name:"新增项" + (newCount++)});
}
}, "json");
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
//修改节点名称
function zTreeBeforeRename(treeId, treeNode, newName) {
$.post("mvc/safeCheck/edit-Project",{id:treeNode.id,name:newName,level:treeNode.level},function(resp){
if(resp.succ) {
alert("修改完成!")
}
},"json");
}
//根节点不显示删除按钮
function setRemoveBtn(treeId, treeNode) {
if(treeNode.level == 0) {//根节点不能删除
return !treeNode;
}else {
return true;
}
}
//删除前回掉函数
function zTreeBeforeRemove(treeId, treeNode) {
if(confirm("确定删除？")) {
$.post("mvc/safeCheck/delete-Project" + "?" + Math.random(),
{id: treeNode.id, level: treeNode.level},
function (resp) {
if (resp.succ) {
alert("删除成功！");
return true;
}
}, "json");
return true;
}else {
return false;
}
}
//单击节点事件(第四级)
function zTreeOnClick(event, treeId, treeNode) {
/* var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getSelectedNodes();
if (nodes.length>0) {
treeObj.reAsyncChildNodes(nodes[0], "refresh",false);
}
var treeNode = treeObj.getSelectedNodes()[0];*/
//清空表单
fauFormClear("#edit-subProject-form");
$("#ztreeId").val(treeNode.tId);
var level = treeNode.level + 1;
if(level == 4) {
$("#valueDiv").css('display','none');
$("#subId").val(treeNode.id);
$("#projectContent").val(treeNode.name);
if(treeNode.value) {
$("#valueDiv").css('display','block');
$("#typeProject").val(2);
$("#valueProject").val(treeNode.value);
}else {
$("#typeProject").val(1);
}
//change事件
$("#typeProject").change(function () {
var flag = $(this).val();
if (flag == 1) {
$("#valueDiv").css('display','none');
}else {
$("#valueDiv").css('display','block');
}
});
$("#subProjectModal").modal('show');
}
};
//编辑子项
function editSubProject() {
//更新ztree
var value = $("#valueProject").val();
var tid = $("#ztreeId").val();
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var node = treeObj.getNodeByTId(tid);
node.value=value;
treeObj.updateNode(node);
var subId = $("#subId").val();
//后台
$.post("mvc/safeCheck/edit-sub-project" + "?" + Math.random(),
{id: subId, value: value},
function (resp) {
if (resp.succ) {
alert("修改完成!");
$("#subProjectModal").modal('hide');
}
}, "json");
}
-------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------
// ztree相关
var setting = {
/* async: {
enable: true,//采用异步加载
url : "mvc/safeCheck/get-check-Project/",
autoParam: ["id"],//自动提交的参数，每次异步加载时都会附带该参数
type:"get",
dataType : "json"//返回json格式的数据
},*/
view: {
addHoverDom: false,
removeHoverDom: false,
expandSpeed: "slow",
showIcon: true,
selectedMulti: false,
},
edit: {
enable: false,
},
data: {
simpleData: {
enable: true
}
},
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: { "Y": "ps", "N": "ps" }
},
callback: {
onCheck: false,
onClick: false,
}
};
//保存 获取当前被勾选的节点集合
function save_projec() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
if (treeObj) {
var nodes = treeObj.getCheckedNodes(true);
var nodeArr = new Array();
$.each(nodes, function (index,item) {
var node = new Object();
node.name = item.name;
node.levelType = item.level+1;
node.value = item.value;
nodeArr.push(node);
});
var nodeJson = JSON.stringify(nodeArr);
if (nodeJson != "[]"){
$("#nodes").val(nodeJson);
}else {
alert("请选择模板!")
return false;
}
}
$("#add-data-form").submit();
}
//查看
function data_edit(mid) {
// 节点数据
var zNodes;
$.get("mvc/safeCheck/get-make-Project/"+mid+"?"+Math.random(),function(resp){
zNodes = resp.data;
setting.check.enable = false;
$.fn.zTree.init($("#treeDemoSee"), setting, zNodes);
var treeObj = $.fn.zTree.getZTreeObj("treeDemoSee");
var nodes = treeObj.getNodes();
if (nodes.length>0) {
treeObj.expandNode(nodes[0], true, false, false);
}
},"json");
$("#userDepartModal").modal('show');
}
页面效果展示
扫一扫
6016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
