基于layuiCMS2.0开发后台管理系统，实现自定义分页并动态加载数据表格的示例...

2019独角兽企业重金招聘Python工程师标准>>>

公司让做一个app基础数据管理后台系统，前端就以layuiCMS2.0为模板，拷贝到项目resources/static目录下开始了，以下是自己写的一个带自定义分页的动态数据表格的实现，下来直接上代码：

项目src目录结构：

后台api数据格式：

/demo/check请求结果：

其他请求结果：

渲染表格页面demoList.html：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>demo列表--layui后台管理模板 2.0</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no"><link rel="stylesheet" href="../../layui-v2.4.3/css/layui.css" media="all"/><link rel="stylesheet" href="../../css/public.css" media="all"/>
</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote quoteBox"><form class="layui-form"><div class="layui-inline"><div class="layui-input-inline"><input type="text" class="layui-input searchVal" id="account" placeholder="请输入account"/></div><a class="layui-btn search_btn" data-type="reload">搜索</a></div><div class="layui-inline"><a class="layui-btn layui-btn-normal add_btn">添加demo</a></div><!--<div class="layui-inline">--><!--<a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量删除</a>--><!--</div>--></form>
</blockquote>
<table id="demoList" lay-filter="demoList"></table>
<div id="pageTool"></div><script type="text/javascript" src="../../layui-v2.4.3/layui.js"></script>
<script type="text/javascript" src="demoList.js"></script>
<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
</body>
</html>

demo添加页面：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>添加demo--layui后台管理模板 2.0</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no"><link rel="stylesheet" href="../../layui-v2.4.3/css/layui.css" media="all"/><link rel="stylesheet" href="../../css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form demoAdd"><div class="layui-form-item"><label class="layui-form-label">account</label><div class="layui-input-block"><input type="text" class="layui-input account" id="account" lay-verify="required" placeholder="请输入account"/></div></div><div class="layui-form-item"><label class="layui-form-label">sex</label><div class="layui-input-block"><select name="quiz" id="sex"><option value="1">男</option><option value="2">女</option></select></div></div><div class="layui-form-item"><button class="layui-btn layui-block" lay-filter="addDemo" lay-submit id="submit">提交</button></div>
</form>
<script type="text/javascript" src="../../layui-v2.4.3/layui.js"></script>
<script type="text/javascript" src="demoList.js"></script>
</body>
</html>

demo编辑界面：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>demo编辑--layui后台管理模板 2.0</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no"><link rel="stylesheet" href="../../layui-v2.4.3/css/layui.css" media="all"/><link rel="stylesheet" href="../../css/public.css" media="all"/>
</head>
<body class="childrenBody">
<form class="layui-form demoUpdate"><div class="layui-form-item"><label class="layui-form-label">职员账号</label><div class="layui-input-block"><input type="text" class="layui-input account" id="account" lay-verify="required" placeholder="请输入account"/></div></div><div class="layui-form-item"><label class="layui-form-label">sex</label><div class="layui-input-block"><select name="quiz" id="sex"><option value="1">男</option><option value="2">女</option></select></div></div><div class="layui-form-item"><button class="layui-btn layui-block" lay-filter="updateDemo" lay-submit id="submit">提交</button></div>
</form>
<script type="text/javascript" src="../../layui-v2.4.3/layui.js"></script>
<script type="text/javascript" src="demoList.js"></script>
</body>
</html>

js文件：

/*引入'form', 'layer',  'table',  'util', 'laypage'模块*/
layui.use(['form', 'layer', 'table', 'util', 'laypage'], function () {var form = layui.form,layer = parent.layer === undefined ? layui.layer : top.layer,$ = layui.jquery,//内置jqueryutil = layui.util,laypage = layui.laypage,//分页模块table = layui.table;var key = window.sessionStorage.getItem("key"); //获得sessionStorage中的参数//动态渲染数据表格var tableIns = table.render({elem: '#demoList', //div_idurl: '../../demo/check', //动态获取数据的地址method: 'post',where: {page: 0, size: 10, key: key/*,……*/},//初始加载时，服务端请求参数cellMinWidth: 95,  //单元格最小宽度height: "full-160",parseData: function (res) { //解析服务端返回的原始数据，res 即为原始返回的数据if (判断服务端是否请求成功) { //请求成功return {"code": 0, //解析接口状态  0代表请求成功"data": res.data.list,  //当前页请求获得的数据"count": res.data.totalElement,//总记录数"curr": res.data.currentPage + 1,//当前页"size": res.data.pageSize,//每页最大显示记录数"msg": res.message//服务端提示信息};} else if (判断用户未登录) { //layer.alert(res.message, function () {// 未登录，需要跳转到登陆页面top.location.href = "/page/login/login.html";});} else {//异常layer.msg(res.message);}},id: "demoListTab",  //动态生成的表格的id/*定义表格列标题field：数据对应的属性名，title：标题，templet：回调函数，一般用于数据格式化*/cols: [[{type: "checkbox", fixed: "left", width: 50},//复选框{field: 'account', title: '账户', width: 180, align: "center"},{field: 'sex', title: '性别', width: 180, align: "center"},{field: 'createdTime', title: '创建时间', width: 180, align: "center", templet: formatDate},{title: '操作', width: 230, fixed: "right", align: "center", templet: operate} //操作事件列]],/*渲染表格数据结束执行的回调,此处根据服务端数据进行了分页插件的重新渲染。res：服务端数据，count：记录数，curr：当前页，但是发现值不更新，所以弃用该值，可能是使用方式不对，欢迎指正！*/done: function (res, curr, count) {//渲染分页栏回调函数renderPage(res, count);}});//渲染分页栏function renderPage(data, count) {laypage.render({elem: 'pageTool', //分页栏div的idcurr: data.curr, //当前页count: count, //总记录数layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],//分页栏显示按钮groups: 5, //页码横列显示五条，其他全用省略号显示limit: data.size,  // curr，count，limit都是服务端返回的数据limits: [10, 15, 20, 30], //可选的每页显示记录数jump: function (obj, first) {   //分页栏变动回调if (!first) {  //不是初次加载table.reload("demoListTab", {where: {account: $("#account").val(),page: obj.curr - 1,size: obj.limit,   //page，size为分页插件当前变动后，要请求服务端的数据key: key//token}})}}});}//绑定检索事件，事件触发，重新加载表格$(".search_btn").on("click", function () {table.reload("demoListTab", {where: {account: $("#account").val(),page: 0,size: $(".layui-laypage-limits>select>option:selected").val(), //检索时获得每页显示记录数key: key//token}});});//绑定添加事件$(".add_btn").click(function () {//渲染添加界面addRender();})//列表操作。每条数据最后可以进行的操作table.on('tool(demoList)', function (obj) {var layEvent = obj.event,//获得事件名data = obj.data;  //获得当前行数据if (layEvent === 'edit') { //编辑updateRender(data);//渲染编辑界面} else if (layEvent === 'del') { //删除layer.confirm('确定删除此记录？', {icon: 5, title: '危险操作'}, function (index) {$.post("../../demo/delete", {account: data.account,key: key}, function (data) {tableIns.reload();//重新加载表格layer.close(index);})});}});//编辑视图渲染function updateRender(edit) {var index = layer.open({title: "编辑demo",type: 2,area: ["450px", "500px"],content: "page/demo/demoUpdate.html", //编辑界面html地址success: function (layero, index) {var body = $($(".layui-layer-iframe", parent.document).find("iframe")[0].contentWindow.document.body);//填充要编辑的值body.find("#account").val(edit.account).attr("disabled", "disabled");body.find("#sex option[value=" + edit.sex + "]").prop("selected", 'selected');form.render();}})}//添加视图渲染function addRender() {var index = layer.open({title: "添加demo",type: 2,area: ["450px", "500px"],content: "page/demo/demoAdd.html",success: function (layero, index) {}})}//编辑信息提交事件绑定form.on("submit(updateDemo)", function (data) {top.layer.close(index);//弹出loadingvar index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});// 实际使用时的提交信息$.post("../../demo/update", {account: $("#account").val(),sex: $("#sex").val(),key: key}, function (res) {var result = JSON.parse(res);top.layer.close(index);layer.closeAll("iframe");var code = result.code;if (code != 1) {top.layer.msg(result.message);}$(".layui-tab-item.layui-show", parent.document).find("iframe")[0].contentWindow.location.reload();})return false;})//添加提交事件绑定form.on("submit(addDemo)", function (data) {top.layer.close(index);//弹出loadingvar index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});// 实际使用时的提交信息$.post("../../demo/add", {account: $("#account").val(),sex: $("#sex").val(),key: key}, function (res) {var result = JSON.parse(res);top.layer.close(index);layer.closeAll("iframe");var code = result.code;if (code != 1) {top.layer.msg(result.message);}$(".layui-tab-item.layui-show", parent.document).find("iframe")[0].contentWindow.location.reload();})return false;})//时间格式化function formatDate(d) {return util.toDateString(d.createdTime, 'yyyy-MM-dd HH:mm:ss');}//操作类格式化function operate() {return '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>' +'<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>';}
})

效果图：

参考模板地址：http://layuicms.com/v2/index.html
github：https://github.com/BrotherMa/layuicms2.0
码云：https://gitee.com/layuicms/layuicms2.0

转载于:https://my.oschina.net/kevin2kelly/blog/2873643

基于layuiCMS2.0开发后台管理系统，实现自定义分页并动态加载数据表格的示例...相关推荐

Android应用开发提高系列（5）——Android动态加载（下）——加载已安装APK中的类和资源...
前言 Android动态加载(下)--加载已安装APK中的类和资源. 声明欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://ov ...
HoloLens1开发（三）：Trilib插件动态加载模型-Part2
前言最近有新成员加入本团队,为了方便其开发HoloLens1 / HoloLens2,将不定时更新HoloLens相关开发相关内容. 软件需求: HoloLens 1:VS2017 + Unity2 ...
HoloLens1开发（三）：Trilib插件动态加载模型-Part1
前言最近有新成员加入本团队,为了方便其开发HoloLens1 / HoloLens2,将不定时更新HoloLens相关开发相关内容. 软件需求: HoloLens 1:VS2017 + Unity2 ...
Android应用开发提高系列（4）——Android动态加载（上）——加载未安装APK中的类...
前言近期做换肤功能,由于换肤程度较高,受限于平台本身,实现起来较复杂,暂时搁置了该功能,但也积累了一些经验,将分两篇文章来写这部分的内容,欢迎交流! 关键字:Android动态加载声明欢迎转载, ...
[转]Android应用开发提高系列（4）——Android动态加载（上）——加载未安装APK中的类...
本文转自:http://www.cnblogs.com/over140/archive/2012/03/29/2423116.html 前言近期做换肤功能,由于换肤程度较高,受限于平台本身,实现起来 ...
Android 自定义WebView 实现可以加载缓存数据
1.自定义WebView说明 1.1.这个WebView可以加载缓存的数据.(需要后端配合,将html转换成一个字符串,主要是图片要用特殊格式) 1.2.注入了图片链接,为了方便点击webView中的 ...
系统接口502异常_基于SpringBoot2.0的后台权限管理系统
简介基于SpringBoot2.0的后台权限管理系统界面简洁美观敏捷开发系统架构.核心技术采用Spring.MyBatis.Shiro没有任何其它重度依赖. 互联网云快速开发框架,微服务分布式代码生 ...
20万数据 sql 快还是 java快?_基于SpringBoot2.0开发的，轻量级的，前后分离Java开发平台...
项目说明 MintLeaf-Fast是一个基于SpringBoot2.0开发的,轻量级的,前后端分离的Java快速开发平台开箱即用,节省开发时间,提升开发效率,能够快速开发项目并交付的接私活利器支 ...
基于java的商城后台管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署
基于java的商城后台管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署基于java的商城后台管理系统计算机毕业设计源码+系统+lw文档+mysql数据库+调试部署本源码技术栈 ...

基于layuiCMS2.0开发后台管理系统，实现自定义分页并动态加载数据表格的示例...

基于layuiCMS2.0开发后台管理系统，实现自定义分页并动态加载数据表格的示例...相关推荐

最新文章

热门文章