第一步：添加引用
<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);
}
第一步：添加引用
<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);
}