Open tojike opened 12 months ago
index 页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浏览页面</title> <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" /> <link rel="stylesheet" href="/app/admin/admin/css/reset.css" /> </head> <body class="pear-container"> <!-- 顶部查询表单 --> $html <!-- 数据表格 --> <div class="layui-card"> <div class="layui-card-body"> <table id="data-table" lay-filter="data-table"></table> </div> </div> <!-- 表格顶部工具栏 --> <script type="text/html" id="table-toolbar"> <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add" permission="$code_base.insert"> <i class="layui-icon layui-icon-add-1"></i>新增 </button> <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove" permission="$code_base.delete"> <i class="layui-icon layui-icon-delete"></i>删除 </button> </script> <!-- 表格行工具栏 --> <script type="text/html" id="table-bar"> <button class="pear-btn pear-btn-xs tool-btn" lay-event="edit" permission="$code_base.update">编辑</button> <button class="pear-btn pear-btn-xs tool-btn" lay-event="remove" permission="$code_base.delete">删除</button> </script> <script src="/app/admin/component/layui/layui.js"></script> <script src="/app/admin/component/pear/pear.js"></script> <script src="/app/admin/admin/js/permission.js"></script> <script src="/app/admin/admin/js/common.js"></script> <script> // 相关常量 const PRIMARY_KEY = "$primary_key"; const SELECT_API = "$url_path_base/select"; const UPDATE_API = "$url_path_base/update"; const DELETE_API = "$url_path_base/delete"; const INSERT_URL = "$url_path_base/insert"; const UPDATE_URL = "$url_path_base/update"; $js // 表格渲染 layui.use(["table", "form", "common", "popup", "util"], function() { let table = layui.table; let form = layui.form; let $ = layui.$; let common = layui.common; let util = layui.util; let whereNow = {}; $table_js // 编辑或删除行事件 table.on("tool(data-table)", function(obj) { if (obj.event === "remove") { remove(obj); } else if (obj.event === "edit") { edit(obj); } }); // 表格顶部工具栏事件 table.on("toolbar(data-table)", function(obj) { if (obj.event === "add") { add(); } else if (obj.event === "refresh") { refreshTable(); } else if (obj.event === "batchRemove") { batchRemove(obj); } }); // 表格顶部搜索事件 form.on("submit(table-query)", function(data) { whereNow = data.field; table.reload("data-table", { page: { curr: 1 }, where: data.field }) return false; }); // 表格顶部搜索重置事件 form.on("submit(table-reset)", function(data) { table.reload("data-table", { where: [] }) }); // 字段允许为空 form.verify({ phone: [/(^$)|^1\d{10}$/, "请输入正确的手机号"], email: [/(^$)|^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"], url: [/(^$)|(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"], number: [/(^$)|^\d+$/,'只能填写数字'], date: [/(^$)|^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"], identity: [/(^$)|(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"] }); // 表格排序事件 table.on("sort(data-table)", function(obj){ let theWhere = { field: obj.field, order: obj.type }; let sortWhere = {...whereNow, ...theWhere} table.reload("data-table", { initSort: obj, scrollPos: "fixed", where: sortWhere }); }); // 表格新增数据 let add = function() { layer.open({ type: 2, title: "新增", shade: 0.1, shadeClose:true, area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"], content: INSERT_URL }); } // 表格编辑数据 let edit = function(obj) { let value = obj.data[PRIMARY_KEY]; layer.open({ type: 2, title: "修改", shade: 0.1, shadeClose:true, area: [common.isModile()?"100%":"500px", common.isModile()?"100%":"450px"], content: UPDATE_URL + "?" + PRIMARY_KEY + "=" + value }); } // 删除一行 let remove = function(obj) { return doRemove(obj.data[PRIMARY_KEY]); } // 删除多行 let batchRemove = function(obj) { let checkIds = common.checkField(obj, PRIMARY_KEY); if (checkIds === "") { layui.popup.warning("未选中数据"); return false; } doRemove(checkIds.split(",")); } // 执行删除 let doRemove = function (ids) { let data = {}; data[PRIMARY_KEY] = ids; layer.confirm("确定删除?", { icon: 3, title: "提示" }, function(index) { layer.close(index); let loading = layer.load(); $.ajax({ url: DELETE_API, data: data, dataType: "json", type: "post", success: function(res) { layer.close(loading); if (res.code) { return layui.popup.failure(res.msg); } return layui.popup.success("操作成功", refreshTable); } }) }); } // 刷新表格数据 window.refreshTable = function(param) { table.reloadData("data-table", { scrollPos: "fixed" }); } }) </script> </body> </html>
`
index 页面
`