后台在不分离的情况下，搭建页面前端框架使用layui页面风格比较良好
js代码
(function($,window,layui,layer) {
$.extend({
_layui: layui,
modal: {
//弹出层指定宽度
open: function (title,url,w,h,cb) {
if ($.common.isEmpty(cb)) {
cb = function(index, layero) {
var iframeWin = layero.find('iframe')[0];
iframeWin.contentWindow.submitHandler(index, layero);
}
}
let area = ["100%", "100"];
if(w && h) {
area = [w + 'px', h + 'px']
}
let index = layer.open({
type: 2,
// area: [w + 'px', h + 'px'],
area: area,
fix: false,
//不固定
maxmin: true,
shade: 0.3,
title: title,
content: url,
btn: ['确定', '关闭'],
// 弹层外区域关闭
shadeClose: true,
yes: cb,
cancel: function(index) {
return true;
}
});
if(!(w && h)) {
layer.full(index);
}
}
},
//操作封装处理
operate: {
// 提交数据
submit: function(url, type, data, callback) {
var config = {
url: url,
type: "post",
contentType: 'application/json;charset=utf-8;',
dataType: "json",
data: data,
beforeSend: function () {
// $.modal.loading("正在处理中，请稍后...");
},
success: function(result) {
if(result.code == "000") {
if (typeof callback == "function") {
callback(result);
}
}else {
layer.alert("接口异常或服务器问题")
}
// $.operate.ajaxSuccess(result);
}
};
$.ajax(config)
},
// post请求传输
post: function(url, data,method, callback) {
let params = $.operate.handleParams(data,method);
$.operate.submit(url, "post", params, callback);
},
//处理请求参数封装（加签）
handleParams: function(data,method,page,size) {
let params = {
method:method,
biz_params: JSON.stringify(data),
}
if(page && size) {
params.pager = page,
params.pager_len = size
}
let json = window.getParams(params);
return JSON.stringify(json);
},
//重新生成请求数据，分页变化
handleParamsPage: function(page, size) {
let o = JSON.parse($.table._options.data);
let temp = {};
temp.biz_params = o.biz_params;
temp.method = o.method;
temp.pager = page;
temp.pager_len = size;
let json = window.getParams(temp);
return JSON.stringify(json); // let json = getParamsDoc(pageNum, numPerPage);
},
//打开新增页面
addPage: function(title,url) {
$.modal.open(title,url,null,null,function(index) {
layer.close(index);
})
},
//打开编辑页面
edtiorPage: function(title,url,id) {
$.modal.open(title,url,null,null,function(index) {
layer.close(index);
})
}
},
table: {
_options:{},
//表格初始化
init: function(options) {
let defaults = {
pageElem: "layui-table-page" //分页的节点，不需要带#
,pageNum: 1 //默认 1
,pageSize: 10// 默认 10条
// ,data:{} //请求 对象数据，
,getParams: null //获取参数数据
,delUrl:""
,delParams: null
,elem: "#layui-table"http://表格dom:lay-filter="layui-table"
,url: ""http://列表请求方式
,method: "POST"
,contentType:"application/json"
,parseData: function(res){
res.data = JSON.parse(res.biz_params).list;
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.pager_max, //解析数据长度
"data": res.data//解析数据列表
};
},
where: {}
,request: {
pageName: 'pager' //页码的参数名称，默认：page
,limitName: 'pager_len' //每页数据量的参数名，默认：limit
}
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]////自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
,title: "表格名称"
,cols: []
// ,page: true
,id: "layui-table" //id="layui-table"
}
let opt = $.extend(defaults, options);
console.log(opt);
$.table._options = opt;
//页面第一次请求，默认 1页 10条
$.table.getListByPage(opt,1,10,true);
//初始化监听事件
;
$.table.initEvent();
},
//请求数据
getListByPage: function(opt,page,size,isPage) {
let data = $.table._options.getParams(page, size);
$.operate.submit(opt.url, "post", data, function(res) {
console.log(res);
list = JSON.parse(res.biz_params).list;
let pageRO = {
totalCount: null,
numPerPage: null
}
pageRO.totalCount = res.pager_max;
pageRO.numPerPage = 10;
$.table.renderTable(list, opt);
if(isPage) {
$.table.renderPage(pageRO, opt);
}
});
},
//渲染表格
renderTable: function(list, opt) {
layui.table.render({
elem: opt.elem
, title: '用户数据表'
, cols: opt.cols
// , page: true
, data: list
,toolbar: opt.toolbar
, done: function (res, curr, count) {
// consoled.log(res, curr, count)
}
});
},
//渲染分页
renderPage: function(data, opt) {
layui.laypage.render({
elem: opt.pageElem, //注意，这里的 page 是 ID，不用加 # 号
count: data.totalCount, //数据总数，从服务端得到
limit: data.numPerPage, // 每页条数
limits: [10, 20, 30, 40, 50],
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
jump: function (obj, first) {
//console.log(obj)
//obj包含了当前分页的所有参数，比如：
//console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
//console.log(obj.limit); //得到每页显示的条数
//首次不执行
if (!first) {
//do something
$.table.numpage(obj.curr, obj.limit) // 分页点击传参
}
}
});
},
//分页变化
numpage: function(page, size) {
//解析初始化 请求
$.table.getListByPage($.table._options,page,size,false);
},
initEvent: function() {
;
$.table.bindEvent();
$.table.bindToolbar();
$.table.bindToolbarHead();
},
//自定义事件
bindEvent: function() {
active = {
//表格搜索
search: function() {
$.table.getListByPage($.table._options,1,10,true);
},
//新增操作
add: function() {
$.modal.open("新增"+$.table._options.title,"./edtior_add.html",600,800,function(index) {
layer.close(index);
})
}
};
$('.layui-btn-g').on('click', function () {
;
var type = $(this).attr('lay-event');
active[type] ? active[type].call(this) : '';
});
},
//表格【行】工具栏事件
bindToolbar: function() {
//查询行工具 dom
let dom = $.table._options.elem.substring(1)
layui.table.on(`tool(${dom})`, function(obj) {
console.log(obj);
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
// $.table._options.delParams();
$.operate.submit( $.table._options.delUrl, "post", data, function(res){
});
});
}else if(obj.event === 'edit'){
$.modal.open("编辑"+$.table._options.title,"./edtior_add.html",600,800,function(index) {
layer.close(index);
})
}
})
},
//表格【头】工具栏事件
bindToolbarHead: function() {
;
let dom = $.table._options.elem.substring(1)
layui.table.on(`toolbar(${dom})`, function(obj){
var checkStatus = layui.table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选');
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
}
},
form: {
_options:{},
//表单初始化
init: function(options) {
let defaults = {
id:"layui-form",
submitBtn: "save_btn",
data: null, //表单对应的数据name:value,不是页面数据包含
verify: undefined,//对输入框值校验
verifyCheckBox:{//对复选框校验并且友好提示
"name": 1 // 属性：限制个数
},
addUrl: {
method: "",
url:"",
data:""
},
editorUrl:{
method: "",
url:""
},
descUrl:{
method: "",
url:""
},
requestMethod:"",
contentType:"application/x-www-form-urlencoded",
isDate: true,//是否有时间控件
width: undefined,//表单宽度
height: undefined,//表单高度
}
let opt = $.extend(defaults, options);
$.form._options = opt;
//初始化监听事件
// $.form.initEvent();
//初始化数据
layui.form.val(opt.id, opt.data);
//初始化校验
layui.form.verify(opt.verify);
//提交
//初始化事件提交
layui.form.on(`submit(${opt.submitBtn})`, function(data) {
;
console.log(data.field);
let res_params = $.extend(data.field,opt.data);
console.log(res_params);
if(res_params.id) {
$.operate.post(opt.editorUrl.url, data.field, opt.editorUrl.method, function(res) {
console.log(res);
if("000" == res.code) {
layer.msg("修改成功")
}else {
layer.msg("修改失败")
}
})
}else {
$.operate.post(opt.addUrl.url, data.field, opt.addUrl.method, function(res) {
console.log(res);
if("000" == res.code) {
layer.msg("保存成功")
}else {
layer.msg("保存失败")
}
})
}
return false;
})
}
},
// 通用方法封装处理
common: {
// 判断字符串是否为空
isEmpty: function (value) {
if (value == null || this.trim(value) == "") {
return true;
}
return false;
},
// 判断一个字符串是否为非空串
isNotEmpty: function (value) {
return !$.common.isEmpty(value);
},
// 空对象转字符串
nullToStr: function(value) {
if ($.common.isEmpty(value)) {
return "-";
}
return value;
},
// 是否显示数据 为空默认为显示
visible: function (value) {
if ($.common.isEmpty(value) || value == true) {
return true;
}
return false;
},
// 空格截取
trim: function (value) {
if (value == null) {
return "";
}
return value.toString().replace(/(^\s*)|(\s*$)|\r|\n/g, "");
},
// 比较两个字符串（大小写敏感）
equals: function (str, that) {
return str == that;
},
// 比较两个字符串（大小写不敏感）
equalsIgnoreCase: function (str, that) {
return String(str).toUpperCase() === String(that).toUpperCase();
},
// 将字符串按指定字符分割
split: function (str, sep, maxLen) {
if ($.common.isEmpty(str)) {
return null;
}
var value = String(str).split(sep);
return maxLen ? value.slice(0, maxLen - 1) : value;
},
// 字符串格式化(%s )
sprintf: function (str) {
var args = arguments, flag = true, i = 1;
str = str.replace(/%s/g, function () {
var arg = args[i++];
if (typeof arg === 'undefined') {
flag = false;
return '';
}
return arg;
});
return flag ? str : '';
},
// 指定随机数返回
random: function (min, max) {
return Math.floor((Math.random() * max) + min);
},
// 判断字符串是否是以start开头
startWith: function(value, start) {
var reg = new RegExp("^" + start);
return reg.test(value)
},
// 判断字符串是否是以end结尾
endWith: function(value, end) {
var reg = new RegExp(end + "$");
return reg.test(value)
},
// 数组去重
uniqueFn: function(array) {
var result = [];
var hashObj = {};
for (var i = 0; i < array.length; i++) {
if (!hashObj[array[i]]) {
hashObj[array[i]] = true;
result.push(array[i]);
}
}
return result;
},
// 数组中的所有元素放入一个字符串
join: function(array, separator) {
if ($.common.isEmpty(array)) {
return null;
}
return array.join(separator);
},
// 获取form下所有的字段并转换为json对象
formToJSON: function(formId) {
var json = {};
$.each($("#" + formId).serializeArray(), function(i, field) {
json[field.name] = field.value;
});
return json;
}
}
})
})(jQuery,window,layui,layer)
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格——分页独立封装</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">
<link rel="stylesheet" href="./layui-v2.6.0//dist/css/layui.css"
tppabs="https://www.layui.site/layui/dist/css/layui.css" media="all">
<script src="./layui-v2.6.0/dist/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="demoTable" id="">
搜索ID：
<div class="layui-inline">
<input class="layui-input" name="atv" id="ct_name" autocomplete="off">
</div>
<!-- <button class="layui-btn" data-type="reload">搜索</button> -->
<button class="layui-btn layui-btn-g" lay-event="search" id="search">搜索2</button>
<button class="layui-btn layui-btn-g" lay-event="add" id="add">新增</button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<div id="page"></div>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js" integrity="sha512-E8QSvWZ0eCLGk4km3hxSsNmGWbLtSCSUcewDQPQWZF6pEU8GlT8a5fF32wOl1i8ftdMhssTrF/OhyGWwonTcXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./js/core.js"></script>
<script src="./js/crypto.js"></script>
<script src="./gzsz_ui_2.js"></script>
<script>
function getParamsDoc(num, size) {
console.log("getParamsDoc",this);
let atv_name = document.getElementById("ct_name").value;
// console.dir(atv_name)
let temp = {
ct_name: atv_name,
}
let query = {
method:"copyTempPO.getPaperTempList",
pager: num,
pager_len: size,
biz_params: JSON.stringify(temp)
}
return JSON.stringify(getParams(query)) ;
}
function delParamsDoc() {
console.log("delParamsDoc",this);
let temp = {
id: "",
state: 1
}
let query = {
method:"copyTempPO.getPaperTempList",
pager: num,
pager_len: size,
biz_params: JSON.stringify(temp)
}
return JSON.stringify(getParams(query)) ;
}
$.table.init({
pageElem: "page",
elem: "#test",
url: "xxx",
// data:json,
getParams: getParamsDoc,
delUrl:"yyy",
delParams: delParamsDoc,
toolbar: "#toolbarDemo",
title:"文案管理",
cols: [[
{type: 'checkbox', fixed: 'left'}
,{ field: 'id', title: 'ID', width: 100 }
, { field: 'ct_code', title: '名称', width: 300, }
, { field: 'ct_name', title: '名称12', width: 400, }
, { title: '操作', toolbar: '#barDemo', width: 200 }
]]
})
// // function(data,method,page,size)
// let temp = {
// ct_name: $("#ct_name").val()
// }
// handleParams: function(data,method,page,size)
// let json = $.operate.handleParams(temp, "copyTempPO.getPaperTempList", 1, 10);
</script>
</body>
</html>
