一、我今天做了一个Ztree树增删改查菜单的功能，在这里记录一下，下次使用时拿过来直接用。
二、首先ztree有特别好的中文 API，目前现在更新到3.5.40版本，大家可以直接去官网下载它的类库（js,css,demo,api）,这里我就不提供了。
ztree官网：http://www.treejs.cn/v3/api.php
三、开始操作
1.首先要先引入相关的jquery,ztree中的css,js。（要是用到其他的js，比如这里我用到了layui直接引入即可。）
这几个必须引（当然layui除外。） 还有其他的用到的话 自行引入处理。
<link rel="stylesheet" th:href="@{/ztree_v3/css/demo.css}">
<link rel="stylesheet" th:href="@{/ztree_v3/css/zTreeStyle/zTreeStyle.css}">
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<link rel="stylesheet" th:href="@{/layui/css/style.css}">
<script th:src="@{/ztree_v3/js/jquery-1.4.4.min.js}"></script>
<script th:src="@{/ztree_v3/js/jquery.ztree.core.js}"></script>
<script th:src="@{/ztree_v3/js/jquery.ztree.core.js}"></script>
<script th:src="@{/ztree_v3/js/jquery.ztree.exedit.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
2.展示树样式
CSS代码块
<style type="text/css">
ul.ztree{
width : 320px;
height: 420px;
}
</style>
HTML 代码块
<div class="layui-row">
<div id="layer-zTree" >
<div style="padding: 10px; height:90%;">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</div>
JS代码块
<script type="text/javascript">
$(function(){
onLoadZTree();
});
/* 树状图 */
var setting = {
//视图显示样式
view : {
dblClickExpand: false, //双击节点时，是否自动展开父节点的标识 默认true
showLine: false, //设置 zTree 是否显示节点之间的连线。默认true
selectedMulti: false, //设置是否允许同时选中多个节点。默认true
addHoverDom: addHoverDom, //显示按钮
removeHoverDom: removeHoverDom //隐藏按钮
},
//编辑
edit: {
enable: true, //设置 zTree 是否处于编辑状态 默认false
editNameSelectAll: true, //点击编辑的时候，里面的文本全部选中
removeTitle: '删除节点', //删除按钮的名称
renameTitle: '重命名' //编辑名称按钮
},
//采用的数据格式
data: {
simpleData: {
enable: true, //是否采用简单数据模式 (Array)
idKey: "id", //指定子节点的元素名称
pIdKey: "pid", //指定父节点的元素名称
rootPId: 0 //用于修正根节点父节点数据
}
},
//回调函数
callback: {
beforeRemove: beforeRemove, //点击删除时触发，用来提示用户是否确定删除
beforeEditName: beforeEditName, //点击编辑时触发，用来判断该节点是否能编辑,是否进入编辑状态
beforeRename: beforeRename, //编辑结束时触发，用来验证输入的数据是否符合要求
onRemove : onRemove, //删除节点后触发，用户后台操作
onRename : onRename, //编辑后触发，用于操作后台
}
};
/* 加载数据 */
function onLoadZTree(){
$.ajax({
async: false, //是否异步
cache: false, //是否使用缓存
type: 'POST', //请求方式
url: '写自己的', //请求地址
success: function(data) {
//console.log(data)
treeNodes = data.data; //把后台封装好的简单的JSON格式赋给treeNodes
}
});
var t = $("#treeDemo");
t = $.fn.zTree.init(t, setting, treeNodes); //zTree 初始化方法
t.expandAll(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='新增' 'this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
if(btn) btn.bind("click", function() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
layer.prompt({
formType: 0,
value: '',
title: '请输入节点名称'
}, function (value, index){
if(value.trim().length === 0) {//非空验证
return false;
}
if($('#guonp').val()===""){
layer.tips("请正确填写分组信息",$('#guonp'));
return;
}
if($('#full_name').val()===""){
layer.tips("请填写部门全称",$('#full_name'));
return;
}
layer.close(index)
var pid = treeNode.id;
var name = value;
var grup = $('#guopp input[name="zuzu"]:checked').val()
var deptFullName = $('#full_name').val();
$.ajax({
type: "POST",
async: false,
url: "写自己的",
data: {
"pid": pid,
"name": name,
"grup": grup,
"deptFullName": deptFullName
},
success: function(data) {
if(data.code == 10000) {
zTree.addNodes(treeNode, {
pId: treeNode.id,
name: value
});
onLoadZTree() //重新加载，不然再次添加会报错
layer.msg('添加成功', {
icon: 1,
time: 1000
});
} else {
onLoadZTree()
layer.msg('' + data.msg + '', {
icon: 5,
time: 1000
});
}
}
});
});
$(".layui-layer-content").append("<br/><div id=\"guopp\">集团：<input type=\"radio\" name=\"zuzu\" value=\"0\" title=\"集团\" /> 股份：<input type=\"radio\" name=\"zuzu\" value=\"1\" title=\"股份\" checked /></div>")
$(".layui-layer-content").append("<br/><input type=\"text\" id= \"full_name\" class=\"layui-input\" placeholder=\"输入部门全称\" />")
});
}); /* layui */
}
//移除鼠标隐藏按钮
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
}
/*
* 编辑
*/
function beforeEditName(treeId, treeNode) {
return true;
}
/**
* 重命名
*/
function beforeRename(treeId, treeNode, newName, isCancel) {
if(newName.length < 3){
alert("名称不能少于3个字符！");
return false;
}
return true;
}
/* 编辑后触发，后台操作 */
function onRename(event, treeId, treeNode, isCancel){
var typeId = treeNode.id;
var typeName = treeNode.name;
if(confirm("您确认修改类别名称?")){
$.post("写自己的",
{
"id": typeId,
"name": typeName
},
function(response){
if(response != null){
if(response.code == 10000){
console.log(response);
} else if(response.code == 10001){
alert("修改名称失败!");
}
}
},
'json');
}
}
/*
* 删除
*/
function beforeRemove(treeId, treeNode) {
if(confirm("确认要删除？")){
if(treeNode.isParent){
alert("该目录下面还有子目录，请从最底层目录开始删除！")
return false;
}
return true;
}
return false;
}
/* 删除后触发，后台操作 */
function onRemove(event, treeId, treeNode) {
var typeId = treeNode.id;
$.post("写自己的",{"id":typeId},function (reposonse){
console.log(reposonse);
if(reposonse.code == 10000){
onLoadZTree(); //重新加载
} else{
alert("删除失败");
}
})
}
</script>
4894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
