C# Layui树形表格treetable

C# Layui树形表格treetable（前台请求路径，后台json返回数据）
作者：秋名
撰写时间：2020 年05 月09日
需求：树形显示数据不美观，要显示点数据。。。嗯嗯，好的。

在这里插入图片描述
引入文件：注意路劲不要写错（不然一直是404）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TTCHjoGe-1589032510860)(https://www.showdoc.cc/server/api/common/visitfile/sign/81d56b0450c9933256d6df7249586bcb?showdoc=.jpg)]
数据库设计：（级联）
在这里插入图片描述
页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree-table</title>
    <link href="~/A_Resources/R_PC/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div class="layui-container layui-text">
        <br>
        <h1>
            Layui树形表格treetable
        </h1>
        <br>
        <div class="layui-btn-group">
            <button class="layui-btn" id="btn-expand">全部展开</button>
            <button class="layui-btn" id="btn-fold">全部折叠</button>
            <button class="layui-btn" id="btn-refresh">刷新表格</button>
        </div>

        <table id="table1" class="layui-table" lay-filter="table1"></table>
    </div>
    <!-- 操作列 -->
    <script type="text/html" id="oper-col">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script src="~/A_Resources/R_QT/jquery-3.2.1.min.js"></script>
    <script src="~/A_Resources/R_PC/layui/layui.js"></script>

    <script>
        layui.config({
            base: '../../A_Resources/R_PC/layui/'
        }).extend({
            treetable: 'treetable-lay/treetable'
        }).use(['layer', 'table', 'treetable'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var layer = layui.layer;
            var treetable = layui.treetable;

            // 渲染表格
            var renderTable = function () {
                layer.load(2);
                treetable.render({
                    treeColIndex: 1,//树形图标显示在第几列
                    treeSpid: 0,//最上级的父级id
                    treeIdName: 'id',//id字段的名称
                    treePidName: 'pid',//pid字段的名称，父级菜单id
                    treeDefaultClose: true,//是否默认折叠
                    treeLinkage: false,//父级展开时是否自动展开所有子级
                    elem: '#table1',
                    url: 'ceshi',
                    page: false,
                    cols: [[
                        { type: 'checkbox' },
                        { field: 'name', title: 'name' },
                        { field: 'id', title: 'id'},
                        { field: 'pid', title: 'pid' },
                    ]],
                    done: function (e) {
                        console.log(e)
                        layer.closeAll('loading');
                    }
                });
            };

            renderTable();

            $('#btn-expand').click(function () {
                treetable.expandAll('#table1');
            });

            $('#btn-fold').click(function () {
                treetable.foldAll('#table1');
            });

            $('#btn-refresh').click(function () {
                renderTable();
            });

            //监听工具条
            table.on('tool(table1)', function (obj) {
                var data = obj.data;
                var layEvent = obj.event;

                if (layEvent === 'del') {
                    layer.msg('删除' + data.id);
                } else if (layEvent === 'edit') {
                    layer.msg('修改' + data.id);
                }
            });
        });
    </script>
</body>
</html>

控制层

      //定义类
      public class test{
            public int? pid { get; set; }
            public string name { get; set; }
            public int? id { get; set; }
    
        }
		
	//C#LinQ查询
    public ActionResult ceshi() {
        List<test> list1 = (from HB宿管楼栋 in myModel.HB宿管楼栋
                    select new test
                    {
                        id = HB宿管楼栋.宿舍楼栋ID,
                        name = HB宿管楼栋.宿舍楼栋MC.Trim(),
                        pid = HB宿管楼栋.宿舍楼层ID
                    }).ToList();

        int totalRow = list1.Count();

        List<test> list = list1.ToList();

        //封装layui table数据
        LayuiTableData<test> layuiTableData = new LayuiTableData<test>()
        {
            count = totalRow,
            data = list,
        };

        return Json(layuiTableData, JsonRequestBehavior.AllowGet);
        }

C# Layui树形表格treetable

猜你喜欢