layuitable数据表格渲染前回调(重写layui的ajax执行前回调)_seesun2012的专栏-CSDN博客

baacloud免费翻墙vpn注册使用

来源: layuitable数据表格渲染前回调(重写layui的ajax执行前回调)_seesun2012的专栏-CSDN博客

起因:
今天对旧框架进行版本升级改造,找遍整个layui开发文档以及其他解决方案,竟然没有table相关的渲染前回调、执行前回调函数;通过阅读开发文档,发现layui默认起始页为page=1&limit=10,而后端使用mySQL查询时用到的分页语句需要的是limit 0,10,结果就导致了前后端分页起始页不匹配,为了在开发过程中避免过多的浪费时间在这些小事情上,于是做了统一处理,在layui的ajax请求执行前做url处理,方案如下:

方案:
将代码拷贝到<script> </script>标签内,注意是放在layui.js引入文件后面(可纳入封装好的通用工具文件中去),代码:

<script src=”js/layui-v2.5.4/layui.js” charset=”utf-8″></script>
<script type=”text/JavaScript”>
//重写layui的Ajax请求
if (!(typeof layui == “undefined”)) {
layui.use([‘layer’, ‘JQuery’], function () {
var layer = layui.layer,
$ = layui.JQuery;
//首先备份下JQuery的ajax方法
var _ajax = $.ajax;
//重写jQuery的ajax方法
var flashLoad;
$.ajax = function (opt) {
//备份opt中error和success方法
var fn = {
error: function (XMLHttpRequest, textStatus, errorThrown) {
},
success: function (data, textStatus) {
}
}
if (opt.error) {
fn.error = opt.error;
}
if (opt.success) {
fn.success = opt.success;
}
//扩展增强处理
var _opt = $.extend(opt, {
error: function (XMLHttpRequest, textStatus, errorThrown) {
//错误方法增强处理
if (‘TIMEOUT’ == XMLHttpRequest.getResponseHeader(‘SESSIONS_TATUS’)) {
parent.window.parent.window.location.href = XMLHttpRequest.getResponseHeader(‘content_path’);
}
fn.error(XMLHttpRequest, textStatus, errorThrown);
},
success: function (data, textStatus) {
//成功回调方法增强处理
if (-1 == data.status || ‘-1’ == data.status || 0 == data.status || ‘0’ == data.status) {
return layer.msg(data.tip);
}
fn.success(data, textStatus);
},
beforeSend: function (XHR, response) {
/**
* 修复layui分页bug,pageNum属性-1适应后端查询
*/
var urlParams = util.url.getUrlAllParams(response.url);
if (urlParams && urlParams.pageNum) {
var urlIndex = response.url.substring(0, response.url.indexOf(‘?’) + 1);
urlParams.pageNum = urlParams.pageNum-1;
for (var item in urlParams) {
urlIndex += (item + ‘=’ + urlParams[item]) + ‘&’;
}
response.url = urlIndex.substring(0, urlIndex.length-1);
}
//提交前回调方法
flashLoad = layer.load(0, {shade: [0.7, ‘#393D49’]}, {shadeClose: true}); //0代表加载的风格,支持0-2
},
complete: function (XHR, TS) {
//请求完成后回调函数 (请求成功或失败之后均调用)。
layer.close(flashLoad);
}
});
return _ajax(_opt);
}
});
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
结语:
如果这个方案对您有用,请在右上方点个赞;如果有任何疑问,可以留言,小编会在24小时内及时回复!如果你想汲取小编更多的精华,请关注小编!`
————————————————
版权声明:本文为CSDN博主「seesun2012」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/seesun2012/article/details/100674080

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏