js如下：
///<reference path="jquery-180minjs" />
//加载函数
$(function () {
Nbookload();
});
var Nbook =
{
load: function () {
Nbookclci();
},
selectDat: function () {
var val;
$ajax({
type: "post",
dataType: "json",
data: { "method": "selectData", "Name": "'" + $trim($("#Name")val())+"'" },
url: "ashx/testashx",
success: function (data) {
if (data != null) {
var html = "";
val = eval(data);
//consolelog(booklength);
//for (var i = 0; i < booklength; i++) {
// html += "<ul class='main_Ul'><li>" + book[i]name + "</li><li>" + book[i]sch_id + "</li><li>" + book[i]sex + "</li><li>" + book[i]isOk + "</li></ul>";
//}
//$("main")html(html);
layuiuse('table', function () {
var table = layuitable;
//展示已知数据
tablerender({
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()) == "")
{
NbookselectDat();
}
$("input[type='button']")click(function () {
NbookselectDat();
});
}
}
页面如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="myselectaspxcs" Inherits="WebTestDemosmyselect" %>
<!DOCTYPE html>
<html xmlns=">
首先，最简单的先渲染一个表格，参考官方示例：
这里先讲讲一些渲染细节：
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请求数据，最后再tableInsreload({ data: resdata })一波，达成666 *** 作。
这种做法从结果上看，似乎是可以的。。。。。。搭嘎，口头挖撸。
因为通过data属性赋值是不会分页去请求后端的，而是直接请求全部数据，然后layui内部进行前端分页处理，这样一来，如果数据量大的话，恐怕页面就要刷好一会儿了o(╥﹏╥)o。（只有通过data方式赋值才会进行前端分页处理，所以url方式可以放心食用）。
html 么 在返回数据时候进行拼接，和 html 标签拼接在一起后返回想显示的位置，这里举例一个下拉的。试着改一改弄一下，数据先拿到，在找定位。
<div class="layui-inline">
<label class="layui-form-label">商家类型<span class="require"></span></label>
<div class="layui-input-inline">
<select name="seller_type" id="mc_add_seller_type" lay-verify="mc_add_mustselect" data-name="商家类型" lay-filter="" lay-search="">
</select>
</div>
</div>
<script>
$("select[name=seller_type]")empty();
$ajax({
async: false,
type: "post",
url: APIHOST+"/seller/menuList",
dataType: "json",
data: {},
success: function (res) {
var opt = "<option value='' selected = \'selected\'>请选择</option>";
$("select[name=seller_type]")append(opt);
for(var i=0; i<resdatalength; i++){
if(infoseller_type == resdata[i]menu_name){
var option="<option value=\""+resdata[i]menu_type+"\" selected = 'selected'";
option += ">"+resdata[i]menu_name+"</option>"; //动态添加数据
$("select[name=seller_type]")append(option);
}else {
var option="<option value=\""+resdata[i]menu_type+"\"";
option += ">"+resdata[i]menu_name+"</option>"; //动态添加数据
$("select[name=seller_type]")append(option);
}
}
formrender('select');
}
});
</script>
以上就是关于c# layui 动态表格进行动态赋值全部的内容，包括:c# layui 动态表格进行动态赋值、关于layui获取的table返回数据类型错误、layui的数据表格（table）分页篇等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）