1、前端页面
<body>
<div class=" page-content clearfix">
<div class="t_Record" style="width:90%">
<div class="tree-ads" id="tree-ads">
<div id="tree-sorts" class="ztree"></div>
</div>
</div>
</div>
</body>2、js代码以及配置项
$(function() {
onLoadZTree();
})
/*******树状图*******/
var setting = {
view: {
dblClickExpand: false,
showLine: false,
selectedMulti: false,
addHoverDom: addHoverDom, //显示按钮
removeHoverDom: removeHoverDom, //隐藏按钮
},
edit: {
enable: true,
editNameSelectAll: true,
removeTitle: '删除',
renameTitle: '重命名'
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: "0"
}
},
callback: {
beforeRemove: beforeRemove, //点击删除时触发，用来提示用户是否确定删除
beforeEditName: beforeEditName, //点击编辑时触发，用来判断该节点是否能编辑,是否进入编辑状态
beforeRename: beforeRename, //编辑结束时触发，用来验证输入的数据是否符合要求
}
};
function onLoadZTree() {
$.ajax({
async: false, //是否异步
cache: false, //是否使用缓存
type: 'POST', //请求方式：post
url: 'ads/cat/list', //请求的路径
success: function(data) {
treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes
}
});
var t = $("#tree-sorts");
t = $.fn.zTree.init(t, setting, treeNodes);
t.expandAll(true);
}
//新增
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() {
var zTree = $.fn.zTree.getZTreeObj("tree-sorts");
layer.prompt({
formType: 0,
value: '',
title: '请输入节点名称'
}, function(value, index) {
if(value.trim().length === 0) {//非空验证
return false;
}
layer.close(index)
var pid = treeNode.id;
var name = value;
$.ajax({
type: "POST",
async: false,
url: "ads/sort/add",
data: {
"pid": pid,
"name": name
},
success: function(data) {
if(data.status == 200) {
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
});
}
}
});
});
});
};
//移除鼠标隐藏按钮
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
}
/*
* 编辑
*/
function beforeEditName(treeId, treeNode) {
return true;
}
function beforeRename(treeId, treeNode, newName, isCancel) {
if(newName.trim().length === 0) {
layer.msg('名称不能为空', {
icon: 5,
time: 1000
})
return false;
} else {
$.ajax({
type: "POST",
async: false,
url: "ads/sort/update",
data: {
"id": treeNode.id,
"name": newName
},
success: function(data) {
if(data.status == 200) {
onLoadZTree() //重新加载，不然再次添加会报错
layer.msg('修改成功', {
icon: 1,
time: 1000
});
return true;
} else {
onLoadZTree()
layer.msg('' + data.msg + '', {
icon: 5,
time: 1000
});
return false;
}
}
});
}
}
/*
* 删除
*/
function beforeRemove(treeId, treeNode) {
if(treeNode.isParent == true) {
layer.msg('请首先删除子节点', {
icon: 5,
time: 1000
});
return false;
}
layer.confirm('确认要删除吗？', {
btn: ['确定', '取消']
}, function(index) {
$.ajax({
type: "POST",
async: false,
url: "ads/sort/delete",
data: {
"id": treeNode.id,
"pId": treeNode.pId
},
success: function(data) {
if(data.status == 200) {
onLoadZTree() //重新加载，不然再次添加会报错
layer.msg('删除成功', {
icon: 1,
time: 1000
});
return true;
} else {
onLoadZTree()
layer.msg('' + data.msg + '', {
icon: 5,
time: 1000
});
return false;
}
}
});
layer.close(index);
},
function() {//取消时刷新tree
onLoadZTree()
layer.msg('已取消', {
icon: 6,
time: 1000
});
return false;
}
);
}注意：在前端页面中，ztree默认的css中没有新增按钮，需要在样式文件添加如下一句样式
.ztree li span.button.add {margin-right:2px; background-position:-143px 0px; vertical-align:top; *vertical-align:middle}
3、后台代码，主要就是增加和删除，其他的不写
//增加
public Result addTbcontentCategory(long pid, String name) throws Exception {
TbContentCategory category=new TbContentCategory();
category.setParentId(pid);
category.setName(name);
category.setStatus(1);
category.setIsParent(false);
category.setSortOrder(getOrder(pid));
Date date=new Date();
category.setCreated(date);
category.setUpdated(date);
categoryMapper.insert(category);
//查看是否为父结点
TbContentCategory contentCategory = categoryMapper.selectByPrimaryKey(pid);
//不是父节点修改为父结点
if(!contentCategory.getIsParent()){
contentCategory.setIsParent(true);
categoryMapper.updateByPrimaryKey(contentCategory);
}
return Result.ok();
}
//排序
private int getOrder(long pid) {
TbContentCategory category = categoryMapper.selectByPrimaryKey(pid);
if(category==null) {
return 1;
}else {
TbContentCategoryExample example=new TbContentCategoryExample();
TbContentCategoryExample.Criteria criteria = example.createCriteria();
criteria.andParentIdEqualTo(pid);
List<TbContentCategory> cat = categoryMapper.selectByExample(example);
if(cat.size()<=0||cat==null) {
return 1;
}else {
return cat.size()+1;
}
}
}
//删除
public Result deleteTbcontentCategory(long id,long pId) throws Exception {
TbContentCategory category = categoryMapper.selectByPrimaryKey(pId);
categoryMapper.deleteByPrimaryKey(id);
if(category.getIsParent()){//如果是父类目，改成非父类目
category.setIsParent(false);
categoryMapper.updateByPrimaryKey(category);
}
return Result.ok();
}
有不对的地方，还希望大神指正,3Q
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
