使用LayUI操作数据表格

搜索

 

在table标签的上方，加入这样一组html

 

<div class="demoTable">
搜索商户：
<div class="layui-inline">
<input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>

 

在js加入初始化代码和定义加载方法

layui.use('table', function(){
var table = layui.table;

//方法级渲染
table.render({
elem: '#LAY_table_user'
,url: 'UVServlet'
,cols: [[
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
,{field:'aid', title: '商户', width:80, sort: true}
,{field:'uv', title: '访问量', width:80, sort: true,edit:true}
,{field:'date', title: '日期', width:180}
,{field:'datatype', title: '日期类型', width:100}

]]
,id: 'testReload'
,page: true
,height: 600
});

var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');

table.reload('testReload', {
where: {
keyword: demoReload.val()
}
});
}
};
)};

 

绑定click点击事件

$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});

此时点击查询按钮，会将keyword这个关键字传到后端，接下来就是自己处理查询关键字业务了。

到目前为止，搜索也有了，分页也有了,对了，分页会自动传到后端page,limit2个值到后台，相当于（pageindex,pagesize）

预览下效果



看看请求的参数



 

 从参数可以看出，数据表格默认是get请求

给表格增加操作按钮

首先加入一组html,放到table标签下面，代码如下

<table class="layui-hide" id="LAY_table_user" lay-filter="useruv"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>

然后在js中指定工具条

//方法级渲染
table.render({
elem: '#LAY_table_user'
,url: 'UVServlet'
,cols: [[
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
,{field:'aid', title: '商户', width:80, sort: true}
,{field:'uv', title: '访问量', width:80, sort: true,edit:true}
,{field:'date', title: '日期', width:180}
,{field:'datatype', title: '日期类型', width:100}
,{field:'right', title: '操作', width:177,toolbar:"#barDemo"}
]]
,id: 'testReload'
,page: true
,height: 600
});

界面效果如下



 

 接下来需要给按钮绑定事件，来完成功能操作

在LayUI里面，一般采用table.on()来表示事件，例如这个

 

//监听表格复选框选择
table.on('checkbox(useruv)', function(obj){
console.log(obj)
});

 



我勾选一个复选框，就打印一个日志

 


加入以下js代码，来绑定工具条事件

//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.alert('编辑行：<br>'+ JSON.stringify(data))
}
});

这时候，点击按钮就会有反应了。这里说明一下

 


接下来就是把数据传递到后端，直接将js改造如下

 

//监听工具条
table.on('tool(useruv)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
console.log(data);
$.ajax({
url: "UVServlet",
type: "POST",
data:{"uvid":data.id,"memthodname":"deleteuv","aid":data.aid},
dataType: "json",
success: function(data){

if(data.state==1){
//删除这一行
obj.del();
//关闭弹框
layer.close(index);
layer.msg("删除成功", {icon: 6});
}else{
layer.msg("删除失败", {icon: 5});
}
}

});
});
} else if(obj.event === 'edit'){

layer.prompt({
formType: 2
,title: '修改 ID 为 ['+ data.id +'] 的访问量'
,value: data.uv
}, function(value, index){
//这里一般是发送修改的Ajax请求
EidtUv(data,value,index,obj);

});

}
});

编辑的方法
function  EidtUv(data,value,index,obj) {
$.ajax({
url: "UVServlet",
type: "POST",
data:{"uvid":data.id,"memthodname":"edituv","aid":data.aid,"uv":value},
dataType: "json",
success: function(data){

if(data.state==1){
//关闭弹框
layer.close(index);
//同步更新表格和缓存对应的值
obj.update({
uv: value
});
layer.msg("修改成功", {icon: 6});
}else{
layer.msg("修改失败", {icon: 5});
}
}

});
}

 

 

预览效果





 

至此，数据表格的绑定、展示、分页、搜索、查看、编辑、删除、排序 功能都已经完成，是不是很简单？

此处粘贴出完整的页面代码

 


 View
Code

 

 应大家要求，将servlet代码贴出来,其中用到了json.jar


 View
Code