ztree基本运用
首先去ztree官网下载好ztree文件
- 之后你需要在你的项目中引入这些文件
- 接下来就可以照着官网愉快的写代码了，
- 首先我们要初始化一个ztree代码如下
<ul id="organizationTree" class="ztree"></ul>
// 注意这里的这个class类名必须要加上去，不然会没有样式这个类名写在了dome.css中，他写了一个默认的样式，你可以对它进行修改
// 初始化树
$.fn.zTree.init(
$("#organizationTree"), //这里的id就是你需要写的dom
setting, // 是一个对象，里面有他的各种设置
zNodes // 是你的数据，你可以通过ajax请求获取这个数据
)
- 下面我们在重点说下这个setting，这个东西比较复杂，涉及到的内容也比较多，我主要说下我项目中用到的方法与属性，我们项目的要求是做一个权限树，要求能添加与勾选，功能不是很复杂，先说下怎么出现勾选
在setting中有一个属性check
- 它里面有一个属性判断是否出现勾选框
enable: true,true是有false是没有 - 还有一个属性是`chkStyle: "checkbox"默认时checkbox
chkboxType: { "Y": "ps", "N": "ps" }Y 属性定义 checkbox 被勾选后的情况； N 属性定义 checkbox 取消勾选后的情况； "p" 表示操作会影响父级节点； "s" 表示操作会影响子级节点。- 这是出现勾选框的写法代码如下
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: { "Y": "ps", "N": "ps" }
},
下面就是新增的，新增我没有按照ztree中的方法写，我是在顶部加了一个新增按钮然后调用addNodes方法来实现新增代码如下
function ZtreeNode(id, pId, name) {//定义ztree的节点类
this.id = id;
this.pId = pId;
this.name = name;
}
// 添加角色tree
$('#organizationBtn').on('click',function(){
if(!$('#organizationHidden').attr('bId')){
layer.msg('请先选中需要添加的父节点', {icon: 5, time: 3000});
return false;
}
if(!$('#organizationInput').val()){
layer.msg('请先填写节点名称', {icon: 5, time: 3000});
return false;
}
var zTree = $.fn.zTree.getZTreeObj("organizationTree");
var orgId = $('#organizationHidden').attr('bId');
var name = $('#organizationInput').val()//这里是拿到添加节点名字的一个input框
var parentZNode = zTree.getNodeByParam("id", orgId, null); //获取父节点
var sonId = orgId*100 + (!!parentZNode.children?parentZNode.children.length:1);
var childZNode = new ZtreeNode(sonId, orgId, name);
console.log(childZNode)
zTree.addNodes(parentZNode, childZNode);//重点代码就这一句，其余的代码只是为了拿到父节点的数据
$('#organizationInput').val('').hide();
})
- 这里要介绍下setting的下一个属性callback，里面全部是一些回调方法，这里我用到的是onClick
- 然后在这个方法中拿到父节点的数据，把放在
#organizationBtn中，代码如下
// 角色树点击事件
function zTreeOnClick(event, treeId, treeNode) {
$('#organizationHidden').attr('bId',treeNode.id);
$('#organizationInput').show();//这里是让输入节点名称的input框显示出来
};
下面是全部代码
var setting1 = {
view:{
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true
}
},
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: { "Y": "ps", "N": "ps" }
},
callback: {
onCheck: onCheck, //选中
onClick: clickNode
}
};
var zNodes1 = [
{ id:1, pId:0, name:"父节点 1", open:true},
{ id:11, pId:1, name:"去百度"},
{ id:12, pId:1, name:"叶子节点 1-2"},
{ id:13, pId:1, name:"叶子节点 1-3"},
{ id:2, pId:0, name:"父节点 2", open:true},
{ id:21, pId:2, name:"叶子节点 2-1"},
{ id:22, pId:2, name:"叶子节点 2-2"},
{ id:23, pId:2, name:"叶子节点 2-3"},
{ id:3, pId:0, name:"父节点 3", open:true},
{ id:31, pId:3, name:"叶子节点 3-1"},
{ id:32, pId:3, name:"叶子节点 3-2"},
{ id:33, pId:3, name:"叶子节点 3-3"}
];
// 初始化权限树
$.fn.zTree.init(
$("#jurisdictionTree"),
setting1,
zNodes1
);
// 权限选中函数
function onCheck(e, treeId, treeNode) {
console.log("id="+treeNode.id+ " ,name="+treeNode.name + " ,pId="+treeNode.pId);
}
// 权限单击函数
function clickNode(e,treeId,treeNode){
$('#jurisdictionHidden').attr('bId',treeNode.id);
$('#jurisdictionInput').show();
}
// 添加权限tree
$('#jurisdictionBtn').on('click',function(){
if(!$('#jurisdictionHidden').attr('bId')){
layer.msg('请先选中需要添加的父节点', {icon: 5, time: 3000});
return false;
}
if(!$('#jurisdictionInput').val()){
layer.msg('请先填写节点名称', {icon: 5, time: 3000});
return false;
}
var zTree = $.fn.zTree.getZTreeObj("jurisdictionTree");
var orgId = $('#jurisdictionHidden').attr('bId');
var name = $('#jurisdictionInput').val();
var parentZNode = zTree.getNodeByParam("id", orgId, null); //获取父节点
var sonId = orgId*100 + (!!parentZNode.children?parentZNode.children.length:1);
var childZNode = new ZtreeNode(sonId, orgId, name);
console.log(childZNode)
zTree.addNodes(parentZNode, childZNode);
$('#jurisdictionInput').val('').hide();
// 清楚隐藏域中的选中id
// $('#jurisdictionHidden').removeAttr('pId').removeAttr('bId');
})
<!--html代码-->
<ul id="jurisdictionTree" class="ztree"></ul>
效果图
