.net core 树形列表(layui框架下)

    说到树形,我们立刻都会想到导航栏,但是这回我要说的是树形列表。由于项目用的是layui框架,所以就在layui框架下实现树形列表

  首先我们要引入layui中的treetable。

.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" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.config({
        base: /xadmin/lay/modules/
    }).extend({
        treetable: treetable-lay/treetable
    }).use([treetable], function () {
        var treetable = layui.treetable;

    });

</script>

<script>
    layui.use([treetable,layer], function () {
        var treetable = layui.treetable;
        var layer = layui.layer;
        // 渲染表格
        treetable.render({
            treeColIndex: 0,          // treetable新增参数
            treeSpid: 1,             // treetable新增参数
            treeIdName: d_id,       // treetable新增参数
            treePidName: d_pid,     // treetable新增参数
            treeDefaultClose: true,   // treetable新增参数
            treeLinkage: true,        // treetable新增参数
            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);
            } else if (layEvent === edit) {
                location.href = "/Projectmanage/BuggetTemp/EditBugget?BuggetTempId=" + data.id;
                    }
                });
        //全部展开
        $(document).on("click","#btn-expand",function(){
            treetable.expandAll(#table1);
        });

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

        //刷新表格
        $(document).on("click","#btn-refresh",function(){
            renderTable();
        });
        //搜索
        $(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: ‘/UpFile/tree.json‘, 中的json格式

{
    "code": 0,
    "msg": "ok",
    "data": [{
        "id": 1,
        "name": "四期项目管理",
        "PlanStart": "",
        "PlanEnd": "",
        "ActualTime": "",
        "FisStatus": 0,
        "FisPeriod": 0,
        "BuggetMoney": 0,
        "FinalMoney": 0,
        "RespDepartmentName": "",
        "ResUidName": "张三",
        "level": 1,
        "pid": 0
    }, {
        "id": 2,
        "name": "前期设计阶段",
        "PlanStart": "",
        "PlanEnd": "",
        "ActualTime": "",
        "FisStatus": 0,
        "FisPeriod": 0,
        "BuggetMoney": 0,
        "FinalMoney": 0,
        "RespDepartmentName": "",
        "ResUidName": "",
        "level": 2,
        "pid": 1
    }]
}

效果图:

1,  列表展示

.net core 树形列表(layui框架下)

 

 2,全部展开

 .net core 树形列表(layui框架下)

 

3,搜索

    .net core 树形列表(layui框架下)

 

 4,选择列

   .net core 树形列表(layui框架下)

 

 

 4,打印

   .net core 树形列表(layui框架下)

 

 

  5,导出

.net core 树形列表(layui框架下)

 

.net core 树形列表(layui框架下)

上一篇:css及HTML总结


下一篇:【asp.net core 系列】- 11 Service层的实现样板