layui table 表头合并_layui table表格详解
原文转载地址：http://www.mamicode.com/info-detail-2539217.html
标签：tail url 技术 esc 去掉 属性 == 对象 orm
上次做table有些东西 忘记了 这次当作来个分析总结一下 跟大家共同学习
闲话不多说 直接上例子 技术分享图片
代码：
//*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初始化代码**
第一个表格完成了 但是可以看到时间格式多了一个很奇怪的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代码：
//*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初始化代码**
查看
编辑
删除
重点在于首先声明一个列，用来作为工具列的列名： , { align: ‘center‘,title: ‘操作‘, toolbar: ‘#barDemo‘ } 列名为操作
然后 再script html代码中 为我们的toobar列给定造型和样式：
查看
编辑
删除
效果如下：
技术分享图片
接下来我们看看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” 然后 你在相应的位置(我弹出消息的位置写上你相应的操作代码就完成了)
接下来看效果
点击查看：
技术分享图片
点击编辑：
技术分享图片
点击删除：
技术分享图片
每一行所有你想获取的数据都可以获得 只要后台返回了 即使你没有在列中显示他 你也可以得到 现在我们去掉得分这一列
点击编辑 依然可以得到积分
技术分享图片
假如要对积分进行 区分 比如什么 普通会员 黄金会员 砖石会员 白金会员 等 看操作
技术分享图片
代码：
{ {# if(d.DeScore < 10){ }}
积分：{ {d.DeScore}}— 普通会员
{ {# } else { }}
积分：{ {d.DeScore}}—黄金会员
{ {# } }}
基本都写完了 其它就是是一个我们对表格的搜索功能了 和表格的重载放一起讲了 这是同一个功能
function searcha() {
var data = {
score: $(“#score”).val()
}
layui.table.reload(“demo”, { where: data });
}
表格重载的写法 则例的where是除了limit 和page以为的参数(limit 和page layui默认会传入 10 和1)
前台：
积分
可以看到score已经传入后台了 后台sql做相应查询就ok了