数据重载
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据表格-数据重载</title>
<!--layui模块化使用-->
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script src="layui/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/layui.js" text="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="searchDemo">
搜索内容：
<div class="layui-inline">
<input class="layui-input" name="id" id="reload" autocomplete="off">
</div>
<button class="layui-btn" id="searchBtn">搜索</button>
</div>
<!--方法渲染-->
<table id="tab_three" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
获取选中行数据
</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
获取选中数目
</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">
验证是否全选
</button>
</div>
</script>
<script text="text/javascript">
//加载table模块
layui.use("table",function(){
var table = layui.table;
//方法渲染
table.render({
elem: "#tab_three",
url: "js/user.json", //数据接口,通过服务器请求
height:315,
cols: [[
//设置序列号
{field:"aa",type:"numbers"},
//设置复选框
{field:"bb",type:"checkbox"},
{field:"id",title:'用户编号',sort:true,width:120,hide:true},
//可以单元格编辑,目前只支持文本框
{field:"username",title:'用户名',width:100,edit:'text'},
{field:"sex",title:'性别',width:100,sort:true},
{field:"city",title:'城市',width:100,sort:true},
{field:"age",title:'年龄',edit:'text'},
//设置表头工具栏
{field:"操作",toolbar:"#barDemo"}
]],
//开启分页
page:true,
//设置表格工具栏
toolbar:"#toolbarDemo"
});
/*
头监听事件
table.on('toolbar(test)',function(obj){
});
注意：test表示的是容器上设置的lay-filter属性值
*/
table.on('toolbar(test)',function(obj){
//console.log(obj);
//obj.config对象中可以获取id属性值，即表示当前容器的ID属性值，也就是
//tab_three,获取当前表格被选中记录对象返回的数据
var checkStatus = table.checkStatus(obj.config.id);
console.log(checkStatus);
//获取事件名称
var eventName = obj.event;
//判断事件名称，处理对应的代码
switch (eventName){
case "getCheckData":
//获取选中记录的数组
var arr = checkStatus.data;
//将数组解析为字符串
layer.alert(JSON.stringify(arr));
break;
case "getCheckLength":
//获取选中记录的数组
var arr = checkStatus.data;
layer.msg("选中了"+ arr.length+"条数据");
break;
case "isAll":
//通过isAll判断是否全选
var flag = checkStatus.isAll;
var str = flag?'全选':'未全选';
layer.msg(str);
break;
default:
break;
}
});
/*
监听行工具栏事件
*/
table.on('tool(test)',function(obj){
//得到当前操作行的相关信息
var tr = obj.data;
console.log(tr);
//得到事件名
var eventName = obj.event;
//判断事件名，执行对应的方法
if(eventName == 'del'){
//删除
layer.confirm("您确定要删除吗？",function(index){
//删除指定当前的tr
obj.del();
//关闭弹窗
layer.close(index);
});
}
else if(eventName == 'edit'){
//修改
layer.prompt({
//表单元素的类型0-文本框,1-密码框,2-文本域
formType:0,
value:tr.username
},function(value,index){
//修改指定单元格的值
//value表示输入的值
obj.update({
username : value
});
layer.close(index);
});
}
});
//监听单元格编辑事件
//表头设置edit属性，单元格编辑类型(默认不开启)，目前只支持text(输入框)
table.on('edit(test)',function(obj){
console.log(obj);
//获取修改后的值
var updateValue = obj.value;
//得到当前修改
var updateData = obj.data;
//得到修改的字段名
var updateField = obj.field;
layer.msg("【ID："+updateData.id+"】的"+updateField.field
+"字段的值修改为："+updateValue);
});
});
//给指定元素绑定事件
$(document).on('click','#searchBtn',function(data){
//获取搜索文本框的对象
var searchObj = $('#reload');
//调用表格的重载方法
table.reload('tab_three',{
where:{
id: searchObj.val(),
name: "lisi"
},
page:{
//表示让条件查询从第一页开始，如果没有设置，从当前页开始
//此页前面的所有数据不纳入条件筛选
curr:1 //从第一页查询
}
});
});
</script>
<!--表头工具栏-->
<script type="text/html" id="barDemo" >
<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>
</body>
</html>
