github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

update

pull/1049/head
贤心 2 years ago
parent
c49197bb9f
commit
b400a9befb
7 changed files with 331 additions and 222 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      README.md
  2. 6
      examples/json/table/demo1.json
  3. 107
      examples/table-static.html
  4. 248
      examples/table-test.html
  5. 81
      examples/table.html
  6. 12
      src/modules/form.js
  7. 71
      src/modules/table.js

6
README.md
Unescape View File

@ -25,12 +25,12 @@
--- ---
layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端的各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。 Layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。Layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端的各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
## 快速上手 ## 快速上手
获得 layui 后，将其完整地部署到你的静态资源项目目录，你只需要引入下述两个文件： 获得 Layui 后，将其完整地部署到你的静态资源项目目录，你只需要引入下述两个文件：
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@ -72,4 +72,4 @@ layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范
layui 原官网已于2021年10月13日下线。详见： layui 原官网已于2021年10月13日下线。详见：
> 1. <a href="https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png" target="_blank">layui 原官网下线公告</a> 2. <a href="https://www.zhihu.com/question/488668647/answer/2159962082" target="_blank">layui 原官网为什么要下线？</a> > 1. <a href="https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png" target="_blank">layui 原官网下线公告</a> 2. <a href="https://www.zhihu.com/question/488668647/answer/2159962082" target="_blank">layui 原官网为什么要下线？</a>
鉴于 layui 相对庞大的受众群体，从此 Github 和 Gitee 平台将支撑起 layui 的后续，**它将继续陪伴着仍然需要它的人**。 鉴于 Layui 相对庞大的受众群体，从此 Github 和 Gitee 平台将支撑起 Layui 的后续，**它将继续陪伴着仍然需要它的人**。

6
examples/json/table/demo1.json
Unescape View File

@ -7,14 +7,14 @@
} }
,"data": [{ ,"data": [{
"id": "10001" "id": "10001"
,"username": "杜甫" ,"username": "杜甫123"
,"email": "test1@email.com" ,"email": "test1@email.com"
,"sex": "<strong>男</strong>" ,"sex": "<strong>男</strong>"
,"city": "浙江杭州" ,"city": "浙江杭州"
,"sign": "鼠标移动到此处，可以通过点击单元格右侧的下拉图标，查看到被隐藏的全部内容。" ,"sign": "鼠标移动到此处，可以通过点击单元格右侧的下拉图标，查看到被隐藏的全部内容。"
,"experience": 7 ,"experience": 7
,"ip": "192.168.0.8" ,"ip": "192.168.0.8"
,"logins": null ,"logins": 0
,"joinTime": "2016-10-14" ,"joinTime": "2016-10-14"
}, { }, {
"id": "10002" "id": "10002"
@ -34,7 +34,7 @@
,"email": "test3@email.com" ,"email": "test3@email.com"
,"sex": "男" ,"sex": "男"
,"city": "浙江杭州" ,"city": "浙江杭州"
,"sign": "人生恰似一场修行<br>1<br>1<br>1<br>1<br>1<br>1" ,"sign": "人生恰似一场修行"
,"experience": 8 ,"experience": 8
,"ip": "192.168.0.8" ,"ip": "192.168.0.8"
,"logins": null ,"logins": null

107
examples/table-static.html
Unescape View File

@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>静态表格 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body {padding: 32px;}
</style>
</head>
<body>
<div class="layui-btn-container">
<a href="table.html" class="layui-btn">表格综合</a>
<a href="table-test.html" class="layui-btn">表格操作</a>
<a href="table-static.html" class="layui-btn layui-btn-primary layui-border-green">静态表格</a>
</div>
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>人物</th>
<th>民族</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td>孔子</td>
<td>华夏</td>
<td>有朋至远方来，不亦乐乎</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏</td>
<td>穷则独善其身，达则兼济天下</td>
</tr>
</tbody>
</table>
<br>
<table class="layui-table" lay-size="sm">
<colgroup>
<col width="150">
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>人物</th>
<th>民族</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td>孔子</td>
<td>华夏</td>
<td>有朋至远方来，不亦乐乎</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏</td>
<td>穷则独善其身，达则兼济天下</td>
</tr>
</tbody>
</table>
<br>
<table class="layui-table" lay-size="lg">
<colgroup>
<col width="150">
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>人物</th>
<th>民族</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td>孔子</td>
<td>华夏</td>
<td>有朋至远方来，不亦乐乎</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏</td>
<td>穷则独善其身，达则兼济天下</td>
</tr>
</tbody>
</table>
</body>
</html>

248
examples/table-test.html
Unescape View File

@ -1,5 +1,3 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -8,16 +6,15 @@
<title>表格操作 - layui</title> <title>表格操作 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css"> <link rel="stylesheet" href="../src/css/layui.css">
<style> <style>
body{padding: 20px; /*overflow-y: scroll;*/} body {padding: 32px; /*overflow-y: scroll;*/}
</style> </style>
</head> </head>
<body> <body>
<div class="layui-btn-container"> <div class="layui-btn-container">
<a href="table.html" class="layui-btn">表格综合</a> <a href="table.html" class="layui-btn">表格综合</a>
<a href="table-test.html" class="layui-btn layui-btn-primary">表格测试</a> <a href="table-test.html" class="layui-btn layui-btn-primary layui-border-green">表格操作</a>
<a href="table-static.html" class="layui-btn">静态表格</a> <a href="table-static.html" class="layui-btn">静态表格</a>
</div> </div>
@ -25,12 +22,15 @@
<div class="layui-btn-container"> <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="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页所有数据</button> <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> <button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>
<button class="layui-btn layui-btn-sm" lay-event="reload">重载（保留初始参数）</button>
<button class="layui-btn layui-btn-sm" lay-event="reload2">重载（不保留初始参数）</button> <button class="layui-btn layui-btn-sm" id="reloadTest">
<button class="layui-btn layui-btn-sm" id="dropdown"> 重载测试
更多菜单 <i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button class="layui-btn layui-btn-sm" id="moreTest">
更多测试
<i class="layui-icon layui-icon-down layui-font-12"></i> <i class="layui-icon layui-icon-down layui-font-12"></i>
</button> </button>
</div> </div>
@ -73,13 +73,13 @@
<script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.5.3/layui.js" charset="utf-8"></script> <script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.5.3/layui.js" charset="utf-8"></script>
<script> <script>
layui.use(['table', 'dropdown'], function(){ layui.use(['table', 'dropdown'], function(){
var table = layui.table var $ = layui.$;
,$ = layui.$ var table = layui.table;
,laytpl = layui.laytpl var laytpl = layui.laytpl;
,dropdown = layui.dropdown var dropdown = layui.dropdown;
,form = layui.form; var form = layui.form;
//全局设定某参数 // 全局设定某参数
table.set({ table.set({
where: { where: {
token: '默认 token 参数' token: '默认 token 参数'
@ -156,18 +156,134 @@ layui.use(['table', 'dropdown'], function(){
,key: 'experience' ,key: 'experience'
,order: 'asc' ,order: 'asc'
} }
,done: function(){ ,done: function(){
//下拉菜单 var id = this.id;
// 重载测试
dropdown.render({
elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
,data: [{
id: 'reload',
title: '重载 - 默认（参数重置）'
},{
id: 'reload-deep',
title: '重载 - 深度（参数叠加）'
},{
id: 'reloadData',
title: '数据重载 - 默认（参数重置）'
},{
id: 'reloadData-deep',
title: '数据重载 - 深度（参数叠加）'
}]
// 菜单被点击的事件
,click: function(obj){
switch(obj.id){
case 'reload':
// 重载 - 默认（参数重置）
table.reload('test', {
where: {
abc: '123456'
//,test: '新的 test2'
//,token: '新的 token2'
}
,defaultToolbar: ['print']
/*
,cols: [[ // 重置表头
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'joinTime', title:'加入时间', width:120}
]]
*/
//,height: 500
});
break;
case 'reload-deep':
// 重载 - 深度（参数叠加）
table.reload('test', {
where: {
abc: 123
,test: '新的 test1'
}
,defaultToolbar: ['print']
,page: {curr: 5, limit: 20}
,cols: ins1.config.cols
}, true);
break;
case 'reloadData':
// 数据重载 - 参数重置
var isnt3 = table.reloadData('test', {
where: {
abc: '123456'
//,test: '新的 test2'
//,token: '新的 token2'
}
,height: 2000 // 测试无效参数
//,url: '404'
,elem: null
,page: {curr: 5, limit: 20}
});
console.log(isnt3.config);
break;
case 'reloadData-deep':
// 数据重载 - 参数叠加
table.reloadData('test', {
where: {
abc: 123
,test: '新的 test1'
}
}, true);
break;
}
layer.msg('可观察 Network 请求参数的变化');
}
});
// 更多测试
dropdown.render({ dropdown.render({
elem: '#dropdown' //可绑定在任意元素中，此处以上述按钮为例 elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例
,data: [{ ,data: [{
id: 0, id: 'add',
title: '刷新' title: '添加'
},{
id: 'update',
title: '编辑'
},{
id: 'delete',
title: '删除'
}] }]
//菜单被点击的事件 //菜单被点击的事件
,click: function(obj){ ,click: function(obj){
table.reload('test'); var checkStatus = table.checkStatus(id)
var data = checkStatus.data; // 获取选中的数据
switch(obj.id){
case 'add':
layer.open({
title: '添加',
type: 1,
area: ['80%','80%'],
content: '<div style="padding: 16px;">自定义表单元素</div>'
});
break;
case 'update':
layer.open({
title: '编辑',
type: 1,
area: ['80%','80%'],
content: '<div style="padding: 16px;">自定义表单元素</div>'
});
break;
case 'delete':
if(data.length === 0){
return layer.msg('请选择一行');
}
layer.msg('delete event');
break;
}
} }
}); });
} }
@ -177,11 +293,11 @@ layui.use(['table', 'dropdown'], function(){
} }
/* /*
,response: { ,request: { // 自定义请求参数名称
statusName: 'status' pageName: 'curr' //页码的参数名称，默认：page
,statusCode: 200 ,limitName: 'nums' //每页数据量的参数名，默认：limit
} }
,parseData: function(res){ ,parseData: function(res){ // 任意数据格式的解析
return { return {
"status": res.status "status": res.status
,"msg": res.message ,"msg": res.message
@ -209,19 +325,12 @@ layui.use(['table', 'dropdown'], function(){
}, true); }, true);
}); });
//工具栏事件 // 工具栏事件
table.on('toolbar(test)', function(obj){ table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id); var id = obj.config.id;
var checkStatus = table.checkStatus(id);
switch(obj.event){ switch(obj.event){
case 'add':
layer.msg('添加');
break;
case 'update':
layer.msg('编辑');
break;
case 'delete':
layer.msg('删除');
break;
case 'getCheckData': case 'getCheckData':
var data = checkStatus.data; var data = checkStatus.data;
layer.alert(layui.util.escape(JSON.stringify(data))); layer.alert(layui.util.escape(JSON.stringify(data)));
@ -231,7 +340,7 @@ layui.use(['table', 'dropdown'], function(){
layer.msg('选中了：'+ data.length + ' 个'); layer.msg('选中了：'+ data.length + ' 个');
break; break;
case 'getData': case 'getData':
var getData = table.getData(obj.config.id); var getData = table.getData(id);
console.log(getData); console.log(getData);
layer.alert(layui.util.escape(JSON.stringify(getData))); layer.alert(layui.util.escape(JSON.stringify(getData)));
break; break;
@ -241,40 +350,6 @@ layui.use(['table', 'dropdown'], function(){
case 'LAYTABLE_TIPS': case 'LAYTABLE_TIPS':
layer.alert('Table for layui-v'+ layui.v); layer.alert('Table for layui-v'+ layui.v);
break; break;
case 'reload':
//深度重载
var instReload = table.reload('test', {
where: {
abc: 123
,test: '新的 test1'
}
,defaultToolbar: ['print']
,page: {curr: 5, limit: 20}
,cols: ins1.config.cols
//,height: 300
//,url: 'x'
}, true);
break;
case 'reload2':
//浅重载
table.reload('test', {
where: {
efg: 'sasasas'
//,test: '新的 test2'
//,token: '新的 token2'
}
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'joinTime', title:'加入时间', width:120}
]]
//,height: 500
});
break;
}; };
}); });
@ -300,7 +375,27 @@ layui.use(['table', 'dropdown'], function(){
} }
}); });
//触发单元格编辑 //触发表格复选框选择
table.on('checkbox(test)', function(obj){
console.log(obj)
});
//触发表格单选框选择
table.on('radio(test)', function(obj){
console.log(obj)
});
// 行单击事件
table.on('row(test)', function(obj){
//console.log(obj);
//layer.closeAll('tips');
});
// 行双击事件
table.on('rowDouble(test)', function(obj){
console.log(obj);
});
// 单元格编辑事件
table.on('edit(test)', function(obj){ table.on('edit(test)', function(obj){
var field = obj.field //得到字段 var field = obj.field //得到字段
,value = obj.value //得到修改后的值 ,value = obj.value //得到修改后的值
@ -310,11 +405,6 @@ layui.use(['table', 'dropdown'], function(){
update[field] = value; update[field] = value;
obj.update(update); obj.update(update);
}); });
table.on('row(test)', function(obj){
//console.log(obj);
//layer.closeAll('tips');
});
}); });
</script> </script>
</body> </body>

81
examples/table.html
Unescape View File

@ -1,5 +1,3 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -10,14 +8,14 @@
<link rel="stylesheet" href="../src/css/layui.css"> <link rel="stylesheet" href="../src/css/layui.css">
<style> <style>
body{padding: 20px; /*overflow-y: scroll;*/} body{padding: 32px; /*overflow-y: scroll;*/}
</style> </style>
</head> </head>
<body> <body>
<div class="layui-btn-container"> <div class="layui-btn-container">
<a href="table.html" class="layui-btn layui-btn-primary">表格综合</a> <a href="table.html" class="layui-btn layui-btn-primary layui-border-green">表格综合</a>
<a href="table-test.html" class="layui-btn">表格测试</a> <a href="table-test.html" class="layui-btn">表格操作</a>
<a href="table-static.html" class="layui-btn">静态表格</a> <a href="table-static.html" class="layui-btn">静态表格</a>
</div> </div>
@ -184,23 +182,9 @@
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.13/layui.js"></script> <script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.13/layui.js"></script>
<script> <script>
layui.use(['table', 'dropdown'], function(){ layui.use('table', function(){
var table = layui.table var $ = layui.$;
,$ = layui.$ var table = layui.table;
,laytpl = layui.laytpl
,dropdown = layui.dropdown;
//全局设定某参数
table.set({
where: {
token: '全局的 token'
,access: '全局的 access'
}
//,defaultToolbar: ['filter']
,limit: 30
//,url: 'list'
//,height: 300
});
table.render({ table.render({
@ -235,60 +219,9 @@ layui.use(['table', 'dropdown'], function(){
]] ]]
}); });
//触发表格行点击
table.on('tr', function(obj){
console.log(obj)
});
//触发表格复选框选择
table.on('checkbox(test)', function(obj){
console.log(obj)
});
//触发表格单选框选择
table.on('radio(test)', function(obj){
console.log(obj)
});
//触发表格单选框选择
table.on('rowDouble(test)', function(obj){
console.log(obj);
});
//触发单元格编辑
table.on('edit(test)', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有键值
,field = obj.field; //得到字段
console.log(obj)
});
//触发行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
}
});
//return; //return;
//直接赋值数据 // 直接赋值数据
table.render({ table.render({
elem: '#demo' elem: '#demo'
//,width: 900 //,width: 900

12
src/modules/form.js
Unescape View File

@ -620,8 +620,8 @@ layui.define('layer', function(exports){
}); });
} }
}; };
if (layui._typeof(type) === 'object') { if (layui.type(type) === 'object') {
// jquery对象 // jquery 对象
type.each(function (index, item) { type.each(function (index, item) {
var elem = $(item); var elem = $(item);
if (!elem.closest(ELEM).length) { if (!elem.closest(ELEM).length) {
@ -650,13 +650,13 @@ layui.define('layer', function(exports){
}; };
// verifyElem: 要验证的节点或者范围 返回：验证通过返回true，否则返回false // verifyElem: 要验证的节点或者范围 返回：验证通过返回true，否则返回false
Form.prototype.doVerify = function(verifyElem){ Form.prototype.validate = function(verifyElem){
var stop = null //验证不通过状态 var stop = null //验证不通过状态
,verify = form.config.verify //验证规则 ,verify = form.config.verify //验证规则
,DANGER = 'layui-form-danger' //警示样式 ,DANGER = 'layui-form-danger' //警示样式
if (layui.type(verifyElem) !== 'object') { // 不符合要求的格式直接判通过 if (layui.type(verifyElem) !== 'object') { // 不符合要求的格式直接判通过
hint.error('doVerify: 参数错误'); hint.error('validate: 参数错误');
return true; return true;
} }
if (!verifyElem.attr('lay-verify')) { if (!verifyElem.attr('lay-verify')) {
@ -720,7 +720,7 @@ layui.define('layer', function(exports){
} else { //移动设备定位 } else { //移动设备定位
$dom.scrollTop(function(){ $dom.scrollTop(function(){
try { try {
return (isForm2Elem ? othis.next() : othis).focus().offset().top - 15 return (isForm2Elem ? othis.next() : othis).offset().top - 15
} catch(e){ } catch(e){
return 0; return 0;
} }
@ -748,7 +748,7 @@ layui.define('layer', function(exports){
,filter = button.attr('lay-filter'); //获取过滤器 ,filter = button.attr('lay-filter'); //获取过滤器
//开始校验 //开始校验
if(!form.doVerify(verifyElem)) return false; if(!form.validate(verifyElem)) return false;
//获取当前表单值 //获取当前表单值
field = form.getValue(null, elem); field = form.getValue(null, elem);

71
src/modules/table.js
Unescape View File

@ -263,7 +263,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
}; };
//表格渲染 //表格渲染
Class.prototype.render = function(){ Class.prototype.render = function(type){
var that = this var that = this
,options = that.config; ,options = that.config;
@ -298,6 +298,11 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
if(!options.elem[0]) return that; if(!options.elem[0]) return that;
// 仅重载数据
if(type === 'reloadData'){
return that.pullData(that.page); //请求数据
}
//高度铺满：full-差距值 //高度铺满：full-差距值
if(options.height && /^full-\d+$/.test(options.height)){ if(options.height && /^full-\d+$/.test(options.height)){
that.fullHeightGap = options.height.split('-')[1]; that.fullHeightGap = options.height.split('-')[1];
@ -665,7 +670,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
}; };
//表格重载 //表格重载
Class.prototype.reload = function(options, deep){ Class.prototype.reload = function(options, deep, type){
var that = this; var that = this;
options = options || {}; options = options || {};
@ -680,7 +685,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
that.config = $.extend(deep, {}, that.config, options); that.config = $.extend(deep, {}, that.config, options);
//执行渲染 //执行渲染
that.render(); that.render(type);
}; };
//异常提示 //异常提示
@ -2086,61 +2091,35 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
} }
}; };
//表格重载 // 重载
table.reload = function(id, options, deep){ table.reload = function(id, options, deep, type){
var config = getThisTableConfig(id); //获取当前实例配置项 var config = getThisTableConfig(id); //获取当前实例配置项
if(!config) return; if(!config) return;
var that = thisTable.that[id]; var that = thisTable.that[id];
that.reload(options, deep); that.reload(options, deep, type);
return thisTable.call(that); return thisTable.call(that);
}; };
//reloadData支持的的参数名单 // 仅重载数据
var dataParams = ['data', 'url', 'where', 'page', 'request', 'response', 'parseData', 'limit']; table.reloadData = function(){
var dataParamsRegExp = new RegExp('^(' + dataParams.join('|') + ')$') var args = $.extend([], arguments);
//重载数据 options只允许跟数据请求相关的配置信息 args[3] = 'reloadData';
table.reloadData = function(id, options, deep){
var config = getThisTableConfig(id); //获取当前实例配置项
if (!config) return;
var that = thisTable.that[id]; // 过滤与数据无关的参数
options = options || {}; var dataParams = [
'data', 'url', 'where', 'page', 'limit',
if (options.page !== undefined && !!options.page !== !!config.page) { 'request', 'response', 'parseData'
// 如果是否分页发生了改变 ];
hint.error('reloadData不允许对是否分页进行切换（从不分页到分页的切换，反之亦然）,如果需要请使用reload重载'); layui.each(args[1], function (key, value) {
delete options.page; if(dataParams.indexOf(key) === -1){
} delete args[1][key];
//过滤options只留下跟数据请求相关的参数
layui.each(options, function (_key, _value) {
if (!dataParamsRegExp.test(_key)) {
delete options[_key];
} }
}); });
if (options.page !== undefined) { // 针对page组件的特殊处理
if (typeof options.page === 'object') {
options.page.curr && (that.page = options.page.curr);
delete options.elem;
delete options.jump;
} else if (options.page) {
options.page = {};
}
$.extend(true, that.config, {page: options.page});
delete options.page;
}
if (options.data && options.data.constructor === Array) delete that.config.data;
deep ? $.extend(true, that.config, options) : $.extend(that.config, options);
if (!that.config.page) {
that.page = 1;
}
that.loading();
that.pullData(that.page);
return thisTable.call(that);
}
return table.reload.apply(null, args);
};
//核心入口 //核心入口
table.render = function(options){ table.render = function(options){

Write Preview
Loading…
Cancel
Save