Layui数据表格的使用
Layui数据表格的使用
记录layui数据表格的使用及遇到的问题
1.部分前端html代码如下
<div class="x-body">
<!-- 定义搜索框 -->
<div class="layui-row">
<div class="layui-col-md12 x-so">
<input class="layui-input" placeholder="日期范围" name="dateTodate" id="dateTodate">
<input type="text" name="title" id="title" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
<button class="layui-btn" lay-filter="reload" id="reload"><i class="layui-icon"></i></button>
</div>
</div>
<!-- 工具条 -->
<script type="text/html" id="bartool">
<a title="编辑" lay-event="edit" href="javascript:;">
<i class="layui-icon"></i>
</a>
<a title="删除" lay-event="del" href="javascript:;">
<i class="layui-icon"></i>
</a>
</script>
<!-- 定义模板,开关 switch, 当返回的数据为true时,选中 -->
<script type="text/html" id="isComment">
<input type="checkbox" name="comment" value="{{d.comment}}" lay-skin="switch"
lay-text="YES|NO" lay-filter="comment" {{ d.comment == true ? 'checked' : '' }} />
</script>
<!-- 表格主体,id和lay-filter可以不同 -->
<table class="layui-hide" id="I_am_a_table" lay-filter="I_am_a_table"></table>
</div>
2.js代码如下
<script>
/*加载日期控件,日期搜索*/
layui.use('laydate', function(){
var laydate = layui.laydate;
laydate.render({
elem: '#dateTodate'
,type: 'datetime' //可选值
,range: 'to'
});
});
/*用户-删除*/
function member_del(obj,id){
layer.confirm('确认要删除吗?',function(index){
//发异步删除数据
$(obj).parents("tr").remove();
layer.msg('已删除!',{icon:1,time:1000});
});
}
</script>
<script>
layui.use(['form','table'], function(){
var table = layui.table
,form = layui.form;
table.render({
elem: '#I_am_a_table'
,id: 'I_am_a_table'
,url:'${pageContext.request.contextPath}/artical/getArticals'
,method: 'post'
,cellMinWidth: 80
,cols: [[
{field:'articalId', title:'ID'}
,{field:'title', title:'标题',width:200}
,{field:'menuId', title:'所属类别',width:120}
,{field:'createTime', title:'发布时间',width:180}
,{field:'comment', title:'允许评论', width:110, templet: '#isComment', unresize: true}
,{field:'status', title:'是否显示', width:110, templet: '#status', unresize: true}
,{field:'recommended', title:'是否推荐', width:110, templet: '#recommended', unresize: true}
,{field:'right', title: '操作', toolbar:"#bartool",align:"center"}
]]
//加载的条件,没有条件搜索可以不加上这个
,where: {
'dateTodate': '',
'title': null
}
//开启分页
,page: true
//自定义请求参数
,request: {
limitName: 'size' //每页数据量的参数名,默认:limit
}
//自定义响应参数
,response: {
countName: 'total' //规定数据总数的字段名称,默认:count
,dataName: 'rows' //规定数据列表的字段名称,默认:data
}
});
//监听switch开关
form.on('switch(comment)', function(obj){
layer.tips(this.value + ' ' + this.name + ':'+ obj.elem.checked, obj.othis);
});
// 执行搜索,表格重载
$('#reload').on('click', function () {
// 搜索条件
var dateTodate = $('#dateTodate').val();
var title = $('#title').val();
table.reload('I_am_a_table', {
method: 'post'
, where: {
'dateTodate': dateTodate,
'title': title
}
//设置页码
, page: {
curr: 1
}
});
});
//监听工具条
table.on('tool(I_am_a_table)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('要删除吗'+data.id, function(index){
console.log(data);
$.ajax({
url: "productDe",
type: "POST",
data:{"productId":data.productId},
dataType: "json",
success: function(data){
if(1==1){
status=="已下架"
layer.alert('商品下架成功', {
title: "消息提醒",
btn: ['确定']
},function (index, item) {
location.href="shangpin";
});
}else{
layer.msg("删除失败", {icon: 5});
}
}
});
});
}
else if(obj.event === 'edit'){
x_admin_show('编辑','${pageContext.request.contextPath}/artical/getArticalInfo?id='+data.articalId,600,400);
}
});
});
</script>
3.时间的格式化
- 加入util,代码如下
layui.use(['table','util'], function(){
var table = layui.table
,util = layui.util;
- 表格中的格式如下
{field:'createTime', title:'发布时间',width:180,templet:function(d){return util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");}}
4.如果表格返回的数据有例如男女的判断显示时,可以采用以下的方法
{field:'sex', title:'性别',width:110,templet:function(d){
return d.sex == true ? "男":"<span class='layui-red'>女</span>";
}}