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=">
<font color="red">模块加载名称： laypage </font>
laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。
通过核心方法： laypagerender(options) 来设置基础参数。
当分页被切换时触发，函数返回两个参数： obj （当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
<font color="red">模块加载名称： table </font>
创建一个table实例最简单的方式是，在页面放置一个元素 <table id="demo"></table> ，然后通过 tablerender() 方法指定该容器。
数据接口 userjson
在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。
1) 带有 class="layui-table" 的 <table> 标签。
2) 对标签设置属性 lay-data="" 用于配置一些基础参数
3) 在 <th> 标签中设置属性 lay-data="" 用于配置表头信息
页面已经存在了一段有内容的表格，由原始的table标签组成，只需要赋予它一些动态元素。
执行用于转换表格的JS方法
js实现：
layuiuse(['table','form'],
function()
{
$
=
layuijquery;
table
=
layuitable;
tableIns
=
initTable();
});
//加载列表
function
initTable(){
//
执行渲染
tableIns
=
tablerender({
id:
'idTest',
elem
:
'#deviceTable',
//
指定原始表格元素选择器（推荐id选择器）
size:
'lg',
height
:
'full-20',
//
容器高度
url
:
'/csCloud-admin/deviceController/getDeviceListdo',
where:
{
'orgId':$("#orgId")val(),
'coldNum':$("#coldNum")val(),
'devType':$("#devType")val(),
'isUsed':$("#isUsedId")val()
},
method
:
'post',
cols
:
[
[
//
标题栏
{
field
:
'rownum',
title
:
'序号',
width
:
100,
sort
:
true
},
{
field
:
'devNum',
title
:
'设备编号',
width
:
200
},
{
field
:
'devAlias',
title
:
'设备别名',
width
:
100
},
{
field
:
'devTypeVal',
title
:
'设备类型',
width
:
100
},
{
field
:
'devModel',
title
:
'设备型号',
width
:
100
},
{
field
:
'stateVal',
title
:
'设备状态',
width
:
100
},
{
field
:
'coldNum',
title
:
'冷库编号',
width
:
100
},
{
field
:
'orgName',
title
:
'所属机构',
width
:
300
},
{
field
:
'isUsedValue',
title
:
'状态',
width
:
100
},
{
fixed
:
'right',
width
:
300,
align:'center',
toolbar
:
'#barDemo'
}
]
],
//
设置表头
page
:
true,
limits
:
[
10,30,
60,
90,
150,
300
],
limit
:
10
});
return
tableIns;
}
jsp实现：
<div
class="layui-fluid">
<div
class="layui-row">
<div
class="layui-col-lg12">
<table
id="deviceTable"></table>
</div>
</div>
</div>
以上这篇layui实现table加载的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:layui的table单击行勾选checkbox功能方法layui实现点击按钮给table添加一行layui结合form,table的全选、反选v10示例讲解
以上就是关于c# layui 动态表格进行动态赋值全部的内容，包括:c# layui 动态表格进行动态赋值、关于layui获取的table返回数据类型错误、layUI分页处理--乐字节前端等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）