经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Layui treeTable 使用【数据不显示、子级不显示】
来源:cnblogs  作者:WantRemake  时间:2023/12/29 9:33:43  对本文有异议
  1. //返回JSON数据类
  2. public class LeaveMessageTreeTable
  3. {
  4. public LeaveMessageTreeTable()
  5. {
  6. this.children = new List<LeaveMessageTreeTable>();
  7. this.isParent = false;
  8. }
  9. public int Id { get; set; }
  10. public int UserId { get; set; }
  11. public int BeUserId { get; set; }
  12. public string name { get; set; }
  13. public string? UserIp { get; set; }
  14. public string? UserAddress { get; set; }
  15. public string Content { get; set; }
  16. public int Status { get; set; }
  17. public DateTime CreateTime { get; set; }
  18. public bool isParent { get; set; }
  19. public int? parentId { get; set; }
  20. public List<LeaveMessageTreeTable> children { get; set; }
  21. }

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

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

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

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

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

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

页面JS

  1. layui.use(function () {
  2. var treeTable = layui.treeTable;
  3. var layer = layui.layer;
  4. var dropdown = layui.dropdown;
  5. // 渲染
  6. var inst = treeTable.render({
  7. elem: '#ID-treeTable-demo',
  8. url: '/Area/LeaveMessage/GetLeaveMessageByCurUser', // 此处为静态模拟数据,实际使用时需换成真实接口
  9. maxHeight: '501px',
  10. toolbar: '#TPL-treeTable-demo',
  11. cols: [[
  12. { type: 'checkbox', fixed: 'left' },
  13. { field: 'Id', title: 'ID', width: 80, sort: true, fixed: 'left' },
  14. { field: 'name', title: '用户名', width: 180, fixed: 'left' },
  15. { field: 'UserIp', title: '城市', width: 80, sort: true },
  16. { field: 'Content', title: '留言内容', width: 400, sort: true },
  17. { field: 'Status', title: '状态', width: 80 },
  18. { fixed: "right", title: "操作", width: 200, align: "center", toolbar: "#TPL-treeTable-demo-tools" }
  19. ]],
  20. page: true
  21. });
  22. // 表头工具栏工具事件
  23. treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
  24. var config = obj.config;
  25. var tableId = config.id;
  26. var status = treeTable.checkStatus(tableId);
  27. // 获取选中行
  28. if (obj.event === "getChecked") {
  29. if (!status.data.length) return layer.msg('无选中数据');
  30. console.log(status);
  31. layer.alert("当前数据选中已经输出到控制台,<br>您可按 F12 从控制台中查看结果。");
  32. }
  33. });
  34. // 单元格工具事件
  35. treeTable.on('tool(' + inst.config.id + ')', function (obj) {
  36. var layEvent = obj.event; // 获得 lay-event 对应的值
  37. var trElem = obj.tr;
  38. var trData = obj.data;
  39. var tableId = obj.config.id;
  40. if (layEvent === "detail") {
  41. layer.msg("查看操作:" + trData.name);
  42. } else if (layEvent === "addChild") {
  43. var data = { id: Date.now(), name: "新节点" };
  44. var newNode2 = treeTable.addNodes(tableId, {
  45. parentIndex: trData["LAY_DATA_INDEX"],
  46. index: -1,
  47. data: data
  48. });
  49. } else if (layEvent === "more") {
  50. // 下拉菜单
  51. dropdown.render({
  52. elem: this, // 触发事件的 DOM 对象
  53. show: true, // 外部事件触发即显示
  54. align: "right", // 右对齐弹出
  55. data: [
  56. {
  57. title: "修改积分",
  58. id: "edit"
  59. },
  60. {
  61. title: "删除",
  62. id: "del"
  63. }
  64. ],
  65. click: function (menudata) {
  66. if (menudata.id === "del") {
  67. layer.confirm("真的删除行么", function (index) {
  68. obj.del(); // 等效如下
  69. // treeTable.removeNode(tableId, trElem.attr('data-index'))
  70. layer.close(index);
  71. });
  72. } else if (menudata.id === "edit") {
  73. layer.prompt({
  74. value: trData.experience,
  75. title: "输入新的积分"
  76. }, function (value, index) {
  77. obj.update({ experience: value }); // 等效如下
  78. // treeTable.updateNode(tableId, trElem.attr('data-index'), {experience: value});
  79. layer.close(index);
  80. });
  81. }
  82. }
  83. });
  84. }
  85. });
  86. });

原文链接:https://www.cnblogs.com/SmallChen/p/17934052.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号