C# Layui树形表格treetable(二)

C# Layui树形表格treetable(二)(前台请求路径,后台json返回数据)
作者:秋名
撰写时间:2020 年05 月15日
需求:Layui树形表格treetable加上筛选功能,使用GroupBy遍历,显示指定宿舍,对应的床位数,入住人数。

html


  <table class="layui-table" id="shushexxin" lay-filter="shushexxin"></table>

js

  $(function() {
            var Select_LouD = $("#ID_LouD").val();
            var Select_LouC = $("#Select_LouC").val();
            TreeTable=   treetable.render({
                height: "full-300",
                treeColIndex: 1,//树形图标显示在第几列
                treeSpid: 0,//最上级的父级id
                treeIdName: 'SonID',//id字段的名称
                treePidName: 'ParentID',//pid字段的名称,父级菜单id
                treeDefaultClose: true,//是否默认折叠
                treeLinkage: false,//父级展开时是否自动展开所有子级
                elem: '#shushexxin',
                url: 'Demo_Select',
                cols: [[
                    { type: 'checkbox' },
                    { field: 'NodeName', title: '宿舍编号', align: "center" },
                    { field: 'NodeName1', title: '姓名', align: "center" },
                    { field: 'SonID', title: 'SonID', hide: true },
                    { field: 'ParentID', title: 'ParentID', hide: true }
                    //{ title: "操作", width: 100, templet: setMenuOperate, align: "center", fixed: 'right' }
                ]],
                where: {
                    loudonID: Select_LouD,
                    loucenID: Select_LouC,
                },
                done: function (e) {
                            console.log(e)
                            //layer.closeAll('loading');
                },
            })
            table.on('row(shushexxin)', function (obj) {
            });

        })

控制层

  public ActionResult Demo_Select(int loudonID ,int loucenID) {
            //List<Dictionary<string, object>> jsonlist = new List<Dictionary<string, object>>();
            //List<MenuTree> treeList = new List<MenuTree>();
            //var CS = 1;
            List<MenuTree> list1 = (from HB宿管楼栋宿舍 in myModel.HB宿管楼栋宿舍
                                    join HB宿管宿舍床位 in myModel.HB宿管宿舍床位.GroupBy(m => m.宿舍ID) on HB宿管楼栋宿舍.宿舍ID equals HB宿管宿舍床位.Max(m => m.宿舍ID)
                                    //where HB宿管楼栋宿舍.宿舍楼栋ID== loudonID && HB宿管楼栋宿舍.宿舍楼层ID==loucenID
                                    select new MenuTree
                                    {
                                        SonID = 0 - HB宿管楼栋宿舍.宿舍ID,
                                        LouDong=HB宿管楼栋宿舍.宿舍楼栋ID,
                                        LouCen=HB宿管楼栋宿舍.宿舍楼层ID,
                                        NodeName = HB宿管楼栋宿舍.宿舍编码 + "宿舍",
                                        NodeName1 ="共" + HB宿管宿舍床位.Where(m => m.床位编码 != null).Count() +"张床位"+" - "+"已入住"+ HB宿管宿舍床位.Where(m=>m.分配机构学生ID!=null).Count()+"人",
                                        ParentID =0
                                    }).ToList();
            if (loudonID != 0)
            {
                list1 = list1.Where(m => m.LouDong == loudonID).ToList();
            }
            if (loucenID != 0)
            {
                list1 = list1.Where(m => m.LouCen == loucenID).ToList();
            }

            List<MenuTree> list2 = (from HB宿管宿舍床位 in myModel.HB宿管宿舍床位
                                join tb in myModel.G机构学生 on HB宿管宿舍床位.分配机构学生ID equals tb.机构学生ID
                                 into gj from tb宿舍床位机构学生 in gj.DefaultIfEmpty()
                                    select new MenuTree
                               {
                                   SonID = HB宿管宿舍床位.床位ID,
                                   NodeName = HB宿管宿舍床位.床位编码+"号床",
                                   ParentID=0- HB宿管宿舍床位.宿舍ID,
                                   NodeName1= tb宿舍床位机构学生.姓名==null?"(暂空)": tb宿舍床位机构学生.姓名,
                               }).ToList();
            //lsit 底层是数组,
            list1.AddRange(list2);
            //[1,2,3,4,5,7,8,9],
            //LinkedList<>//如果对数据中间取值和删值操作
            // Dictionary<>//键值对(多个值,name不重复)
            //HashSet<int>//一个值,不重复
            ///HashSet<int> vs = new HashSet<int>();
          
            //计算总行数
            int totalRow = list1.Count();
            //分页查询SYS_Academe的数据
            //!!!Skip Take使用前必须使用orderby
            List<MenuTree> list = list1.ToList();
            //封装layui table数据
            LayuiTableData<MenuTree> layuiTableData = new LayuiTableData<MenuTree>()
            {
                count = totalRow,
                data = list,
            };
            return Json(layuiTableData, JsonRequestBehavior.AllowGet);
        }
layui 树形表格是一种基于layui框架的组件,可以将表格数据以树形结构的方式展示出来。 通过引入layui的相关资源文件,我们可以使用layuitreeTable模块来创建树形表格。 使用layui树形表格的步骤如下: 1. 引入layui的样式文件和脚本文件: ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> ``` 2. 创建一个具有特定id的表格容器: ```html <table id="treeTable" lay-filter="demo"></table> ``` 3. 编写JavaScript代码来渲染树形表格: ```javascript layui.use('treeTable', function(){ var treeTable = layui.treeTable; // 渲染树形表格 treeTable.render({ elem: '#treeTable', data: data, // 表格数据 tree: { iconIndex: 2, // 树形图标的索引,默认为2 isPidData: true, // 是否是pid形式的数据,默认为false idName: 'id', // id字段的名称,默认为'id' pidName: 'parentId' // 父id字段的名称,默认为'parentId' }, cols: [ {field: 'name', title: '名称'}, // 表格列配置 {field: 'value', title: '值'} // 更多列... ] }); }); ``` 其中,`data`表示表格的数据,可以是一个数组,每个元素代表一条数据,还可以使用异步接口获取数据。 通过配置`tree`参数,可以设置树形相关属性,例如树形图标的索引、是否是pid形式的数据、id字段和父id字段的名称等。 `cols`参数用于配置表格的列,每个列的`field`表示数据对象的属性名,`title`表示表格列的标题。 通过以上步骤,我们就可以使用layui树形表格来展示数据,并实现树形结构的展开和折叠效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值