1、导入需要的文件,在layui的官网下载,路径改成自己的
<link rel="stylesheet" href="~/Content/css/layui.css" media="all">
<script src="~/Content/js/layui.js"></script>
2、html中只需要放入一下的table就行
<table id="demo" lay-filter="test"></table>
3、js编写
layui.use('table', function () {
初始化表格实例
var table = layui.table;
数据请求
table.render({
elem: '#demo'
后台请求地址
, url: '/User/GetFilter' //数据接口
, page: true //开启分页
, defaultToolbar: ['filter', 'print', 'exports']
为table指定id
, id: 'testReload'
配置你的数据表表头信息
, cols: [[ //表头
{ field: 'Id', title: 'ID', sort: true, fixed: 'left' }
, { field: 'Name', title: '用户名' }
, { field: 'SexInfo', title: '性别', sort: true }
, { field: 'DepartmentId', title: '部分编号' }
, { field: 'UserId', title: '用户编号' }
, { field: 'CreateTime', title: '创建时间', sort: true }
此处是编辑或删除栏的配置,此处数据不需要从后台传入
, { field: 'right', title: '操作', align: 'center', toolbar: '#barDemo' }
]]
});
//监听工具条,此方法用来监听操作栏里的编辑或删除按钮
table.on('tool(test)', function (obj) {
//data中存放的是你点击的那行的数据
var data = obj.data;
console.log(data);
//点击删除按钮
if (obj.event === 'del')
{
var id = data["Id"];
$('input[name=id_hidden]').val(id);
$.ajax({
url: '/User/DeleteUser',
type: 'POST',
dataType: "json",
data: { "id": id },
success: function (data) {
if (data == "成功") {
window.location.reload();
}
else {
alert("删除失败");
}
},
});
}
//点击编辑按钮
else if (obj.event === 'edit') {
$('.add_title').html("修改");
var id = data["Id"];
var name = data["Name"];
var sexinfo = data["SexInfo"];
var departmentid = data["DepartmentId"];
var userid = data["UserId"];
$('input[name=id_hidden]').val(id);
$('.Name').val(name);
$('.layui-input.layui-unselect').val(sexinfo);
$('select[name="select_SexInfo"]').val(sexinfo);
$('.Departmentid').val(departmentid);
$('.UserId').val(userid);
$('.div_add_info').css("display", "block");
}
});
//此方法是用来匹配点击事件
var $ = layui.$, active = {
//判断点击事件为reload
reload: function () {
var username = $(".username").val();
var departmentid = $(".departmentid").val();
table数据重载,传入的参数为id,此id是在上面的render中配置的id
table.reload('testReload', {
//传入额外参数
where: {
username: username,
departmentid: departmentid,
isfilter: 1
}
, page: {
curr: 1 //重新从第 1 页开始
}
});
}
};
//绑定元素的点击事件,用来识别所要执行方法的类别
$('.layui-btn.select_btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
//此出配置的是编辑跟删除按钮,因为不需要从后台传入,所要需要放在配置中
<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>
4、后台编写
//用的是get请求方式
public ActionResult GetFilter(int page, int limit, string username="", string departmentid="", int isfilter=0)
{
List<UserEntity> filterlist = new List<UserEntity>();
//没有筛选请求,数据全部返回
int startlimit = (page - 1) * limit;
int endlimit = page * limit;
if (isfilter == 0)
{
filterlist = UserQuery(string.Format("SELECT * FROM UserEntity limit {0},{1}",startlimit,endlimit));
}
//有筛选请求
else
{
//将传递过来的departmentid转换为int类型
int departmentid_int;
int.TryParse(departmentid, out departmentid_int);
if (departmentid == "")
{
filterlist = UserQuery(string.Format("SELECT * FROM UserEntity WHERE name like '{0}' limit {1},{2}", "%" + username + "%",startlimit,endlimit));
}
else
{
filterlist = UserQuery(string.Format("SELECT * FROM UserEntity WHERE name like '{0}' and departmentid = {1} limit {2},{3}", "%" + username + "%", departmentid_int,startlimit,endlimit));
}
}
//此处返回的是json数据,layui识别code,默认为0一定要传,然后是msg,count,data,data里放的就是你表格中所要使用的数据,具体的后台数据返回格式可以看官网的api
return Json(new { code = 0, msg = "", count = 1000, data = filterlist }, JsonRequestBehavior.AllowGet);
}