update
This commit is contained in:
贤心
parent
c49197bb9f
commit
b400a9befb
22
README.md
22
README.md
@ -25,12 +25,12 @@
|
||||
|
||||
---
|
||||
|
||||
layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端的各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
|
||||
Layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。Layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端的各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
|
||||
|
||||
|
||||
## 快速上手
|
||||
|
||||
获得 layui 后，将其完整地部署到你的静态资源项目目录，你只需要引入下述两个文件：
|
||||
获得 Layui 后，将其完整地部署到你的静态资源项目目录，你只需要引入下述两个文件：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
@ -47,14 +47,14 @@ layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范
|
||||
|
||||
<script src="./layui/layui.js"></script>
|
||||
<script>
|
||||
// 使用组件
|
||||
layui.use(['layer', 'form'], function(){
|
||||
var layer = layui.layer;
|
||||
var form = layui.form;
|
||||
|
||||
// 欢迎语
|
||||
layer.msg('Hello World');
|
||||
});
|
||||
// 使用组件
|
||||
layui.use(['layer', 'form'], function(){
|
||||
var layer = layui.layer;
|
||||
var form = layui.form;
|
||||
|
||||
// 欢迎语
|
||||
layer.msg('Hello World');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -72,4 +72,4 @@ layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范
|
||||
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>
|
||||
|
||||
鉴于 layui 相对庞大的受众群体，从此 Github 和 Gitee 平台将支撑起 layui 的后续，**它将继续陪伴着仍然需要它的人**。
|
||||
鉴于 Layui 相对庞大的受众群体，从此 Github 和 Gitee 平台将支撑起 Layui 的后续，**它将继续陪伴着仍然需要它的人**。
|
||||
|
||||
@ -7,14 +7,14 @@
|
||||
}
|
||||
,"data": [{
|
||||
"id": "10001"
|
||||
,"username": "杜甫"
|
||||
,"username": "杜甫123"
|
||||
,"email": "test1@email.com"
|
||||
,"sex": "<strong>男</strong>"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "鼠标移动到此处，可以通过点击单元格右侧的下拉图标，查看到被隐藏的全部内容。"
|
||||
,"experience": 7
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": null
|
||||
,"logins": 0
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10002"
|
||||
@ -34,7 +34,7 @@
|
||||
,"email": "test3@email.com"
|
||||
,"sex": "男"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "人生恰似一场修行<br>1<br>1<br>1<br>1<br>1<br>1"
|
||||
,"sign": "人生恰似一场修行"
|
||||
,"experience": 8
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": null
|
||||
|
||||
107
examples/table-static.html
Normal file
107
examples/table-static.html
Normal 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>
|
||||
@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@ -8,16 +6,15 @@
|
||||
<title>表格操作 - layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 20px; /*overflow-y: scroll;*/}
|
||||
body {padding: 32px; /*overflow-y: scroll;*/}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@ -25,14 +22,17 @@
|
||||
<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="getData">获取当前页所有数据</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="dropdown">
|
||||
更多菜单
|
||||
<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" id="reloadTest">
|
||||
重载测试
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm" id="moreTest">
|
||||
更多测试
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
@ -73,13 +73,13 @@
|
||||
<script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.5.3/layui.js" charset="utf-8"></script>
|
||||
<script>
|
||||
layui.use(['table', 'dropdown'], function(){
|
||||
var table = layui.table
|
||||
,$ = layui.$
|
||||
,laytpl = layui.laytpl
|
||||
,dropdown = layui.dropdown
|
||||
,form = layui.form;
|
||||
var $ = layui.$;
|
||||
var table = layui.table;
|
||||
var laytpl = layui.laytpl;
|
||||
var dropdown = layui.dropdown;
|
||||
var form = layui.form;
|
||||
|
||||
//全局设定某参数
|
||||
// 全局设定某参数
|
||||
table.set({
|
||||
where: {
|
||||
token: '默认 token 参数'
|
||||
@ -156,18 +156,134 @@ layui.use(['table', 'dropdown'], function(){
|
||||
,key: 'experience'
|
||||
,order: 'asc'
|
||||
}
|
||||
|
||||
,done: function(){
|
||||
//下拉菜单
|
||||
var id = this.id;
|
||||
|
||||
// 重载测试
|
||||
dropdown.render({
|
||||
elem: '#dropdown' //可绑定在任意元素中，此处以上述按钮为例
|
||||
elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
|
||||
,data: [{
|
||||
id: 0,
|
||||
title: '刷新'
|
||||
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({
|
||||
elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例
|
||||
,data: [{
|
||||
id: 'add',
|
||||
title: '添加'
|
||||
},{
|
||||
id: 'update',
|
||||
title: '编辑'
|
||||
},{
|
||||
id: 'delete',
|
||||
title: '删除'
|
||||
}]
|
||||
//菜单被点击的事件
|
||||
,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: {
|
||||
statusName: 'status'
|
||||
,statusCode: 200
|
||||
,request: { // 自定义请求参数名称
|
||||
pageName: 'curr' //页码的参数名称，默认：page
|
||||
,limitName: 'nums' //每页数据量的参数名，默认：limit
|
||||
}
|
||||
,parseData: function(res){
|
||||
,parseData: function(res){ // 任意数据格式的解析
|
||||
return {
|
||||
"status": res.status
|
||||
,"msg": res.message
|
||||
@ -209,19 +325,12 @@ layui.use(['table', 'dropdown'], function(){
|
||||
}, true);
|
||||
});
|
||||
|
||||
//工具栏事件
|
||||
// 工具栏事件
|
||||
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){
|
||||
case 'add':
|
||||
layer.msg('添加');
|
||||
break;
|
||||
case 'update':
|
||||
layer.msg('编辑');
|
||||
break;
|
||||
case 'delete':
|
||||
layer.msg('删除');
|
||||
break;
|
||||
case 'getCheckData':
|
||||
var data = checkStatus.data;
|
||||
layer.alert(layui.util.escape(JSON.stringify(data)));
|
||||
@ -231,7 +340,7 @@ layui.use(['table', 'dropdown'], function(){
|
||||
layer.msg('选中了：'+ data.length + ' 个');
|
||||
break;
|
||||
case 'getData':
|
||||
var getData = table.getData(obj.config.id);
|
||||
var getData = table.getData(id);
|
||||
console.log(getData);
|
||||
layer.alert(layui.util.escape(JSON.stringify(getData)));
|
||||
break;
|
||||
@ -241,40 +350,6 @@ layui.use(['table', 'dropdown'], function(){
|
||||
case 'LAYTABLE_TIPS':
|
||||
layer.alert('Table for layui-v'+ layui.v);
|
||||
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){
|
||||
var field = obj.field //得到字段
|
||||
,value = obj.value //得到修改后的值
|
||||
@ -310,11 +405,6 @@ layui.use(['table', 'dropdown'], function(){
|
||||
update[field] = value;
|
||||
obj.update(update);
|
||||
});
|
||||
|
||||
table.on('row(test)', function(obj){
|
||||
//console.log(obj);
|
||||
//layer.closeAll('tips');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@ -10,14 +8,14 @@
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 20px; /*overflow-y: scroll;*/}
|
||||
body{padding: 32px; /*overflow-y: scroll;*/}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<a href="table.html" class="layui-btn layui-btn-primary">表格综合</a>
|
||||
<a href="table-test.html" class="layui-btn">表格测试</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-static.html" class="layui-btn">静态表格</a>
|
||||
</div>
|
||||
|
||||
@ -184,24 +182,10 @@
|
||||
|
||||
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.13/layui.js"></script>
|
||||
<script>
|
||||
layui.use(['table', 'dropdown'], function(){
|
||||
var table = layui.table
|
||||
,$ = layui.$
|
||||
,laytpl = layui.laytpl
|
||||
,dropdown = layui.dropdown;
|
||||
|
||||
//全局设定某参数
|
||||
table.set({
|
||||
where: {
|
||||
token: '全局的 token'
|
||||
,access: '全局的 access'
|
||||
}
|
||||
//,defaultToolbar: ['filter']
|
||||
,limit: 30
|
||||
//,url: 'list'
|
||||
//,height: 300
|
||||
});
|
||||
|
||||
layui.use('table', function(){
|
||||
var $ = layui.$;
|
||||
var table = layui.table;
|
||||
|
||||
|
||||
table.render({
|
||||
elem: '#test2'
|
||||
@ -234,61 +218,10 @@ 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;
|
||||
|
||||
//直接赋值数据
|
||||
// 直接赋值数据
|
||||
table.render({
|
||||
elem: '#demo'
|
||||
//,width: 900
|
||||
|
||||
@ -620,8 +620,8 @@ layui.define('layer', function(exports){
|
||||
});
|
||||
}
|
||||
};
|
||||
if (layui._typeof(type) === 'object') {
|
||||
// jquery对象
|
||||
if (layui.type(type) === 'object') {
|
||||
// jquery 对象
|
||||
type.each(function (index, item) {
|
||||
var elem = $(item);
|
||||
if (!elem.closest(ELEM).length) {
|
||||
@ -650,13 +650,13 @@ layui.define('layer', function(exports){
|
||||
};
|
||||
|
||||
// verifyElem: 要验证的节点或者范围 返回：验证通过返回true，否则返回false
|
||||
Form.prototype.doVerify = function(verifyElem){
|
||||
Form.prototype.validate = function(verifyElem){
|
||||
var stop = null //验证不通过状态
|
||||
,verify = form.config.verify //验证规则
|
||||
,DANGER = 'layui-form-danger' //警示样式
|
||||
|
||||
if (layui.type(verifyElem) !== 'object') { // 不符合要求的格式直接判通过
|
||||
hint.error('doVerify: 参数错误');
|
||||
hint.error('validate: 参数错误');
|
||||
return true;
|
||||
}
|
||||
if (!verifyElem.attr('lay-verify')) {
|
||||
@ -720,7 +720,7 @@ layui.define('layer', function(exports){
|
||||
} else { //移动设备定位
|
||||
$dom.scrollTop(function(){
|
||||
try {
|
||||
return (isForm2Elem ? othis.next() : othis).focus().offset().top - 15
|
||||
return (isForm2Elem ? othis.next() : othis).offset().top - 15
|
||||
} catch(e){
|
||||
return 0;
|
||||
}
|
||||
@ -748,7 +748,7 @@ layui.define('layer', function(exports){
|
||||
,filter = button.attr('lay-filter'); //获取过滤器
|
||||
|
||||
//开始校验
|
||||
if(!form.doVerify(verifyElem)) return false;
|
||||
if(!form.validate(verifyElem)) return false;
|
||||
|
||||
//获取当前表单值
|
||||
field = form.getValue(null, elem);
|
||||
|
||||
@ -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
|
||||
,options = that.config;
|
||||
|
||||
@ -297,6 +297,11 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
}
|
||||
|
||||
if(!options.elem[0]) return that;
|
||||
|
||||
// 仅重载数据
|
||||
if(type === 'reloadData'){
|
||||
return that.pullData(that.page); //请求数据
|
||||
}
|
||||
|
||||
//高度铺满：full-差距值
|
||||
if(options.height && /^full-\d+$/.test(options.height)){
|
||||
@ -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;
|
||||
|
||||
options = options || {};
|
||||
@ -680,7 +685,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
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); //获取当前实例配置项
|
||||
if(!config) return;
|
||||
|
||||
var that = thisTable.that[id];
|
||||
that.reload(options, deep);
|
||||
that.reload(options, deep, type);
|
||||
|
||||
return thisTable.call(that);
|
||||
};
|
||||
|
||||
//reloadData支持的的参数名单
|
||||
var dataParams = ['data', 'url', 'where', 'page', 'request', 'response', 'parseData', 'limit'];
|
||||
var dataParamsRegExp = new RegExp('^(' + dataParams.join('|') + ')$')
|
||||
//重载数据 options只允许跟数据请求相关的配置信息
|
||||
table.reloadData = function(id, options, deep){
|
||||
var config = getThisTableConfig(id); //获取当前实例配置项
|
||||
if (!config) return;
|
||||
// 仅重载数据
|
||||
table.reloadData = function(){
|
||||
var args = $.extend([], arguments);
|
||||
args[3] = 'reloadData';
|
||||
|
||||
var that = thisTable.that[id];
|
||||
options = options || {};
|
||||
|
||||
if (options.page !== undefined && !!options.page !== !!config.page) {
|
||||
// 如果是否分页发生了改变
|
||||
hint.error('reloadData不允许对是否分页进行切换（从不分页到分页的切换，反之亦然）,如果需要请使用reload重载');
|
||||
delete options.page;
|
||||
}
|
||||
//过滤options只留下跟数据请求相关的参数
|
||||
layui.each(options, function (_key, _value) {
|
||||
if (!dataParamsRegExp.test(_key)) {
|
||||
delete options[_key];
|
||||
// 过滤与数据无关的参数
|
||||
var dataParams = [
|
||||
'data', 'url', 'where', 'page', 'limit',
|
||||
'request', 'response', 'parseData'
|
||||
];
|
||||
layui.each(args[1], function (key, value) {
|
||||
if(dataParams.indexOf(key) === -1){
|
||||
delete args[1][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){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user