Layui treeTable 使用【数据不显示、子级不显示】
//返回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);
});
}
}
});
}
});
});
Layui treeTable 使用【数据不显示、子级不显示】的更多相关文章
- layui 父子弹窗数据交互(包含子弹窗自己关闭并给父弹窗数据填充)
//父级弹窗 function showAlertOrg() { layui.use('layer', function () { var body; var index = layer.open({ ...
- linq根据传入数据集合查询对应子级数据
工作中经常用到的linq根据传入数据集合查询对应子级数据,整理共享,希望大家都能用得上,代码中doublesArray 为父节点对应ID数据集合,再根据ID数据集合查询全部子级数据. //获取缓存数据 ...
- linq依据传入数据集合查询相应子级数据
工作中经经常使用到的linq依据传入数据集合查询相应子级数据,整理共享,希望大家都能用得上,代码中doublesArray 为父节点相应ID数据集合,再依据ID数据集合查询所有子级数据. //获取缓存 ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态
前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑... 1.ztree子节点横向显示(下图): 效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5 ...
- vue结合Ant Design实现后台系统的权限分配(支持无限子级嵌套)
最近公司的业务需要,要做一个后台管理系统的管理系统类似于这样子 功能需求如下: 左边是权限菜单,右边对应的是具体权限. 1.父级权限菜单选中,父级权限菜单的权限包括其中所有子级权限菜单的权限也要选中, ...
- 128_Power BI父级排名TOPN子级动态展示
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 前些天在和朋友交流Power BI中有这样一个需求,按照父级排名后,需要显示出父级TOPN的子级明细. 如下&l ...
- [Unity3D]巧妙利用父级子级实现Camera场景平面漫游
本文系作者原创,转载请注明出处 入门级的笔者想了一上午才搞懂那个欧拉角的Camera旋转..=.= 在调试场景的时候,每次都本能的按下W想前进,但是这是不可能的(呵呵) 于是便心血来潮想顺便添加个Ke ...
- AGS中通过FeatureServer插入数据失败、插入数据在WMTS请求中无法显示以及version概念的讨论
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在多个项目中,当我方接口给其他部门人员使用时出现了插入数据失 ...
- ThinkPHP 关联模型中查询某条记录的父级(非查询子级)
数据表 id cat_name cat_pid 76 手机.数码 0 84 手机配件 76 86 蓝牙耳机 84 从属关 ...
随机推荐
- ES13 中11个令人惊叹的 JavaScript 新特性
前言 与许多其他编程语言一样,JavaScript 也在不断发展.每年,该语言都会通过新功能变得更加强大,使开发人员能够编写更具表现力和简洁的代码. 小编今天就为大家介绍ES13中添加的最新功能,并查 ...
- Electron包装网站的问题
原文链接 原文链接 Preface 最近尝试了很多不错的在线工具,只是每次都要进入网站,有点麻烦,于是想到之前了解过的electron,尝试一下打包成本地应用. Contents 1.下载所有源文件 ...
- Solution -「NOI 2020」时代的眼泪
Description Link. 给出一个二维平面以及一些点,保证点不在同行 / 同列.每次询问求出一个子矩阵里面的顺序对. Solution 卡常,卡你吗. 膜拜 dX. 基本是把 dX 的题解贺 ...
- Linux升级至glibc-2.14步骤
Linux升级至glibc-2.14步骤 查看gcc版本命令: strings /lib64/libc.so.6 |grep GLIBC_ glibc安装 首先, 点击此处下载glibc2.14下载, ...
- 2023-10-04:用go语言,现有一棵无向、无根的树,树中有 n 个节点,按从 0 到 n - 1 编号 给你一个整数 n 和一个长度为 n - 1 的二维整数数组 edges , 其中 edge
2023-10-04:用go语言,现有一棵无向.无根的树,树中有 n 个节点,按从 0 到 n - 1 编号 给你一个整数 n 和一个长度为 n - 1 的二维整数数组 edges , 其中 edge ...
- 本地化部署自建类ChatGPT服务远程访问
Text generation web UI可为类ChatGPT的大型语言模型提供能够快速上手的网页界面,不仅可以提高使用效率,还可满足私有化部署,或对模型进行自定义.目前,该Web UI已经支持了许 ...
- 【v2v迁移】Xen2kvm 迁移-Windows篇
迁移环境: 源平台:华为FusionComputeV100R006C10SPC101 目标平台:基于KVM虚拟化的云平台,本文以原生的libvirt为例 虚拟机:Windows server 2012 ...
- 轻松合并Excel工作表:Java批量操作优化技巧
摘要:本文由葡萄城技术团队于博客园原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 前言 在Excel中设计表单时,我们经常需要对收集的信息进行统 ...
- 虹科案例|Redis企业版数据库:金融行业客户案例解读
传统银行无法提供无缝的全渠道客户体验.无法实时检测欺诈.无法获得业务洞察力.用户体验感较差.品牌声誉受损和业务损失?虹科提供的Redis企业版数据库具有低延迟.高吞吐和可用性性能,实施Redis企业版 ...
- 聊聊RNN与seq2seq
seq2seq模型也称为Encoder-Decoder模型.顾名思义,这个模型有两个模块--Encoder(编码器)和Decoder(解码器).编码器对输入数据进行编码,解码器对被编码的数据进行解码. ...