update
This commit is contained in:
贤心
parent
c49197bb9f
commit
b400a9befb
@ -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 的后续，**它将继续陪伴着仍然需要它的人**。
|
||||||
|
|||||||
@ -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
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>
|
<!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,11 +73,11 @@
|
|||||||
<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({
|
||||||
@ -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({
|
dropdown.render({
|
||||||
elem: '#dropdown' //可绑定在任意元素中，此处以上述按钮为例
|
elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
|
||||||
,data: [{
|
,data: [{
|
||||||
id: 0,
|
id: 'reload',
|
||||||
title: '刷新'
|
title: '重载 - 默认（参数重置）'
|
||||||
|
},{
|
||||||
|
id: 'reload-deep',
|
||||||
|
title: '重载 - 深度（参数叠加）'
|
||||||
|
},{
|
||||||
|
id: 'reloadData',
|
||||||
|
title: '数据重载 - 默认（参数重置）'
|
||||||
|
},{
|
||||||
|
id: 'reloadData-deep',
|
||||||
|
title: '数据重载 - 深度（参数叠加）'
|
||||||
}]
|
}]
|
||||||
// 菜单被点击的事件
|
// 菜单被点击的事件
|
||||||
,click: function(obj){
|
,click: function(obj){
|
||||||
table.reload('test');
|
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){
|
||||||
|
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
|
||||||
@ -211,17 +327,10 @@ layui.use(['table', 'dropdown'], function(){
|
|||||||
|
|
||||||
// 工具栏事件
|
// 工具栏事件
|
||||||
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>
|
||||||
|
|||||||
@ -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,57 +219,6 @@ 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;
|
||||||
|
|
||||||
// 直接赋值数据
|
// 直接赋值数据
|
||||||
|
|||||||
@ -620,7 +620,7 @@ 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);
|
||||||
@ -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);
|
||||||
|
|||||||
@ -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){
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user