后台在不分离的情况下，搭建页面前端框架使用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"//表格dom:lay-filter="layui-table"
,url: ""//列表请求方式
,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
表格——分页独立封装
搜索ID：