layui table表格详解

原文转载地址：http://www.mamicode.com/info-detail-2539217.html
标签：tail url 技术 esc 去掉 属性 == 对象 orm

上次做table有些东西 忘记了 这次当作来个分析总结一下 跟大家共同学习

闲话不多说 直接上例子 技术分享图片

代码：

<form id="form1" runat="server">
<div>
<table id="demo" lay-filter="test"></table>
</div>
</form>

<script>
//*layuitable初始化代码**
layui.use(‘table‘, function () {
var table = layui.table;
table.render({
elem: ‘#demo‘
, height: 500
, url: ‘/GetDataForLayuiTableLearning.ashx‘ //数据接口
, page: true //开启分页
, cols: [[ //表头
{ field: ‘ID‘, title: ‘ID‘, sort: true, unresize: true }
, { field: ‘starttime‘, title: ‘开始时间‘, unresize: true}



, { field: ‘addtime‘, title: ‘添加时间‘, unresize: true }
, { field: ‘DeScore‘, title: ‘得分‘, unresize: true }
]]
});
});
//*layuitable初始化代码**

</script>

第一个表格完成了 但是可以看到时间格式多了一个很奇怪的T 原因是微软默认json化的datetime格式 所以后台做小小改动就ok

后台代码处理时间格式带有T的问题

IsoDateTimeConverter iso = new IsoDateTimeConverter();
iso.DateTimeFormat = “yyyy-MM-dd HH:mm:ss”;
var ajson = JsonConvert.SerializeObject(dt, iso);
JArray jar = JArray.Parse(ajson);

ok 看效果

技术分享图片接下来介绍几个比较常用的table参数。

第一个：toolbar参数 开启表格头部工具栏区域 （绑定列工具条） 官网解释：通常你需要在表格的每一行加上 查看、编辑、删除 这样类似的操作按钮，而 tool 参数就是为此而生，你因此可以非常便捷地实现各种操作功能。

html代码：

<form id="form1" runat="server">
<div>
<table id="demo" lay-filter="test"></table>
</div>
</form>

<script>
//*layuitable初始化代码**
layui.use(‘table‘, function () {
var table = layui.table;
table.render({
elem: ‘#demo‘
, height: 500
, url: ‘/GetDataForLayuiTableLearning.ashx‘ //数据接口
, page: true //开启分页
, cols: [[ //表头
{ field: ‘ID‘, title: ‘ID‘, sort: true, unresize: true }
, { field: ‘starttime‘, title: ‘开始时间‘, unresize: true }
, { field: ‘addtime‘, title: ‘添加时间‘, unresize: true }
, { field: ‘DeScore‘, title: ‘得分‘, unresize: true }
, { align: ‘center‘,title: ‘操作‘, toolbar: ‘#barDemo‘ }
]]
});
});
//*layuitable初始化代码**

</script>

<script type="text/html" id="barDemo">
<%— *工具栏绑定代码**—%>
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
<%— *工具栏绑定代码**—%>
</script>重点在于首先声明一个列，用来作为工具列的列名： , { align: ‘center‘,title: ‘操作‘, toolbar: ‘#barDemo‘ } 列名为操作

然后 再script html代码中 为我们的toobar列给定造型和样式：

<script type="text/html" id="barDemo">
<%— *工具栏绑定代码**—%>
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
<%— *工具栏绑定代码**—%>
</script>

效果如下：

技术分享图片

接下来我们看看toorbar如何 实现操作的。

直接上代码：

table.on(‘tool(test)‘, function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter=”对应的值”
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的DOM对象

if (layEvent === ‘detail‘) { //查看
layer.msg(“您点击了查看按钮！”,{time: 5000})
} else if (layEvent === ‘del‘) { //删除
layer.confirm(‘真的删除行么‘, function (index) {
layer.msg(“您选择了删除！”,{time: 5000});
});
} else if (layEvent === ‘edit‘) { //编辑
layer.msg(“您选择了编辑按钮！”,{time: 5000})
}
});

tableon加上工具条 注意 注意 注意 这里table.on(‘tool(test)‘绑定的这个test是指table的lay-filter=”test” 然后 你在相应的位置（我弹出消息的位置写上你相应的操作代码就完成了）

接下来看效果

点击查看：

技术分享图片

点击编辑：

技术分享图片

点击删除：

技术分享图片

每一行所有你想获取的数据都可以获得 只要后台返回了 即使你没有在列中显示他 你也可以得到 现在我们去掉得分这一列

点击编辑 依然可以得到积分

技术分享图片

假如要对积分进行 区分 比如什么 普通会员 黄金会员 砖石会员 白金会员 等 看操作

技术分享图片

代码：

<%— **列数据显示做显示改变*—%>

<script type="text/html" id="DeScore">
{{# if(d.DeScore < 10){ }}
积分：{{d.DeScore}}— 普通会员
{{# } else { }}
积分：{{d.DeScore}}—黄金会员
{{# } }}
</script>
<%— **列数据显示做显示改变*—%>

基本都写完了 其它就是是一个我们对表格的搜索功能了 和表格的重载放一起讲了 这是同一个功能

function searcha() {
var data = {
score: $(“#score”).val()
}
layui.table.reload(“demo”, { where: data });
}

表格重载的写法 则例的where是除了limit 和page以为的参数（limit 和page layui默认会传入 10 和1）

前台：

<div class="layui-form-item">
<label class="layui-form-label">积分</label>
<div class="layui-input-block">
<input type="text" name="title" autocomplete="off" class="layui-input" id="score">
</div>
</div>

可以看到score已经传入后台了 后台sql做相应查询就ok了