当前位置:网站首页资讯教程软件教程→详情

Layui tree节点支持增删改的功能

时间:2020-03-04    人气:3792    作者/来源:下载无忧

页面部分:

<div class="x-body">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>开启节点操作图标</legend>
        </fieldset>

        <div id="test2" class="demo-tree demo-tree-box" style=" height: 300px; overflow: scroll;"></div>
    </div>

    <div id="add-node" class="x-body" style="display: none;">
        <form class="layui-form" id="add-form" action="">
            <input type="text" id="NodeID" name="id" style="display:none;" class="layui-input">
            <div class="layui-form-item center">
                <label class="layui-form-label" style="width: 100px">节点名字</label>
                <div class="layui-input-block">
                    <input type="text" name="title" style="width: 240px" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addnode">确定</button>
                </div>
            </div>
        </form>
    </div>

    <div id="edit-node" class="x-body" style="display: none;">
        <form class="layui-form" id="add-form" action="">
            <input type="text" id="nodeId" name="id" style="display:none;" class="layui-input">
            <div class="layui-form-item center">
                <label class="layui-form-label" style="width: 100px">节点名字</label>
                <div class="layui-input-block">
                    <input type="text" id="Title" name="title" style="width: 240px" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="editnode">确定</button>
                </div>
            </div>
        </form>
    </div>





JS部分

 <script>

        layui.use(['tree', 'form'], function () {
            var tree = layui.tree
                , form = layui.form
                , layer = layui.layer;
            var index0pen;
            $.ajax({
                type: 'post',
                url: '/Home/GetTree',
                dataType: 'json',
                success: function (data) {
                    //开启节点操作图标
                    tree.render({
                        elem: '#test2'
                        , data: data
                        , edit: ['add', 'update', 'del'] //操作节点的图标
                        , operate: function (obj) {
                            var type = obj.type; //得到操作类型:add、edit、del
                            var data = obj.data; //得到当前节点的数据
                            var elem = obj.elem; //得到当前节点元素

                            //Ajax 操作
                            var id = data.id; //得到节点索引
                            if (type === 'add') { //增加节点
                                $("#NodeID").val(id);
                                index0pen = layer.open({
                                    type: 1,
                                    title: "新增",
                                    area: ['500px', '200px'],
                                    content: $("#add-node"),

                                });

                            } else if (type === 'update') { //修改节点
                                //console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
                                $("#nodeId").val(id);
                                $("#Title").val(data.title);
                                index0pen = layer.open({
                                    type: 1,
                                    title: "编辑",
                                    area: ['500px', '200px'],
                                    content: $("#edit-node"),

                                });
                            } else if (type === 'del') { //删除节点
                                $.ajax({
                                    url: '/Home/DelNode',
                                    type: 'post',
                                    dataType: 'json',
                                    data: {
                                        nodeid: id
                                    },
                                    success: function (r) {
                                        if (r > 0) {
                                            layer.msg('删除成功', { icon: 6 });
                                        } else {
                                            layer.msg('删除失败', { icon: 5 });
                                        }
                                    },
                                    error: function (s) {
                                        layer.msg('删除出错了');
                                    }
                                });
                            };
                        }
                    });
                },
                error: function (s) {
                    layer.msg('出错了');
                }
            });

            form.on('submit(addnode)', function (data) {
                var nodeData = data.field;
                $.ajax({
                    url: '/Home/AddNode',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        nodetext: nodeData.title,
                        nodepid: nodeData.id
                    },
                    success: function (r) {
                        if (r > 0) {
                            layer.msg('添加成功', { icon: 6 });
                            layer.close(index0pen);
                        } else {
                            layer.msg('添加失败', { icon: 5 });
                        }
                    },
                    error: function (s) {
                        layer.msg('保存出错了');
                    }
                });
                return false;
            });

            form.on('submit(editnode)', function (data) {
                var nodeData = data.field;
                $.ajax({
                    url: '/Home/EditNode',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        nodetext: nodeData.title,
                        nodeid: nodeData.id
                    },
                    success: function (r) {
                        if (r > 0) {
                            layer.msg('修改成功', { icon: 6 });
                            layer.close(index0pen);
                        } else {
                            layer.msg('修改失败', { icon: 5 });
                        }
                    },
                    error: function (s) {
                        layer.msg('修改出错了');
                    }
                });
                return false;
            });

        });

   </script>





后端部分
 public ActionResult GetTree()
        {
            using (MySqlContext db = new MySqlContext())
            {
                List<Tree> list = new List<Tree>();
                List<Trees> trees = db.Trees.ToList();
                foreach (var item in trees)
                {
                    Tree m = new Tree();
                    if (item.Pid == 0)
                    {
                        m.NodeLevel = 1;
                        m.id = item.Id;
                        m.title = item.Title;
                        m.pid = item.Pid;
                        m.children = GetChildren(trees,item.Id,1);
                        list.Add(m);
                    }                                 
                }
                return Content(JsonConvert.SerializeObject(list));
            }
                 
        }


        //递归加载tree
        public List<Tree> GetChildren(List<Trees> trees,int id,int level)
        {
            List<Tree> list = new List<Tree>();
            using (MySqlContext db = new MySqlContext())
            {   
                if (level == 5)
                {
                    var  listTree = db.Trees.Where(r => r.Pid == id).ToList();
                    if (listTree != null)
                    {
                        foreach (var item in listTree)
                        {
                            Tree tree1 = new Tree();
                            tree1.id = item.Id;
                            tree1.title = item.Title;
                            tree1.pid = item.Pid;
                            tree1.NodeLevel = level;
                            list.Add(tree1);
                        }
                    }
                    return list;
                }
                else if (level < 5)
                {
                    List<Trees> listTree = trees.FindAll(e => e.Pid == id);
                    if (listTree != null)
                    {
                        level++;
                        int index = level;
                        foreach (var items in listTree)
                        {
                            Tree tree2 = new Tree();
                            tree2.id = items.Id;
                            tree2.title = items.Title;
                            tree2.pid = items.Pid;
                            tree2.NodeLevel = index;
                            if (trees.FindAll(e => e.Pid == items.Id).Count > 0)
                            {
                                tree2.children = GetChildren(trees, items.Id, level);
                            }
                            if (level == 4)
                            {
                                tree2.children = GetChildren(trees, items.Id, 5);
                            }

                            list.Add(tree2);
                        }
                    } 
                }
                return list;
            }

        }


        [HttpPost]
        public ActionResult AddNode(string nodetext, string nodepid)
        {  
            int result = 0;
            var pid = Convert.ToInt32(nodepid);
            using (MySqlContext db = new MySqlContext())
            {
                Trees data = new Trees
                {
                    Pid = pid,
                    Title = nodetext
                };
                db.Trees.Add(data);
                result = db.SaveChanges();
            }
            return Content(result.ToString());
        }

        public ActionResult EditNode(string nodetext, string nodeid)
        {
            int result = 0;
            var id = Convert.ToInt32(nodeid);
            using (MySqlContext db = new MySqlContext())
            {
                var hasNode = db.Trees.Find(id);
                if (hasNode != null)
                {
                    hasNode.Title = nodetext;
                    result = db.SaveChanges();
                }
               
            }
            return Content(result.ToString());
        }


        public ActionResult DelNode(string nodeid)
        {
            int result = 0;
            var id = Convert.ToInt32(nodeid);
            using (MySqlContext db = new MySqlContext())
            {
                var hasNode = db.Trees.Find(id);
                if (hasNode != null)
                {
                    db.Trees.Remove(hasNode);
                    result = db.SaveChanges();
                }

            }
            return Content(result.ToString());
        }

关于我们|网站帮助|网站声明|联系我们

Copyright @ 2020-2028 下载无忧.All Rights Reserved

下载无忧是一个绿色、安全、免费的下载网站,提供电脑软件、网络游戏、手机应用、手机游戏下载

备案编号: 豫ICP备16017571号-3    公安备案号:41010402002332

服务热线

170-8835-6868

微站

扫描微站