最近研究了一下layui的tree组件,当删除树形组件的一个节点时,我希望能够实现将这个节点下的所有子节点,包括子节点的子节点等等全部删除,经过一段时间研究,现在将主要思路贴出来,供大家参考一下,基本思路是每次当用户添加一个节点时,执行一次sql插入操作,并生成节点id值,后面删除则是将这些子节点的id全部找出来
前端代码:
<div id="test1" class="demo-tree demo-tree-box" style="width: 500px; height: 1000px; overflow: scroll;"></div>
tree.render({
elem: '#test1',
id: 'demoId',
data: data1,
//showCheckbox: true, //是否显示复选框
edit: ['add', 'update', 'del'], //操作节点的图标
click: function (obj)//节点被点击的回调
{
console.log('点击的节点的obj:',obj);
//console.log(obj.data); //得到当前点击的节点数据
// console.log(obj.state); //得到当前节点的展开状态:open、close、normal
// console.log(obj.elem); //得到当前节点元素
// console.log(obj.data.children); //当前节点下是否有子节点
},
operate: function (obj) {
let type = obj.type; //得到操作类型:add、edit、del
let data = obj.data; //得到当前节点的数据
let elem = obj.elem; //得到当前节点元素
console.log('操作的data:', data);
// console.log('obj:', obj);
console.log('elem:', elem);
let id = data.id; //得到节点索引
//此时,如果该节点是新增的,则id为undefined的,因此必须发起ajax查询数据库得到id的值,否则会报错
console.log('id:',id);
if(type === 'add'){ //增加节点
console.log('执行增加操作...........');
if (id === undefined) {
id = getID(elem, data, getChildrenIndex(elem[0]));
console.log("发现id号不存在,获取增加的id值",id);
}
//执行ajax操作
$.ajax({
url: "@Href("~/QueryPage/addOneNode")",
async: false,
type: "POST",
data: {
'id': maxID++,
'parentId': id,
'index': getAddChildIndex(elem)
},
dataType: "text",
success: function (data) {
// console.log('data:',data);
if (data == '200')
{
layer.msg('添加成功!');
}
}
});
}else if (type === 'update') { //修改节点,怎么知道这个节点在数据库中是否已经存在?
console.log('编辑操作...........');
if (id === undefined) {
id = getID(elem, data, getChildrenIndex(elem[0]));
}
$.ajax({
url: "@Href("~/QueryPage/updateOneNode")",
async: false,
type: "POST",
data: {
'id': id,
'name': elem.find('.layui-tree-txt').html()
},
dataType: "text",
success: function (data) {
//console.log('data:',data);
if (data == '200')
{
layer.msg('更新成功!');
}
}
});
}else if (type === 'del') { //删除节点
console.log('删除操作');
//记住删除的是哪个节点
$.ajax({
url: "@Href("~/QueryPage/delNode")",
async: false,
type: "POST",
data: {
'id': id
},
dataType: "text",
success: function (data) {
// console.log('data:',data);
if (data == '200') {
layer.msg('删除成功!');
}
else
{
layer.msg('删除失败!');
}
}
});
};
}
});
//根据当前操作的elem,data,以及该节点在父节点的下标index
function getID(elem,data,index)
{
let getID;
//代表这个是刚才新增的节点,接下来是如何获取这个id值?
$.ajax({
url: "@Href("~/QueryPage/getLastCreateId")",
async: false,
type: "GET",
data: {
'parentId': getFatherDataId(elem),
'index': index
},
dataType: "text",
success: function (val) {
console.log('查询刚才新增的节点id值:', val);
getID = val;
//接下来进行赋值操作,需要给data数据域的id赋值,elem元素域的id赋值
data.id = val;//赋值数据库生成好的id
elem[0].dataset.id = val;
}
});
return getID;
}
//获取新增的节点,一般在最后的位置上,相当于父节点的下标位置
function getAddChildIndex(elem) {
//获取父节点的第一个子节点
let e = elem[0].childNodes[1].childElementCount;
return e;
}
后端实现
[HttpPost]
public string delNode()
{
//删除父节点,同时删除父节点引用下的子节点
string id = Request["id"].ToString();
return new TreeDAL().delNode2(Convert.ToInt32(id));
}
public string delNode2(int id)
{
List<int> queue = new List<int>();
queue.Add(id);
DataTable tempDT;
int len;
string sql;
try
{
while (queue.Count > 0)
{
//获取队列的第一个元素
int elemId = queue.FirstOrDefault();
//if (elemId == 0 && Convert.ToInt32(id) != 0)
//{
// break;//表示队列中的元素已经没有了,队列为空
//}
//获取以该节点为父节点的所有子节点Id
tempDT = getIDTable(elemId);
len = tempDT.Rows.Count;
//如果有子节点,则将这些子节点插入队列
for (int i = 0; i < len; i++)
{
queue.Add(Convert.ToInt32(tempDT.Rows[i][0]));
}
//第一个元素已经遍历完成了,现在执行删除操作
//1删除队列中该元素,2执行删除sql
queue.RemoveAt(0);
sql = string.Format("delete from minfo where id='{0}'", elemId);
executeNonQuery(sql);
}
}
catch (Exception ex)
{
throw ex;
}
return "200";
}
数据表结构为