左侧树效果图
代码实例
前端页面
页面只需写一个ul标签即可
<div class="col-md-2">
<ul id="ztree" class="ztree"></ul>
</div>
js引包
<script type="text/javascript" src="${ctx.contextPath}/static/plugins/admin-template/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx.contextPath}/static/plugins/ztree/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="${ctx.contextPath}/static/plugins/ztree/js/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript" src="${ctx.contextPath}/static/plugins/ztree/js/jquery.ztree.exedit.min.js"></script>
js代码
只实现了删除和修改,本人不太会前端,所以没有写新增,希望懂的朋友留言告诉我。
var setting = {
// view: {
// addHoverDom: addHoverDom,
// removeHoverDom: removeHoverDom,
// selectedMulti: false
// },
edit: {
enable: true, //单独设置为true时,可加载修改、删除图标
editNameSelectAll: true,
removeTitle: '删除',
renameTitle: '重命名'
},
data: {
simpleData: {
enable: true,
idKey: "id",
nameKey: "name"
}
},
callback: {
beforeRemove: beforeRemove,//点击删除时触发,用来提示用户是否确定删除(可以根据返回值 true|false 确定是否可以删除)
//beforeEditName: beforeEditName,//点击编辑时触发,用来判断该节点是否能编辑
beforeRename: beforeRename,//编辑结束时触发,用来验证输入的数据是否符合要求(也是根据返回值 true|false 确定是否可以编辑完成)
onRemove: onRemove,//(beforeRemove返回true之后可以进行onRemove)删除节点后触发,用户后台操作
onRename: onRename,//编辑后触发,用于操作后台
beforeDrag: beforeDrag,//用户禁止拖动节点
onClick: clickNode//点击节点触发的事件
}
};
var newCount = 1;
function addHoverDom(treeId, treeNode) {
console.log(treeNode);
var sObj = $("#" + treeNode.id + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
var addStr = "<span class=‘button add‘ id=‘addBtn_" + treeNode.id
+ "‘title=‘add node' οnfοcus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("ztree");
zTree.addNodes(treeNode, {id:(treeNode.id*10 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
return false;
});
}
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
}
function beforeRemove(e, treeId, treeNode) {
//console.log(e);
//console.log(treeId); // ztree
//获取treeNode的父节点
if (treeId.open) {
return confirm("删除父节点会将其附属的子节点一并删除,您确定要删除吗?");
}
return confirm("您确定要删除吗?");
}
function onRemove(e, treeId, treeNode) {
//console.log(treeId); // ztree
//console.log(treeNode); // {name: "范冰冰", pId: "3", id: "31", open: false, level: 1, …}
//alert("删除父节点的id为:" + treeNode.id + "\r\n它的子节点有:" + paramsArray.join(","));
$.ajax({
type: 'post',
data: {
id: treeNode.id
},
dataType: 'json',
url: '${ctx.contextPath}/admin/demand/category/remove',
success: function (data) {
//alert("删除父节点的id为:" + treeNode.id + "\r\n它的子节点有:" + paramsArray.join(","));
if (data.result) {
return alert("删除成功");
} else {
return alert(data.msg);
}
},
error: function (data) {
return alert(data.msg);
}
});
}
function beforeRename(treeId, treeNode, newName, isCancel) {
if (newName.length < 2) {
alert("名称不能少于2个字符!");
return false;
}
return true;
}
function onRename(e, treeId, treeNode, isCancel) {
//console.log(treeNode);
$.ajax({
type: 'post',
data: {
id: treeNode.id,
name: treeNode.name
},
dataType: 'json',
url: '${ctx.contextPath}/admin/demand/category/update',
success: function (data) {
//alert("删除父节点的id为:" + treeNode.id + "\r\n它的子节点有:" + paramsArray.join(","));
if (data.result) {
return alert("修改成功");
} else {
return alert(data.msg);
}
},
error: function (data) {
return alert(data.msg);
}
});
// alert("修改节点的id为:" + treeNode.id + "\n修改后的名称为:" + treeNode.name);
}
function beforeDrag(treeId, treeNodes) {
return false;
}
function clickNode(event, treeId, treeNode, clickFlag) {
//console.log(treeNode);
var id = treeNode.id;
var pid = treeNode.pid;
$("#table-pagination").bootstrapTable('refresh', {
url: "${ctx.contextPath}/admin/demand/detail/demandList?id=" + id + "&pid=" + pid
});
}
后端代码
@PostMapping("remove")
public @ResponseBody
RestResult remove(String id) {
if (StringUtils.isBlank(id)) {
return RestResult.Fail("删除失败,请重新尝试");
}
QueryWrapper<TDeCategory> q = Wrappers.query();
q.eq("pid", id);
List<TDeCategory> list = categoryService.list(q);
if (list.size() > 0) {
for (TDeCategory tDeCategory : list) {
boolean b = categoryService.removeById(tDeCategory.getId());
if (!b) {
return RestResult.Fail("删除子节点失败,请重新尝试");
}
}
}
boolean b = categoryService.removeById(id);
if (b) {
return RestResult.OK();
} else {
return RestResult.Fail("删除失败,请重新尝试");
}
}
@PostMapping("update")
public @ResponseBody
RestResult update(String id, String name) {
if (StringUtils.isBlank(id) || StringUtils.isBlank(name)) {
return RestResult.Fail("请刷新页面,重新编辑");
}
QueryWrapper<TDeCategory> q = Wrappers.query();
q.eq("id", id);
TDeCategory category = new TDeCategory();
category.setName(name);
boolean update = categoryService.update(category, q);
if (update) {
return RestResult.OK();
} else {
return RestResult.Fail("修改失败请重新尝试");
}
}
@GetMapping("dataList")
public @ResponseBody
RestPaging<TDeCategory> dataList(Page page) {
QueryWrapper<TDeCategory> q = Wrappers.query();
q.eq("status", 1);
q.orderByAsc("sort");
Page page1 = categoryService.page(page, q);
return new RestPaging<TDeCategory>(page1.getTotal(), page1.getRecords());
}