引入了layui2.8.0之上的版本，页面还是显示的和table一样
引入了layui2.8.0之上的版本，传入数据后，页面还是显示的和table一样，有知道怎么弄吗？treetable需要返回的数据格式要带children吗？
@{
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>
//layui.config({
// base: '../../Content/layui/src/modules/' //treetable文件路径
//}).extend({
// treeTable: 'treeTable' //插件名称
//});
layui.use(['layer', 'form', 'treeTable','table'], function () {
var table = layui.table;
var layer = layui.layer;
var treeTable = layui.treeTable;
// 渲染
treeTable.render({
elem:'#ModuleTable',
url: '/Module/getModule',
height: 'full-210',
toolbar:true,
defaultToolbar: ['filter', 'print', 'exports'],
page: true,
tree: {
customName: {
children: "children", // 节点数据中保存子节点数据的属性名称
isParent: "isParent", // 节点数据保存节点是否为父节点的属性名称
name: "MODULENAME", // 节点数据保存节点名称的属性名称
id: "MODULEID", // 唯一标识的属性名称
pid: "PARENTID", // 父节点唯一标识的属性名称
icon: "MENUICON" // 图标的属性名称
}
},
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'},
{ field: 'PARENTID', title: '父ID'},
{ toolbar: '#tool', align: 'center', title: '操作' }
]]
});
});
//后台代码
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();
var result = new
{
code = 0,
msg = "",
count = list.Count(),
data = list2.ToList()//返回的是list
};
return Json(result, JsonRequestBehavior.AllowGet);
}
问题已解决，具体参考https://blog.csdn.net/weixin_45901262/article/details/132055688
文档 http://www.layui.org.cn/docs/treeTable/treeTable.html#api
不知道你这个问题是否已经解决, 如果还没有解决的话:- 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7548374
- 这篇博客你也可以参考下：table 数据表格文档 - layui.table
- 除此之外, 这篇博客: 解决layui中table异步数据请求不支持自定义返回数据格式中的 修改： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
打开layui中table.js源码
在 Class.prototype.pullData 这个方法定义内部
//获得数据 Class.prototype.pullData = function(curr, loadIndex){ var that = this ,options = that.config ,request = options.request ,response = options.response ,sort = function(){ if(typeof options.initSort === 'object'){ that.sort(options.initSort.field, options.initSort.type); } }; that.startTime = new Date().getTime(); //渲染开始时间 if(options.url){ //Ajax请求 var params = {}; params[request.pageName] = curr; params[request.limitName] = options.limit; //参数 var data = $.extend(params, options.where); if(options.contentType && options.contentType.indexOf("application/json") == 0){ //提交 json 格式 data = JSON.stringify(data); } $.ajax({ type: options.method || 'get' ,url: options.url ,contentType: options.contentType ,data: data ,dataType: 'json' ,headers: options.headers || {} ,success: function(res){ // 加入这部分！！！ // 临时解决layui的table组件中response选项不支持多层级获取接口数据的方法 // ----------------开始--------------------- if (typeof options.responseHandler == "function") { res = options.responseHandler(res); } // ----------------结束--------------------- if(res[response.statusName] != response.statusCode){ that.renderForm(); that.layMain.html('<div class="'+ NONE +'">'+ (res[response.msgName] || '返回的数据状态异常') +'</div>'); } else { that.renderData(res, curr, res[response.countName]), sort(); options.time = (new Date().getTime() - that.startTime) + ' ms'; //耗时（接口请求+视图渲染） } loadIndex && layer.close(loadIndex); typeof options.done === 'function' && options.done(res, curr, res[response.countName]); } ,error: function(e, m){ that.layMain.html('<div class="'+ NONE +'">数据接口请求异常</div>'); that.renderForm(); loadIndex && layer.close(loadIndex); } }); } else if(options.data && options.data.constructor === Array){ //已知数据 var res = {} ,startLimit = curr*options.limit - options.limit res[response.dataName] = options.data.concat().splice(startLimit, options.limit); res[response.countName] = options.data.length; that.renderData(res, curr, options.data.length), sort(); typeof options.done === 'function' && options.done(res, curr, res[response.countName]); } };
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^