通过C#MVC和layui2.8.11自带的treetable传的数据格式问题

已于 2023-08-02 11:04:18 修改
阅读量539 收藏
点赞数
分类专栏： layui 文章标签： c# mvc layui javascript
于 2023-08-02 10:19:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45901262/article/details/132055688
版权

最近在研究layui插件，需要用到treetable树形数据表格，查看了一下官方文档和示列
layui文档地址：https://layui.dev/docs/2.8/treeTable/
gitee地址：https://gitee.com/layui/layui
这是官方的示列代码，只需引用layui.js，在script中实例化一下treetable就可以使用了

layui.use(function(){
  var treeTable = layui.treeTable;
  var layer = layui.layer;
  var dropdown = layui.dropdown;
  // 渲染
  var inst = treeTable.render({
    elem: '#ID-treeTable-demo',
    url: '/static/2.8/json/treeTable/demo-1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
    tree: {
      /*
      // 异步加载子节点
      async: {
        enable: true,
        url: '/static/2.8/json/treeTable/demo-async.json', // 此处为静态模拟数据，实际使用时需换成真实接口
        autoParam: ["parentId=id"]
      }
      */
    },
    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: 'experience', title: '积分', width: 90, sort: true},
      {field: 'sex', title: '性别', width: 80, sort: true},
      {field: 'score', title: '评分', width: 80, sort: true},
      {field: 'city', title: '城市'},
      { fixed: "right", title: "操作", width: 181, align: "center", toolbar: "#TPL-treeTable-demo-tools"} 
    ]],
    page: true
  });

因为查看了一下先前第三方的treetable的使用方法，返回的数据只需要标注ID和parentid就行，然后我就试了一下官方的可不可以，发现不行，于是看了一下demo-1.json这个文件
在这里插入图片描述
可以看到需要的数据格式是这样的，于是我就把取过来的list进行了拼接试一试，开始的代码是这样的：

public ActionResult getModule(int limit, int page)
        {
            List<SysModuleModel> list = bll.getModule();
            List<SysModuleModel> list2 = new List<SysModuleModel>();
            //list2 = list.OrderBy(a => a.ID).Skip(limit * (page - 1)).Take(limit).ToList();
            list2 = list.Where(a => a.PARENTID == "0").Skip(limit * (page - 1)).Take(limit).ToList();
            string str = "[";
            for (int i = 0; i < list2.Count; i++)
            {
                str += "{";
                str += "\"ID\":";
                str += "\"" + list2[i].ID + "\",";
                str += "\"MODULEID\":";
                str += "\"" + list2[i].MODULEID + "\",";
                str += "\"MODULENAME\":";
                str += "\"" + list2[i].MODULENAME + "\",";
                str += "\"MODULEDESCRIPTION\":";
                str += "\"" + list2[i].MODULEDESCRIPTION + "\",";
                str += "\"MODULEURL\":";
                str += "\"" + list2[i].MODULEURL + "\",";
                str += "\"MENUICON\":";
                str += "\"" + list2[i].MENUICON + "\",";
                str += "\"ORDERNO\":";
                str += "\"" + list2[i].ORDERNO + "\",";
                str += "\"USERCREATED\":";
                str += "\"" + list2[i].USERCREATED + "\",";
                str += "\"TIMECREATED\":";
                str += "\"" + list2[i].TIMECREATED + "\",";
                str += "\"PARENTID\":";
                str += "\"" + list2[i].PARENTID + "\",";
                List<SysModuleModel> list3 = list.Where(u => u.PARENTID == list2[i].MODULEID).ToList();
                str += "\"children\":[";
                if (list3.Count > 0)
                {
                    string str2 = "";
                    for (int j = 0; j < list3.Count; j++)
                    {
                        str2 += "{";
                        str2 += "\"ID\":";
                        str2 += "\"" + list3[j].ID + "\",";
                        str2 += "\"MODULEID\":";
                        str2 += "\"" + list3[j].MODULEID + "\",";
                        str2 += "\"MODULENAME\":";
                        str2 += "\"" + list3[j].MODULENAME + "\",";
                        str2 += "\"MODULEDESCRIPTION\":";
                        str2 += "\"" + list3[j].MODULEDESCRIPTION + "\",";
                        str2 += "\"MODULEURL\":";
                        str2 += "\"" + list3[j].MODULEURL + "\",";
                        str2 += "\"MENUICON\":";
                        str2 += "\"" + list3[j].MENUICON + "\",";
                        str2 += "\"ORDERNO\":";
                        str2 += "\"" + list3[j].ORDERNO + "\",";
                        str2 += "\"USERCREATED\":";
                        str2 += "\"" + list3[j].USERCREATED + "\",";
                        str2 += "\"TIMECREATED\":";
                        str2 += "\"" + list3[j].TIMECREATED + "\",";
                        str2 += "\"PARENTID\":";
                        str2 += "\"" + list3[j].PARENTID + "\",";
                        str2 += "\"children\":[],";
                        //str2 += "},";
                        str2 += "\"isParent\":false},";
                    }

                    str += str2.Substring(0, str2.Length - 1).ToString() + "],";
                    //str += "},";
                    str += "\"isParent\":true},";
                }
                else
                {
                    str += "],";
                    //str += "},";
                    str += "\"isParent\":false}";
                }

            }
            string str3 = str.Substring(0, str.Length - 1).ToString() + "]";
            var result = new
            {
                code = 0,
                msg = "",
                count = list.Count(),
                data = JsonConvert.DeserializeObject(str3)
            };
            return Json(result, JsonRequestBehavior.AllowGet);
        }

发现运行于以后，treetable一直正处于转圈圈的状态，然后我alert（）了一下返回的数据，发现data后面是[{},{}]这样的数据，就是MVC的json化无法识别反序列化后的数据于是我查找了类似问题，具体参考：
https://blog.csdn.net/qq_35077107/article/details/104271365该作者的博客
新代码如下：

public ActionResult getModule(int limit, int page)
        {
            List<SysModuleModel> list = bll.getModule();
            List<SysModuleModel> list2 = new List<SysModuleModel>();
            list2 = list.Where(a => a.PARENTID == "0").Skip(limit * (page - 1)).Take(limit).ToList();
            string str = "[";
            for (int i = 0; i < list2.Count; i++)
            {
                str += "{";
                str += "\"ID\":";
                str += "\"" + list2[i].ID + "\",";
                str += "\"MODULEID\":";
                str += "\"" + list2[i].MODULEID + "\",";
                str += "\"MODULENAME\":";
                str += "\"" + list2[i].MODULENAME + "\",";
                str += "\"MODULEDESCRIPTION\":";
                str += "\"" + list2[i].MODULEDESCRIPTION + "\",";
                str += "\"MODULEURL\":";
                str += "\"" + list2[i].MODULEURL + "\",";
                str += "\"MENUICON\":";
                str += "\"" + list2[i].MENUICON + "\",";
                str += "\"ORDERNO\":";
                str += "\"" + list2[i].ORDERNO + "\",";
                str += "\"USERCREATED\":";
                str += "\"" + list2[i].USERCREATED + "\",";
                str += "\"TIMECREATED\":";
                str += "\"" + list2[i].TIMECREATED + "\",";
                str += "\"PARENTID\":";
                str += "\"" + list2[i].PARENTID + "\",";
                List<SysModuleModel> list3 = list.Where(u => u.PARENTID == list2[i].MODULEID).ToList();
                str += "\"children\":[";
                if (list3.Count > 0)
                {
                    string str2 = "";
                    for (int j = 0; j < list3.Count; j++)
                    {
                        str2 += "{";
                        str2 += "\"ID\":";
                        str2 += "\"" + list3[j].ID + "\",";
                        str2 += "\"MODULEID\":";
                        str2 += "\"" + list3[j].MODULEID + "\",";
                        str2 += "\"MODULENAME\":";
                        str2 += "\"" + list3[j].MODULENAME + "\",";
                        str2 += "\"MODULEDESCRIPTION\":";
                        str2 += "\"" + list3[j].MODULEDESCRIPTION + "\",";
                        str2 += "\"MODULEURL\":";
                        str2 += "\"" + list3[j].MODULEURL + "\",";
                        str2 += "\"MENUICON\":";
                        str2 += "\"" + list3[j].MENUICON + "\",";
                        str2 += "\"ORDERNO\":";
                        str2 += "\"" + list3[j].ORDERNO + "\",";
                        str2 += "\"USERCREATED\":";
                        str2 += "\"" + list3[j].USERCREATED + "\",";
                        str2 += "\"TIMECREATED\":";
                        str2 += "\"" + list3[j].TIMECREATED + "\",";
                        str2 += "\"PARENTID\":";
                        str2 += "\"" + list3[j].PARENTID + "\",";
                        str2 += "\"children\":[],";
                        //str2 += "},";
                        str2 += "\"isParent\":false},";
                    }

                    str += str2.Substring(0, str2.Length - 1).ToString() + "],";
                    str += "\"isParent\":true},";
                }
                else
                {
                    str += "],";
                    str += "\"isParent\":false}";
                }

            }
            string str3 = str.Substring(0, str.Length - 1).ToString() + "]";
            List<SysModuleModel> list4 = JsonConvert.DeserializeObject<List<SysModuleModel>>(str3);
            var result = new
            {
                code = 0,
                msg = "",
                count = list.Count(),
                data = list4
            };
            return Json(result, JsonRequestBehavior.AllowGet);
        }

前端代码如下：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutMaster.cshtml";
}
<div class="layui-inline" id="searchKeywordf" style="margin-left:5px">
    <input type="text" autocomplete="off" id="keyword" placeholder="关键字..." class="layui-input">
</div>
<button id="query" type="button" class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon layui-icon-search"></i>查询</button>
<button id="add" type="button" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-addition"></i>新增</button>

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

<script type="text/html" id="tool">
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="detail"><i class="layui-icon layui-icon-edit"></i>详情</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="edit"><i class="layui-icon layui-icon-delete"></i>编辑</button>
</script>

@section Scripts{
<script>
    layui.use(['layer', 'form', 'treeTable','table'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var treeTable = layui.treeTable;
        var util = layui.util;

       // 渲染
        treeTable.render({
                elem:'#ModuleTable',
                url: '/Module/getModule',
                height: 'full-210',
                toolbar:true,
                defaultToolbar: ['filter', 'print', 'exports'],
                page: true,
                tree: {
                    customName: {
                        isParent:"isParent",//自定义「子节点集合」的属性名
                        children:"children",//自定义「是否属于父节点」的属性名
                        name: "MODULENAME", // 节点数据保存节点名称的属性名称
                        id: "MODULEID", // 唯一标识的属性名称
                        pid: "PARENTID", // 父节点唯一标识的属性名称
                        icon: "MENUICON" // 图标的属性名称
                    }
            },
            done: function (res) {
                    treeTable.expandAll('ModuleTable', true);
                },
                cols:[[
                    { field: 'ID', title: '序号', width: 80, templet: function (obj) { return obj.LAY_INDEX; } },
                    { field: 'MODULEID', title: '菜单代码'},
                    { field: 'MODULENAME', title: '菜单名称'},
                    { field: 'MODULEDESCRIPTION', title: '描述'},
                    { field: 'MODULEURL', title: '菜单路由'},
                    { field: 'MENUICON', title: '图标', align: 'center', templet: '<div><i class="layui-icon {{d.MENUICON}}"></i></div>' },
                    { field: 'ORDERNO', title: '顺序号', align: 'center'},
                    { field: 'USERCREATED', title: '创建人', align: 'center' },
                    { field: 'TIMECREATED', title: '创建时间', align: 'center', templet: function (d) { var time = parseInt(d.TIMECREATED.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd HH:mm:ss') } },
                    { field: 'PARENTID', title: '父ID'},
                    { toolbar: '#tool', align: 'center', title: '操作' }
                ]]
        });
    });


    </script>
    }

这是Mdoel：

 public class SysModuleModel
    {
        public string ID { get; set; }
        public string MODULEID { get; set; }
        public string MODULENAME { get; set; }
        public string MODULEDESCRIPTION { get; set; }
        public string MODULEURL { get; set; }
        public string MENUICON { get; set; }
        public string ORDERNO { get; set; }
        public string USERCREATED { get; set; }
        public DateTime TIMECREATED { get; set; }
        public string PARENTID { get; set; }
        public List<SysModuleModel> children { get; set; }
        public bool isParent { get; set; }
    }

最后结果如下图：
在这里插入图片描述

si n da
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Layui2.5.6树形表格TreeTable使用
雾林小妖的博客
06-03 390
Layui树形表格TreeTable使用
Layui树形表格(treeTable)数据格式示例
03-19 618
Layui中treeTable的数据格式示例
Layui的树形表格treeTable
06-20
Layui、treeTable、树形表格、无限层级
LayUI树形表格treetable使用详解
热门推荐
小马同学
04-29 14万+
LayUI是现在比较流行的一款前端框架，也有很多人基于LayUI开发了很多不错的组件，比如treetable树形表格。因为treetable是第三方基于LayUI开发的，所以需要先用Layui引入一下文件。 layui.config({ base : 'static/layui/' }).extend({ treetable : 'treetable-lay/treetab...
Layui实现TreeTable(树形数据表格)
RoyRaoHR的博客
10-21 1万+
参考 Layui实现TreeTable(树形数据表格) LayUI树形表格treetable使用详解 gitee：ele-admin / treetable-lay 开发背景 在开源项目看到layui-treetable实现的菜单配置，页面简洁，手上刚好又有个菜单页面可以进行优化（整活）。但是尽管已经有上面三个案例，因为和现业务并不是很匹配、treetable.js版本等原因，整合的过程还是有些波折。 优化结果： 原页面 treetable实现的页面 实现 下载引入treetable.js 我用的版本是
LayUI树形表格treetable使用详解，和网易大佬的技术面谈
最新发布
sffhhr的博客
03-23 3519
return url;return idx;返回数据格式TreeTableModel类。return msg;super();super();super();返回的JSON数据格式，这里需要注意的是parentId为父节点，需要和前面的JS中设置的属性值一样，没有父级节点parentId需要为0，不能为null。“code”: 0,“data”: [“id”: 1,“name”: “系统设置”,“url”: “”,
lay-treeTable开发文档
奋斗的新丁
04-20 4217
简介 Layui的树形表格treeTable，支持异步加载(懒加载)、复选框联动、折叠状态记忆。 演示地址：https://whvse.gitee.io/treetable-lay/ 更新日志 不定期增加 增加单元格溢出省略，点击悬浮展开全部(2019-12-27) 解决空数据时刷新后空提示不移除的bug(2019-12-21) 优化固定表头及固定宽度(2019-12-21) 获取选中数据增加可获取非半选的选中数据(2019-12-21) 2019-11-18 (v2.0) 重构treeTab
layui-2.8.11.zip
07-25
layui-2.8.11（layui-v2.8.11.zip、layui-2.8.11.zip、layui-2.8.11.tar.gz），Layui 是一套开源免费的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用...
layui 项目实战.md
03-26
一个又一个夜晚，踩过 layui 一个又一个坑，特此纪念
PHP程序设计-3期（KC016） 2.8.11字符串格式化 常见问题.docx
07-13
PHP程序设计-3期（KC016） 2.8.11字符串格式化 常见问题.docx 学习资料 复习资料 教学资源
MKAdmin（layui+C# 后台管理系统）
05-19
MKAdmin 项目演示地址 http://www.mkadmin.cn/ 介绍 基于LayUI前端框架实现的后端管理系统 项目架构 前端 1.jquery 2.layui 3.echarts 后端 1.Asp.net MVC 2.Injection依赖注入 3.ADO.NET操作数据库 4.SignalR 数据库 SqlServer2012及以上 数据库安装 按顺序执行dataBase里面三个脚本 修改web.config里面连接数据库连接字符串
wx 2.8.11源码和帮助文档
08-15
wxWidgets is a C++ library that lets developers create applications for Windows, OS X, Linux and UNIX on 32-bit and 64-bit architectures as well as several mobile platforms including Windows Mobile, ...
PHP程序设计-3期（KC016） 2.8.11字符串格式化习题.doc
07-13
通过以上解析，我们可以了解到`printf`和`sprintf`函数在处理字符串格式化时的一些基本规则和用法，它们在编程中常用于输出整齐、规范的数据，特别是在处理数字和字符串混合输出时显得尤为重要。学习并掌握这两个...
LayUI treetable树形表格的实现， 数据格式正确，不显示的解决方案 和在这个过程中遇到的坑~ 认真看 你会得到一些想要的答案。
csdn2990的博客
12-14 1万+
先给大家看下效果吧！ 我这边只是针对数据显示的问题做了解释。并没有增删改查。找增删改查的同学可以不用看了。 做出这样的效果，首先我们要借用LayUI的内置插件，treetable.js 网上有很多，之前看一个文档里说LayUI不自带这个插件，其实是有的。。。可能他没下载对。 —网上百度的用的基本都是这2个文件。 但其实LAYUI下载下来的插件里面其实是有的。可能之前没有，最近更新就有了吧...
layui treeTable
闪耀星星的窝
08-20 2548
layui table结构不能很直观的展示层级信息，所以参考"https://fly.layui.com/extend/treeTable/"组件（layui版本为v2.5.6），修改为树形展示，修改了treeTable.js，保留了一些原table定义； 修改如下：支持reload,post方式拉取数据,参考table配置（操作列支持toolbar,cols结构,checkStatus）,check_mode(0上下级联勾选默认，1单选，2多选[不级联])，open_all(默认展开全部)，level_
＜笔记＞layUI树状treetable树形表格
简析的博客
08-28 1434
树形表格treeTable实现了layui数据表格的大部分功能，并且在用法上与几乎数据表格一致， 支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能。 演示地址：https://whvse.gitee.io/treetable-lay/demo/ 开发文档：https://gitee.com/whvse/treetable-lay/wikis/pages ...
Layui树形列表，Layui树形菜单列表
weixin_43992507的博客
10-06 4588
Layui树形列表 比较简单请耐心查看 效果图 实现方式 首先引入组件（代码放到最后面了） layui.config({ base: $projectPath+"/js/util/layui-module/" }).extend({ treeSelect: "treeSelect", treeTable: "treeTable", }); js 中 var layer; var form; var table; var treeTable; var interUrl = {
layui树形表格treetable
peppa_pig的博客
07-27 3569
treetable树形表格是基于LayUI开发的组件，所以需要先用Layui引入一下文件。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev.
将Jackson-databind升级到2.8.11
05-30
好的，你可以通过以下步骤将Jackson-databind升级到2.8.11： 1. 打开你的Maven项目 2. 找到pom.xml文件 3. 在pom.xml文件中找到以下代码： ``` <groupId>com.fasterxml.jackson.core</groupId> <artifactId>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值