layui table表格详解

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

闲话不多说直接上例子

代码：

</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代码：

</script>

然后再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" 然后你在相应的位置（我弹出消息的位置写上你相应的操作代码就完成了）

接下来看效果

点击查看：

点击编辑：

点击删除：

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

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

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

代码：

<%-- ********************************列数据显示做显示改变***********************************--%>
<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）

前台：

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

来源：https://www.cnblogs.com/yagamilight/p/10052044.html

标签

table

lay