C#实现删除layui tree父节点下的所有子节点的操作

最近研究了一下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";
        }

数据表结构为

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值