首页 > 其他分享 >Layui treeTable 使用【数据不显示、子级不显示】

Layui treeTable 使用【数据不显示、子级不显示】

时间:2023-12-29 09:35:27浏览次数:22  
标签:set obj get Layui treeTable 子级 var public

//返回JSON数据类
public class LeaveMessageTreeTable
{
    public LeaveMessageTreeTable()
    {
        this.children = new List<LeaveMessageTreeTable>();
        this.isParent = false;
    }

    public int Id { get; set; }
    public int UserId { get; set; }
    public int BeUserId { get; set; }
    public string name { get; set; }
    public string? UserIp { get; set; }
    public string? UserAddress { get; set; }
    public string Content { get; set; }
    public int Status { get; set; }
    public DateTime CreateTime { get; set; }
    public bool isParent { get; set; }
    public int? parentId { get; set; }
    public List<LeaveMessageTreeTable> children { get; set; }

}

!!!一直不显示子级或者数据出不来一定要注意这4个字段,字段名一定要一模一样 ,包括大小写!!!

数据中标红线的都是必填的,且字段名要一模一样,大小写也要一致

 children:表示子级数据,数据格式跟父级一致

 isParent:是否有父级:有就位true,否则为false,因此第一级一定是false

 name:就是图中的用户名,点击下一级的地方,这个名字是固定的,必须要有

 parentId:跟子级关联的父级Id,没有父级则为null

页面JS

layui.use(function () {
    var treeTable = layui.treeTable;
    var layer = layui.layer;
    var dropdown = layui.dropdown;
    // 渲染
    var inst = treeTable.render({
        elem: '#ID-treeTable-demo',
        url: '/Area/LeaveMessage/GetLeaveMessageByCurUser', // 此处为静态模拟数据,实际使用时需换成真实接口
        maxHeight: '501px',
        toolbar: '#TPL-treeTable-demo',
        cols: [[
            { type: 'checkbox', fixed: 'left' },
            { field: 'Id', title: 'ID', width: 80, sort: true, fixed: 'left' },
            { field: 'name', title: '用户名', width: 180, fixed: 'left' },
            { field: 'UserIp', title: '城市', width: 80, sort: true },
            { field: 'Content', title: '留言内容', width: 400, sort: true },
            { field: 'Status', title: '状态', width: 80 },
            { fixed: "right", title: "操作", width: 200, align: "center", toolbar: "#TPL-treeTable-demo-tools" }
        ]],
        page: true
    });
    // 表头工具栏工具事件
    treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
        var config = obj.config;
        var tableId = config.id;
        var status = treeTable.checkStatus(tableId);
        // 获取选中行
        if (obj.event === "getChecked") {
            if (!status.data.length) return layer.msg('无选中数据');
            console.log(status);
            layer.alert("当前数据选中已经输出到控制台,<br>您可按 F12 从控制台中查看结果。");
        }
    });
    // 单元格工具事件
    treeTable.on('tool(' + inst.config.id + ')', function (obj) {
        var layEvent = obj.event; // 获得 lay-event 对应的值
        var trElem = obj.tr;
        var trData = obj.data;
        var tableId = obj.config.id;
        if (layEvent === "detail") {
            layer.msg("查看操作:" + trData.name);
        } else if (layEvent === "addChild") {
            var data = { id: Date.now(), name: "新节点" };
            var newNode2 = treeTable.addNodes(tableId, {
                parentIndex: trData["LAY_DATA_INDEX"],
                index: -1,
                data: data
            });
        } else if (layEvent === "more") {
            // 下拉菜单
            dropdown.render({
                elem: this, // 触发事件的 DOM 对象
                show: true, // 外部事件触发即显示
                align: "right", // 右对齐弹出
                data: [
                    {
                        title: "修改积分",
                        id: "edit"
                    },
                    {
                        title: "删除",
                        id: "del"
                    }
                ],
                click: function (menudata) {
                    if (menudata.id === "del") {
                        layer.confirm("真的删除行么", function (index) {
                            obj.del(); // 等效如下
                            // treeTable.removeNode(tableId, trElem.attr('data-index'))
                            layer.close(index);
                        });
                    } else if (menudata.id === "edit") {
                        layer.prompt({
                            value: trData.experience,
                            title: "输入新的积分"
                        }, function (value, index) {
                            obj.update({ experience: value }); // 等效如下
                            // treeTable.updateNode(tableId, trElem.attr('data-index'), {experience: value});
                            layer.close(index);
                        });
                    }
                }
            });
        }
    });
});

标签:set,obj,get,Layui,treeTable,子级,var,public
From: https://www.cnblogs.com/SmallChen/p/17934052.html

相关文章

  • layui 树组件tree 通过API获取数据
    一、简单vartreedata=[]; tree.render({ elem:'#addLeftType', id:'demoId', data:treedata, showCheckbox:true, oncheck:function(obj){ console.log(obj.data);//得到当前点击的节点数据 console.log(obj.checked);//节点是否被选中 console.l......
  • layui之静态表格的分页及搜索功能以及前端使用XLSX导出Excel功能
    LayUI官方文档:https://layui.dev/docs/2/#introduceXLSXNPM地址:https://www.npmjs.com/package/xlsxXLSX 使用参考文档:https://juejin.cn/post/7003153489920524301https://blog.csdn.net/qq_20805455/article/details/1222297621、在官方网站上下载layui压缩文件解压后选......
  • 解决layui表单中按钮自动提交的问题
    原文链接:https://blog.csdn.net/Mirror_r/article/details/80968696layui表单中的按钮会自动提交,这是一个很麻烦的事情。这几天项目中多次用到表单按钮,仔细研究了下,找到了解决办法:1、如果不需要放在表单中的按钮,最好不要放在表单中,不在layui的form中的按钮就不会进行自动提......
  • 对树形结构过滤处理(过滤掉选中文件夹以及子级数据)
    点击查看代码/***移动文件夹(不能移动当前文件夹以及子文件夹)*@paramtree树形结构*@paramcondition过滤单条数据*@returns*/exportfunctionexcludeNodeAndChildren(tree:any,condition:any){if(!Array.isArray(tree)||typeofcondition!=='obj......
  • Js 之treeTable树状表格
    一、下载/**树形表格3.xCreatedbywangfanon2020-05-12https://gitee.com/whvse/treetable-lay*/layui.define(['laytpl','form','util'],function(exports){var$=layui.jquery;varlaytpl=layui.laytpl;varform......
  • 243-layui 区域树xmSelect懒加载,且叶子节点有选择时,自动追溯父节点,并展开选中
    varregionData=[]; varurl=ctx+'/base/region/queryByAll'; varrtnRegion=admin.syncReq(url,{parentId:0}); regionData=rtnRegion.data; active.renderRegionData(regionData,regionId); varregionSel=xmSelect.render({ el:'#r......
  • 第四方支付系统(集成wxpay、alipay)_ LayUI基础
    23以蜡笔小新为开头写一篇藏头诗蜡月寒风正刺骨,笔耕不辍夜已深。小径穿行千百度,新春又至岁华新。暗恋一个人不敢表白怎么办暗恋一个人不敢表白是一个常见的问题,以下是一些建议来帮助你克服这种困境:了解自己:首先,你需要了解自己的情感和动机。思考一下你对这......
  • layui 时间控件 动态js渲染添加
    <tableclass="layui-table"id="myTable"><thead><tr><th>日期</th><th>操作</th></tr></thead><tbody><tr><td>......
  • Layui 表格全局排序
    背景:Layui表格默认是当前页排序,不会全局排序。需要手动修改。layui分页sort只能当前页不能全局排序解决方案_layui排序-CSDN博客2021-02-03layui数据表格实现全局排序_layuitable排序-CSDN博客前端表格<tableclass="layui-hide"id="mantis"lay-filter="mantis"></tab......
  • 228-layui,清空laydate的值
    layui中varlaydate=layui.laydatevara=laydate.render(options)页面一个按钮,点击将日期组件清空,如何实现?$("#cultivateTime-laydate-range").remove();$(".cultivateTimeDiv").append('<inputtype="text"class="layui-input"id=&......