第一步:添加引用
<link href="~/Content/layuiCMS/layui/css/layui.css" rel="stylesheet" /> <script src="~/Content/layuiCMS/layui/layui.js"></script>
二、界面设计
<div class="layui-form news_list"> <div class="layui-form users_list"> <table class="layui-table"> <colgroup> <col width="50"> <col> <col width="18%"> <col width="8%"> <col width="12%"> <col width="12%"> <col width="18%"> <col width="15%"> </colgroup> <thead> <tr> <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose" id="allChoose"></th> <th>登录名</th> <th>姓名</th> <th>性别</th> <th>邮箱</th> <th>地址</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody class="users_content"></tbody> </table> </div> <div id="page"></div> </div>
三、添加一个js文件,并将文件引入界面:
layui.config({ base : "js/" }).use(['form','layer','jquery','laypage'],function(){ var form = layui.form(), layer = parent.layer === undefined ? layui.layer : parent.layer, laypage = layui.laypage, $ = layui.jquery; //加载页面数据 var usersData = ''; $.get("/UserManage/GetInfo",{ pageSize:10, //显示页面的数量 pageindex:1 //当前页 }, function (data) { usersData = data.rows; //执行加载数据的方法 usersList(data.rows); }) //表格数据和分页 function usersList(that) { //渲染数据 function renderDate(curr) { var dataHtml = ''; if (!that) { currData = usersData.concat().splice(curr * nums - nums, nums); } else { currData = that.concat().splice(curr * nums - nums, nums); } if (currData.length != 0) { for (var i = 0; i < currData.length; i++) { dataHtml += '<tr>' + '<td><input type="checkbox" name="checked" value="' + currData[i].Id + '" lay-skin="primary" lay-filter="choose"></td>' + '<td>' + currData[i].LoginName + '</td>' + '<td>' + currData[i].Name + '</td>' + '<td>' + currData[i].Sex + '</td>' + '<td>' + currData[i].Email + '</td>' + '<td>' + currData[i].Address + '</td>' + '<td>' + currData[i].Birth + '</td>' + '<td>' + '<a class="layui-btn layui-btn-mini users_edit layui-btn-mini"><i class="iconfont icon-edit"></i> 编辑</a>' + '<a class="layui-btn layui-btn-danger layui-btn-mini users_del" data-id="' + currData[i].Id + '"><i class="layui-icon"></i> 删除</a>' + '</td>' + '</tr>'; } } else { dataHtml = '<tr><td colspan="8">暂无数据</td></tr>'; } return dataHtml; } //分页 var nums = 10; //每页出现的数据量 laypage({ cont: "page", pages: Math.ceil(usersData.length / nums), //得到总页数 skip: true, //是否开启跳页 groups: 5, //连续显示分页数 jump: function (obj) { $(".users_content").html(renderDate(obj.curr)); //渲染数据 $('.users_list thead input[type="checkbox"]').prop("checked", false); form.render(); //渲染表单 } }) }
//全选 form.on('checkbox(allChoose)', function (data) { var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])'); child.each(function (index, item) { item.checked = data.elem.checked; }); form.render('checkbox'); }); //通过判断文章是否全部选中来确定全选按钮是否选中 form.on("checkbox(choose)", function (data) { var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])'); var childChecked = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"]):checked') if (childChecked.length == child.length) { $(data.elem).parents('table').find('thead input#allChoose').get(0).checked = true; } else { $(data.elem).parents('table').find('thead input#allChoose').get(0).checked = false; } form.render('checkbox'); })
})
后台控制器:
public ActionResult GetInfo(int pageSize, int pageIndex) { //使用EF框架的增删改查和分页的公共类 BaseRepository<Articles> db = new BaseRepository<Articles>(); int total; Func<Articles, bool> where = s => s.ID > 0 && s.Type == 2; Func<Articles, int> order = s => s.ID; var list = db.LoadPagerEntities(pageSize, pageIndex, out total, where, false, order).ToList(); var dic = new Dictionary<string, object> { {"rows",list }, {"total", total} }; return Json(dic, JsonRequestBehavior.AllowGet); }