.net core layui折叠表格的应用。

效果展示

头部的折叠，展开，搜索按钮

<div class="layui-fluid">

    <div style="margin-top: 20px;">
        <div class="layui-btn-group">
            <button class="layui-btn " id="btn-expand"><i class="layui-icon layui-icon-down"></i> 全部展开</button>
            <button class="layui-btn " id="btn-fold"><i class="layui-icon layui-icon-left"></i> 全部折叠</button>
            <button class="layui-btn " id="btn-refresh"><i class="layui-icon layui-icon-loading"></i> 刷新表格</button>
        </div>
        <div class="layui-inline">
            <input class="layui-input" id="edt-search" value="" placeholder="输入关键字">
        </div>

        <button class="layui-btn" id="btn-search" type="button">搜索</button>
    </div>
</div>
<table id="table1" class="layui-table" lay-filter="table1"></table>
<script type="text/html" id="toolbarDemo">

</script>
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-small  layui-btn-xs" onclick="def_Open('编辑用户','/CoreNetPrejectManager/PrejectItem/Edit?Id={{d.Kid}}')" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

下载module/treetable-lay整个文件夹，放在你的项目里面，然后使用模块加载的方式使用：

<script>
    layui.config({
        base: '/xadmin/lay/modules/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['treetable'], function () {
        var treetable = layui.treetable;

    });
<div class="layui-fluid">

引用的表格

<script>
    layui.use(['treetable', 'layer', 'table','jquery', 'form', 'element'], function () {
        var layer = layui.layer, $ = layui.jquery, form = layui.form; table = layui.table;
        var treetable = layui.treetable;
        var layer = layui.layer;
        // 渲染表格
        treetable.render({
            treeColIndex: 0,          // treetable新增参数
            treeSpid: 1,
            treeIdName: 'd_id',
            treePidName: 'd_pid',
            treeDefaultClose: true,
            treeLinkage: true,
            elem: '#table1',
            url: '/UpFile/tree.json',
            toolbar: '#toolbarDemo',
            cols: [[
                //{ type: 'checkbox' },
                { field: 'name', title: '任务事项' },
                { field: 'PlanStart', title: '计划开始时间' },
                { field: 'PlanEnd', title: '计划结束时间' },
                { field: 'ActualTime', title: '实际完成时间' },
                { field: 'FisStatus', title: '完成状态' },
                { field: 'FisPeriod', title: '完成周期' },
                { field: 'BuggetMoney', title: '月算费用' },
                { field: 'FinalMoney', title: '决算费用' },
                { field: 'RespDepartmentName', title: '责任部门' },
                { field: 'ResUidName', title: '责任人' },
                { templet: '#auth-state', width: 150, align: 'center', title: '操作' }
            ]]
        });
        table.on('tool(table1)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {

                 alert('你不可以删除' + data.name);
            }
                });
        //全部展开
        $(document).on("click","#btn-expand",function(){
            treetable.expandAll('#table1');
        });

        //全部折叠
        $(document).on("click","#btn-fold",function(){
            treetable.foldAll('#table1');
        });

        //刷新表格
        $(document).on("click","#btn-refresh",function(){
            location.reload();
        });
        //搜索
        $(document).on("click","#btn-search",function(){
            var keyword = $('#edt-search').val();
            var searchCount = 0;
            $('#table1').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                $(this).css('background-color', 'transparent');
                var text = $(this).text();
                if (keyword != '' && text.indexOf(keyword) >= 0) {
                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
                    if (searchCount == 0) {
                        treetable.expandAll('#table1');
                        $('html,body').stop(true);
                        $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            if (keyword == '') {
                layer.msg("请输入搜索内容", {icon: 5});
            } else if (searchCount == 0) {
                layer.msg("没有匹配结果", {icon: 5});
            }
        });
            });
</script>
注意：
可以使用url传递数据，也可以使用data传递数据，如果使用url传递数据，参数是where字段， 跟layui数据表格的使用方式一致。

数据格式

总而言之就是以id、pid的形式，不是以subMenus的形式，当然id、pid这两个字段的名称可以自定义：

1. {
2. "code": 0,
3. "msg": "ok",
4. "data": [{
5. "id": 1,
6. "name": "xx",
7. "sex": "male",
8. "pid": -1
9. },{
10. "id": 2,
11. "name": "xx",
12. "sex": "male",
13. "pid": 1
14. }
15. ]
16. }

2.3.参数说明

layui数据表格的所有参数都可以用，除此之外treetable新增的参数有：

2.3.参数说明

layui数据表格的所有参数都可以用，除此之外treetable新增的参数有：

参数	类型	是否必填	描述
treeColIndex	int	是	树形图标显示在第几列
treeSpid	object	是	最上级的父级id
treeIdName	string	否	id字段的名称
treePidName	string	否	pid字段的名称
treeDefaultClose	boolean	否	是否默认折叠
treeLinkage	boolean	否	父级展开时是否自动展开所有子级

根据需求按条件拿到自己需要的DataTable数据

 public IActionResult ManagerProgress(int TempId)
        {
            int RecordCount = 0;
            List<DtItem> Variable = new List<DtItem>()
            {
                 new DtItem("TempId",SqlDbType.Int,4,TempId),
            };
            var listData = SqlProcedure.getDataTable(Variable, "CoreNetPrejectItem_GetList", out RecordCount);//调用得是存储过程方法
            DataTable dtlist = listData;
            ProgressList(dtlist);
            return View();
        }

用DataTable传送数据拼接成需要的数据格式

 public void ProgressList(DataTable dtlist)
        {
            if (dtlist != null && dtlist.Rows.Count > 0)
            {
                string json = "{\"code\": 0,\"msg\": \"ok\",\"data\": [";
                foreach (DataRow item in dtlist.Rows)
                {
                    json += " {\"id\": "
                        + int.Parse(item["StageId"].ToString())
                        + ", \"name\": \"" + item["PrejectName"].ToString()
                        + "\",\"PlanStart\":\"" + item["StartTime"].ToString()
                        + "\",\"PlanEnd\":\"" + item["EndTime"].ToString()
                        + "\",\"ActualTime\":\"" + item["ConcreteTime"].ToString()
                        + "\",\"FisStatus\": " + int.Parse(item["State"].ToString())
                        + ",\"FisPeriod\": " + int.Parse(item["Period"].ToString())
                        + ",\"BuggetMoney\": " + decimal.Parse(item["MonthlyPrice"].ToString())
                        + ",\"FinalMoney\": " + decimal.Parse(item["BudgetPrice"].ToString())
                        + ",\"RespDepartmentName\": \"" + item["DepartName"].ToString()
                        + "\",\"ResUidName\": \"" + item["UserName"].ToString()
                        + "\",\"Kid\": " + int.Parse(item["Id"].ToString())
                        + ",\"pid\": " + int.Parse(item["PId"].ToString())
                        + "},";
                }
                json = json.TrimEnd(',');
                json += "]}";
                //目录名
                string sFilePath = FileHelper.CheckAndCreateFile("UpFile/tree.json", true);
                FileHelper.SaveFile(sFilePath, json, "utf-8");
            }
        }

百度搜索layui折叠表格也可以搜到的，只不过数据接口的json格式需要自己根据实际情况采用拼接还是其他方法。