管理系统中layui的一些常规操作，增加、修改、删除、查询
对于一个管理系统，数据操作通常有增加、修改、删除、查询，对于老码农来讲，layui是非常适合的，比vue要简单很多。
以下是一个文章管理的例子
<%@ page language="java" pageEncoding="utf-8"%>
<%@ include file="../../header.jspf" %>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>文章中心管理</title><link rel="stylesheet" href="${ROOT }/static/sys/layui/css/layui.css"/><link rel="stylesheet" href="${ROOT }/static/sys/style/admin.css?v=318"/><style>/* 左树 */#organizationTreeBar {padding: 10px 15px;border: 1px solid #e6e6e6;background-color: #f2f2f2;}#organizationTree {border: 1px solid #e6e6e6;border-top: none;padding: 10px 5px;overflow: auto;height: -webkit-calc(100vh - 125px);height: -moz-calc(100vh - 125px);height: calc(100vh - 125px);}.layui-tree-entry .layui-tree-txt {padding: 0 5px;border: 1px transparent solid;text-decoration: none !important;}.layui-tree-entry.ew-tree-click .layui-tree-txt {background-color: #fff3e0;border: 1px #FFE6B0 solid;}/* 右表搜索表单 */#organizationUserTbSearchForm .layui-form-label {box-sizing: border-box !important;width: 90px !important;}#organizationUserTbSearchForm .layui-input-block {margin-left: 90px !important;}</style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid" style="padding-bottom: 0;"><div class="layui-row layui-col-space15"><div class="layui-col-md2"><div class="layui-card"><div class="layui-card-body" style="padding: 10px;"><!-- 树工具栏 --><div class="layui-form toolbar" id="organizationTreeBar"><button id="organizationAddBtn" class="layui-btn layui-btn-xs icon-btn"><i class="layui-icon"></i>添加</button> <button id="organizationEditBtn" class="layui-btn layui-btn-xs layui-btn-warm icon-btn"><i class="layui-icon"></i>修改</button> <button id="organizationDelBtn"class="layui-btn layui-btn-xs layui-btn-danger icon-btn"><i class="layui-icon"></i>删除</button></div><!-- 左树 --><div id="organizationTree"></div></div></div></div><div class="layui-col-md10"><div class="layui-card"><input type="hidden" name="categoryId" value="" id="categoryId"/><div class="layui-card-body" style="padding: 10px;"><!-- 数据表格 --><table id="organizationUserTable" lay-filter="organizationUserTable"></table><script type="text/html" id="imgTpl"><img onclick="showBigImage(this)" style="display: inline-block; width: 55%; height: 55%;" src= {{ d.logo ==''||d.logo==undefined?'https://images-cn.babalish.com/nopic.jpg':d.logo}}></script> <script type="text/html" id="articleTbState"><input type="checkbox" lay-filter="articleTbStateCk" value="{{d.id}}" lay-skin="switch"lay-text="已发布|未发布" {{d.status==1?'checked':''}} style="display: none;"/><p style="display: none;">{{d.status==1?'已发布':'未发布'}}</p></script></div></div></div></div>
</div>
<!-- 表格操作列
<script type="text/html" id="organizationUserTbBar"><a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>-->
<!-- 表格工具列 -->
<script type="text/html" id="organizationUserTbToolBar"><div class="layui-form layui-card-header layuiadmin-card-header-auto"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">标题</label><div class="layui-input-block"><input type="text" name="title" placeholder="请输入文章标题" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">短标题</label><div class="layui-input-block"><input type="text" name="shortTitle" placeholder="请输入文章短标题" autocomplete="off" class="layui-input"></div></div> <div class="layui-inline"><label class="layui-form-label">状态</label><div class="layui-input-block" style="width:100px"><select name="status"><option value="">全部</option><option value="0">未上架</option><option value="1">已上架</option><option value="-1">已删除</option></select></div></div><div class="layui-inline"><button class="layui-btn layuiadmin-btn-forum-list" lay-submit lay-filter="LAY-app-foodlist-search"><i class="layui-icon layui-icon-search layuiadmin-button-btn"></i></button></div></div></div>
<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon"></i>添加</button> <button lay-event="edit" id="articleEditBtn" class="layui-btn layui-btn-sm layui-btn-warm icon-btn"><i class="layui-icon"></i>修改</button> <button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon"></i>删除</button> <button lay-event="move" class="layui-btn layui-btn-sm layui-btn-normal icon-btn"><i class="layui-icon"></i>移动</button> <button lay-event="pics" class="layui-btn layui-btn-sm layui-btn-normal icon-btn"><i class="layui-icon"></i>图片</button> <button lay-event="push" class="layui-btn layui-btn-sm layui-btn-normal icon-btn"><i class="layui-icon"></i>蜘蛛推送</button>
</script>
<!-- 表单弹窗 -->
<script type="text/javascript"> var host="${ROOT}"</script>
<!-- js部分 -->
<script type="text/javascript" src="${ROOT }/static/sys/layui/layui.js"></script>
<script type="text/javascript" src="${ROOT }/static/js/jquery.min.js"></script>
<script>
layui.config({base: '${ROOT }/static/sys/' //静态资源所在路径}).extend({index: 'lib/index' //主入口模块}).use(['layer', 'form', 'table', 'util', 'tree', 'dropdown', 'xmSelect', 'treeTable'], function () {var $ = layui.jquery;var layer = layui.layer;var form = layui.form;var table = layui.table;var util = layui.util;var admin = layui.admin;var tree = layui.tree;var xmSelect = layui.xmSelect;var selObj, treeData; // 左树选中数据/* 渲染树形 */function renderTree() {$.post('${ROOT}/sys/category/ajaxList',{"limit":1000}, function (res) {for (var i = 0; i < res.data.length; i++) {res.data[i].spread = true;}treeData = layui.treeTable.pidToChildren(res.data, 'id', 'pid');tree.render({elem: '#organizationTree',onlyIconControl: true,data: treeData,click: function (obj) {selObj = obj;$("#categoryId").val(obj.data.id);$('#organizationTree').find('.ew-tree-click').removeClass('ew-tree-click');$(obj.elem).children('.layui-tree-entry').addClass('ew-tree-click');insTb.reload({where: {categoryId: obj.data.id},page: {curr: 1},method:'post',url: '${ROOT}/sys/article/list'});}});$('#organizationTree').find('.layui-tree-entry:first>.layui-tree-main>.layui-tree-txt').trigger('click');});}renderTree();/* 添加 */$('#organizationAddBtn').click(function () {layer.open({type: 2,title: '添加栏目',content: '${ROOT}/sys/category/categoryForm?type=QA',maxmin: false,area: ['600px', '550px'],btn: ['确定', '取消'],yes: function(index, layero){var iframeWindow = window['layui-layer-iframe'+ index],submitID = 'LAY-user-role-submit',submit = layero.find('iframe').contents().find('#'+ submitID);//监听提交iframeWindow.layui.form.on('submit('+ submitID +')', function(data){var i=0;var field = data.field; //获取提交的字段if(i<1){i++;$.ajax({url:"${ROOT}/sys/category/save",data:field,type:'post',dataType:'json',success:function(json) {if(json.code == 0) {layer.msg(json.msg, { icon: 1, time: 2000 });setTimeout(function () {renderTree();}, 1500);layer.close(index); //关闭弹层} else {layer.msg(json.msg);}}});}else{layer.msg("正在保存...", { icon: 1, time: 2000 });}}); submit.trigger('click');}});});/* 修改 */$('#organizationEditBtn').click(function () {console.info(selObj);if (!selObj) {return layer.msg('未选择栏目', {icon: 2})}else{layer.open({type: 2,title: '修改栏目',content: '${ROOT}/sys/category/categoryForm?id='+selObj.data.id,maxmin: false,area: ['600px', '550px'],btn: ['确定', '取消'],yes: function(index, layero){var iframeWindow = window['layui-layer-iframe'+ index],submitID = 'LAY-user-role-submit',submit = layero.find('iframe').contents().find('#'+ submitID);//监听提交iframeWindow.layui.form.on('submit('+ submitID +')', function(data){var field = data.field; //获取提交的字段$.ajax({url:"${ROOT}/sys/category/save",data:field,type:'post',dataType:'json',success:function(json) {if(json.code == 0) {layer.msg(json.msg, { icon: 1, time: 2000 });setTimeout(function () {renderTree();}, 1500);layer.close(index); //关闭弹层} else {layer.msg(json.msg);}}});}); submit.trigger('click');}});}});/* 删除 */$('#organizationDelBtn').click(function () {if (!selObj){return layer.msg('未选择机构', {icon: 2});} else{doDel(selObj);}});/* 删除 */function doDel(obj) {layer.confirm('确定要删除此栏目吗？', {skin: 'layui-layer-admin',shade: .1}, function (i) {layer.close(i);var loadIndex = layer.load(2);$.post('${ROOT}/sys/category/del', {id: obj.data.id,}, function (res) {layer.close(loadIndex);if (0 === res.code) {layer.msg(res.msg, {icon: 1});renderTree();} else {layer.msg(res.msg, {icon: 2});}}, 'json');});}/* 渲染表格 */var insTb = table.render({elem: '#organizationUserTable',data: [],height: 'full-52',page: true,toolbar: '#organizationUserTbToolBar',cellMinWidth: 100,cols: [[{type: 'checkbox',field:'id'},{type: 'numbers',field:'id'},{title: 'ID',field:'id'},{field: 'title', title: '文章标题',minWidth:400, style:'cursor: pointer;color:#20A0FF',templet:'<div><a class="iconfont icon-chakanbaogao" style="margin-left: 3%; color: #2196F3;border-radius: 5px; cursor: pointer;text-decoration: underline;" target="_blank" onclick="skip({{d.id}})">{{ d.title }}</a></div>'},{field: 'shortTitle', title: '短标题',width:250},{field: 'logo', title: '缩略图',width:100,templet: "#imgTpl"},{field: 'attrs', title: '标识',minWidth:110,templet:function(d){return d.attrs} ,sort: true,},{field: 'sort', title: '排序', edit:"text",sort: true,width:80},{field: 'status', title: '状态', templet: '#articleTbState', sort: true, width: 100},{field: 'createTime', title: '创建时间', templet: function (d) {return util.toDateString(d.createTime);}, sort: true,width:170}//,{title: '操作', toolbar: '#organizationUserTbBar', align: 'center', width: 120, minWidth: 120}]],done: function () {// 表格搜索form.on('submit(organizationUserTbSearch)', function (data) {insTb.reload({where: data.field, page: {curr: 1}});return false;});}});form.on('submit(LAY-app-foodlist-search)', function(data){var field = data.field;insTb.reload({where: field, page: {curr: 1}});});/* 表格工具条点击事件 */table.on('tool(organizationUserTable)', function (obj) {if (obj.event === 'edit') { // 修改showEditModel2(obj.data);} else if (obj.event === 'del') { // 删除doDel2(obj);}});table.on('edit(organizationUserTable)', function (obj) {var value = obj.value //得到修改后的值,data = obj.data //得到所在行所有键值,field = obj.field; //得到字段if(field=='sort'){$.ajax({type:"post",url:"${ROOT}/sys/article/sort",data:{id:data.id,sort:value},dataType:"json",success:function(res){if(res.code==0){//layer.msg("修改成功");}else{layer.msg("排序失败，请修改为数字重试");}}});}});/* 表格头工具栏点击事件 */table.on('toolbar(organizationUserTable)', function (obj) {var categoryId = $("#categoryId").val();if (obj.event === 'add') { // 添加var i=0;var varindex = layer.open({type: 2,title: '添加文章',content: '${ROOT}/sys/article/form?categoryId='+categoryId,maxmin: false,area: ['1000px', '750px'],btn: ['确定', '取消'],yes: function(index, layero){var iframeWindow = window['layui-layer-iframe'+ index],submitID = 'LAY-article-submit',submit = layero.find('iframe').contents().find('#'+ submitID);//监听提交iframeWindow.layui.form.on('submit('+ submitID +')', function(data){var field = data.field; //获取提交的字段if(i<1){i++;$.ajax({url:"${ROOT}/sys/article/save",data:field,type:'post',dataType:'json',success:function(json) {if(json.code == 0) {layer.msg(json.msg, { icon: 1, time: 2000 });setTimeout(function () {insTb.reload({page: {curr: 1}});}, 1500);layer.close(index); //关闭弹层} else {layer.msg(json.msg);}}});}else{layer.msg("正在保存...", { icon: 1, time: 2000 });}}); submit.trigger('click');}});layer.full(varindex);} else if (obj.event === 'edit') { // 修改var checkRows = table.checkStatus('organizationUserTable');if (checkRows.data.length === 0) {layer.msg('请选择要修改的数据', {icon: 2});return;}if (checkRows.data.length != 1) {layer.msg('一次只能选择一条数据修改', {icon: 2});return;}var ids = checkRows.data.map(function (d) {return d.id;});var i=0;var varindex = layer.open({type: 2,title: '编辑文章',content: '${ROOT}/sys/article/form?id='+ids,maxmin: false,area: ['1000px', '750px'],btn: ['确定', '取消'],yes: function(index, layero){var iframeWindow = window['layui-layer-iframe'+ index],submitID = 'LAY-article-submit',submit = layero.find('iframe').contents().find('#'+ submitID);//监听提交iframeWindow.layui.form.on('submit('+ submitID +')', function(data){var field = data.field; //获取提交的字段if(i<1){i++$.ajax({url:"${ROOT}/sys/article/save",data:field,type:'post',dataType:'json',success:function(json) {if(json.code == 0) {layer.msg(json.msg, { icon: 1, time: 2000 });setTimeout(function () {insTb.reload({page: {curr: 1}});}, 1500);layer.close(index); //关闭弹层} else {layer.msg(json.msg);}}});}else{layer.msg("正在保存...", { icon: 1, time: 2000 });}}); submit.trigger('click');}});layer.full(varindex);} else if (obj.event === 'del') { // 删除var checkRows = table.checkStatus('organizationUserTable');if (checkRows.data.length === 0) {layer.msg('请选择要删除的数据', {icon: 2});return;}var ids = checkRows.data.map(function (d) {return d.id;});doDel2({ids: ids});}else if(obj.event === 'move'){var checkStatus = table.checkStatus('organizationUserTable'),checkData = checkStatus.data; //得到选中的数据if(checkData.length === 0){return layer.msg('请选择数据');}var id = "";for (var i = 0; i < checkStatus.data.length; i++) {if (i == (checkStatus.data.length - 1)) {id += checkStatus.data[i].id;} else {id += checkStatus.data[i].id + ",";}}layer.open({type: 2,title: '移动分类',content: '${ROOT}/sys/article/batchCategory',maxmin: false,area: ['500px', '500px'],btn: ['确定', '取消'],yes: function(index, layero){var iframeWindow = window['layui-layer-iframe'+ index],submitID = 'LAY-article-submit',submit = layero.find('iframe').contents().find('#'+ submitID);//监听提交iframeWindow.layui.form.on('submit('+ submitID +')', function(data){data.field["ids"]= id;var field = data.field; //获取提交的字段$.ajax({url:"${ROOT}/sys/article/batchCategory",data:field,type:'post',dataType:'json',success:function(json) {if(json.code == 0) {layer.msg(json.msg, { icon: 1, time: 2000 });setTimeout(function () {layui.table.reload("organizationUserTable",{page:{curr:$(".layui-laypage-em").next().html()}}) }, 1500);layer.close(index); //关闭弹层} else {layer.msg(json.msg);}}});}); submit.trigger('click');}});}else if(obj.event === 'pics'){var checkRows = table.checkStatus('organizationUserTable');if (checkRows.data.length === 0) {layer.msg('请选择要添加图片的数据', {icon: 2});return;}if (checkRows.data.length != 1) {layer.msg('一次只能选择一条数据添加图片', {icon: 2});return;}var ids = checkRows.data.map(function (d) {return d.id;});layer.open({type: 2,title: '图片('+ids+')',content: '${ROOT}/sys/uploads/uploadsList?pid='+ids,maxmin: false,area: ['1000px', '700px']});}else if (obj.event === 'push') { // 删除var checkRows = table.checkStatus('organizationUserTable');if (checkRows.data.length === 0) {layer.msg('请选择要推送的数据', {icon: 2});return;}var ids = checkRows.data.map(function (d) {return d.id;});doPush({ids: ids});}});function doPush(obj) {layer.confirm('确定要推送选中文章吗？', {skin: 'layui-layer-admin',shade: .1}, function (i) {layer.close(i);var loadIndex = layer.load(2);$.post('${ROOT}/sys/article/bdPush', {id: obj.data ? obj.data.id : '',ids: obj.ids ? obj.ids.join(',') : ''}, function (res) {layer.close(loadIndex);if (0 === res.code) {layer.msg(res.msg, {icon: 1});//insTb.reload({page: {curr: 1}});} else {layer.msg(res.msg, {icon: 2});}}, 'json');});}/* 删除2 */function doDel2(obj) {layer.confirm('确定要删除选中文章吗？', {skin: 'layui-layer-admin',shade: .1}, function (i) {layer.close(i);var loadIndex = layer.load(2);$.post('${ROOT}/sys/article/del', {id: obj.data ? obj.data.id : '',ids: obj.ids ? obj.ids.join(',') : ''}, function (res) {layer.close(loadIndex);if (0 === res.code) {layer.msg(res.msg, {icon: 1});insTb.reload({page: {curr: 1}});} else {layer.msg(res.msg, {icon: 2});}}, 'json');});}/* 修改用户状态 */form.on('switch(articleTbStateCk)', function (obj) {var loadIndex = layer.load(2);$.post('${ROOT}/sys/article/updateStatus', {articleId: obj.elem.value,status: obj.elem.checked ? 1 : 0}, function (res) {layer.close(loadIndex);if (res.code === 0) {layer.msg(res.msg, {icon: 1});form.render('checkbox');} else {$(obj.elem).prop('checked', !obj.elem.checked);layer.msg(res.msg, {icon: 2});}}, 'json');});});function skip(code){window.open(host+"/article/view/"+code)
}
/*** @param e 图片对象*/
function showBigImage(e) {layer.open({type: 1,title: false,closeBtn: 0,shadeClose: true, //点击阴影关闭area: [$(e).width + 'px', ($(e).height-100) + 'px'], //宽高content: "<img src=" + $(e).attr('src') + " />"});
}
</script>
</body>
</html>系统中效果预览如下：
