layui表格加载后列数据错误
数据源错误。
检查数据源是否正确，确保数据源中的每个字段名称与表格列名称相匹配。
Layui是一款轻量级的前端UI框架，它提供了丰富的组件和工具，其中包括表格组件。Layui表格组件简单易用，能够快速地构建出功能完善的数据表格，支持分页、排序、筛选等功能，同时也支持自定义表格样式和表格操作等。
layui的数据表格（table）分页篇
首先，最简单的先渲染一个表格，参考官方示例：
这里先讲讲一些渲染细节：
layui内部就是根据cols属性里面每项的field字段来输出数据（该字段跟后台返回的数据字段一致即可输出）。
另外，layui拼接html字符串的方式多次应用数组join方法的方式，这种方式值得安利一波：
否则用传统方式拼接html字符串就相形见绌了（不推荐）：
接着，看一下分页：
从图中可以看出，我们请求地址没加请求参数，layui自动帮我们添加了page，limit的请求参数，默认值分别为1, 10，这是开启了分页的缘故(page: true)。那么，请求参数名是否可以定制呢？答案是可以的，参考request属性：
同样，响应参数名也是可以定制的，参考response属性：
注意，以上只是定制了参数名字而已，接下来才是重头戏：定制数据格式，参考parseData属性：
parseData可以帮助我们定制好与layui对应的表格数据格式，从而输出表格，这是很有用的，毕竟后端前辈返回的数据格式未必跟layui的一致呀。有了以上3种定制方式，我们就不惧输出数据表格了。采用这种方式输出的就是真正的实现了分页，下文提及的方式可不是真正的分页。
-----------------------快乐的分割线，前方jojo高能-----------------------
可能也有小伙伴无视了 request、response、parseData 三剑客，转而用起了data属性，过程如下：
拒绝了使用url属性请求，转用jquery ajax请求数据，最后再tableIns.reload({ data: res.data })一波，达成666操作。
这种做法从结果上看，似乎是可以的。。。。。。搭嘎，口头挖撸。
因为通过data属性赋值是不会分页去请求后端的，而是直接请求全部数据，然后layui内部进行前端分页处理，这样一来，如果数据量大的话，恐怕页面就要刷好一会儿了o(╥﹏╥)o。（只有通过data方式赋值才会进行前端分页处理，所以url方式可以放心食用）。
layui表格下拉框只显示第一个选项
首先我写了这么一个方法，专门用于给layui的select赋值：
function set_select(id,value){ let obj=$("#"+id) obj.find("option:contains('"+value+"')").attr("selected",true) obj.parent().find(".layui-select-title").find("input").val(value) }
页面上select大致结构如下：
div class="layui-inline" label class="layui-form-label" for="danger_mend_state" style="box-sizing:content-box;"验收状态/label div class="layui-input-inline" select name="modules" lay-search="" id="danger_mend_state" option value="1"已验收/option option value="2"未验收/option option value="2"不需要验收/option /select /div /div
然后在js里调用就行了。
set_select('danger_mend_state',"已验收")
c# layui 动态表格进行动态赋值
js如下：
///reference path="jquery-1.8.0.min.js" /
//加载函数
$(function () {
Nbook.load();
});
var Nbook =
{
load: function () {
Nbook.clci();
},
selectDat: function () {
var val;
$.ajax({
type: "post",
dataType: "json",
data: { "method": "selectData", "Name": "'" + $.trim($("#Name").val())+"'" },
url: "ashx/test.ashx",
success: function (data) {
if (data != null) {
var html = "";
val = eval(data);
//console.log(book.length);
//for (var i = 0; i book.length; i++) {
// html += "ul class='main_Ul'li" + book[i].name + "/lili" + book[i].sch_id + "/lili" + book[i].sex + "/lili" + book[i].isOk + "/li/ul";
//}
//$(".main").html(html);
layui.use('table', function () {
var table = layui.table;
//展示已知数据
table.render({
elem: '#socialList'
, cols: [[ //表头
{ type: 'checkbox', fixed: 'left' },
{ field: 'name', title: '姓名', sort: true, fixed: 'left', unresize: true, sort: true, totalRowText: '合计' }
, { field: 'sch_id', title: '学校ID', sort: true, totalRow: true }
, { field: 'sex', title: '性别', sort: true, totalRow: true }
, { field: 'isOk', title: '是否OK' }
]],
data: val
, even: true
, page: true //是否显示分页
, toolbar: true //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
, limits: [3, 5, 7, 8, 10, 50]
, limit: 8 //每页默认显示的数量
, cellMinWidth: 80
, height: 'full-515'//设置表格最大高度
, totalRow: true//开启合计
});
});
}
}
});
},
clci: function ()
{
if ($.trim($("#Name").val()) == "")
{
Nbook.selectDat();
}
$("input[type='button']").click(function () {
Nbook.selectDat();
});
}
}
页面如下：
%@ Page Language="C#" AutoEventWireup="true" CodeBehind="myselect.aspx.cs" Inherits="WebTest.Demos.myselect" %
!DOCTYPE html
html xmlns=""
head runat="server"
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
link href="layui-v2.4.5/layui/css/layui.css" type="text/css" rel="stylesheet" /
title/title
style type="text/css"
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
height: auto;
border: 1px solid #DEDEDE;
}
.main_Ul {
float: left;
width: 100%;
height: auto;
border: 1px solid #DEDEDE;
list-style: none;
}
.main_Ul li {
float: left;
width: 15%;
height: 25px;
border-right: 1px solid #DEDEDE;
}
/style
/head
body
form id="form1" runat="server"
div class="layui-row"
div class="demoTable"
搜索ID：
div class="layui-inline"
input class="layui-input" name="Name" type="text" id="Name" value="" /
/div
input type="button" class="layui-btn btn" value="搜索" /
/div
/div
table class="layui-hide" id="socialList" lay-filter="socialList"/table
/form
script type="text/javascript" src="jquery-1.8.0.min.js"/script
script type="text/javascript" src="layui-v2.4.5/layui/layui.js"/script
script type="text/javascript" src="myselect.js"/script
/body
/html
一般处理程序如下：
using Models;
using Newtonsoft.Json;
using SqlSugar;
using System.Linq;
using System.Web;
using WebTest.Dao;
namespace WebTest.Demos.ashx
{
/// summary
/// test 的摘要说明
/// /summary
public class test : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string method = context.Request.Form["method"];
string names = context.Request.Form["Name"];
//names=names != string.Empty ? names : "(1==1)";
var JsonString = string.Empty;
if (method == "selectData")
{
using (var db = SugarDao.GetInstance())
{
//.Where(i = i.name == names)
var student = db.QueryableStudent().ToList();
#region 查询数据
JsonString = "[";
//lambda写法
for (int i = 0; i student.Count; i++)
{
JsonString += "{";
JsonString += "\"name\":\"" + student[i].name + "\",\"sch_id\":\"" + student[i].sch_id + "\",\"sex\":\"" + student[i].sex + "\",\"isOk\":\"" + student[i].isOk + "\"";
JsonString = (i == student.Count - 1) ? JsonString += "}" : JsonString += "},";
}
JsonString += "]";
#endregion
object jsonob = JsonConvert.SerializeObject(JsonString);
context.Response.Write(jsonob);
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
layui中table表格的基本操作
最近抽空总结了下layui中table表格的相关配置，解释的比较全面，可供大家参考，页面效果如下：
table表格html部分：
table表格渲染js (包含分页器及返回数据处理等）:
table表格操作列事件：
Layui的数据表格增删改，后端回传json格式封装
最近有个需求，实现前端页面一个数据表格可编辑，随原页面的表单提交json数据，然后后端回传显示。Layui原来也没怎么用过，记个笔记记录一下。
添加行的有个小bug，超过分页行数后，再添加会变成无数据。所以只好初始设置分页为50。
另外，搞了个隐藏的标签随表单一起提交：
从数据表格的缓存中获取表格内输入的值放入标签：
这个之前从table的缓存中提取得到提交的json串含有Layui数据表格的索引，回传Layuitable显示的时候不需要，需要去掉。所以后端用了个正则表达式去除。
为了满足layui数据表格的返回格式，封装了一下数据格式。