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

Merge pull request #1060 from layui/main 

Merge 2.x
pull/1061/head^2
贤心 2022-07-03 21:25:29 +08:00 committed by GitHub
parent b9acac35a4 2ad64376fe
commit c3a0678403
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 539 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
DISCLAIMER.md
View File

@ -1,14 +1,14 @@
# Layui 《免责声明》
> 任何用户在使用由 layui 技术开发团队（以下简称「本团队」）研发的系列开源界面框架（以下简称「layui 开源界面框架」）前，请您仔细阅读并透彻理解本声明。您可以选择不使用 layui 开源界面框架，若您一旦使用 layui 开源界面框架，您的使用行为即被视为对本声明全部内容的认可和接受。
> 任何用户在使用由 layui 技术开发团队（以下简称「本团队」）研发的系列开源界面组件库（以下简称「layui 开源界面组件库」）前，请您仔细阅读并透彻理解本声明。您可以选择不使用 layui 开源界面组件库，若您一旦使用 layui 开源界面组件库，您的使用行为即被视为对本声明全部内容的认可和接受。
1. layui 开源界面框架是一款开源免费的 Web UI 纯静态框架 ，主要用于更高效地开发网页界面。且 layui 开源界面框架并不具备「互联网接入、网络数据存储、通讯传输以及窃取用户隐私」中的任何一项与用户数据等信息相关的动态功能，layui 开源界面框架仅是 UI 组件或素材类的本地资源。
2. layui 开源界面框架仅属于 Web 前端的 UI 组件库，并不涉及任何后台程序代码；其尊重并保护所有用户的个人隐私权，不窃取任何用户计算机中的信息。更不具备用户数据存储等网络传输功能。
3. 您承诺秉着合法、合理的原则使用 layui 开源界面框架，不利用 layui 开源界面框架进行任何违法、侵害他人合法利益等恶意的行为，亦不将 layui 开源界面框架运用于任何违反我国法律法规的 Web 平台。
4. 任何单位或个人因下载使用 layui 开源界面框架而产生的任何意外、疏忽、合约毁坏、诽谤、版权或知识产权侵犯及其造成的损失 (包括但不限于直接、间接、附带或衍生的损失等)，本团队不承担任何法律责任。
5. 用户明确并同意本声明条款列举的全部内容，对使用 layui 开源界面框架可能存在的风险和相关后果将完全由用户自行承担，本团队不承担任何法律责任。
6. 任何单位或个人在阅读本免责声明后，应在《MIT 开源许可证》所允许的范围内进行合法的发布、传播和使用 layui 开源界面框架等行为，若违反本免责声明条款或违反法律法规所造成的法律责任(包括但不限于民事赔偿和刑事责任），由违约者自行承担。
7. 本团队对 layui 开源界面框架拥有知识产权（包括但不限于商标权、专利权、著作权、商业秘密等），上述产品均受到相关法律法规的保护。
8. 任何单位或个人不得在未经本团队书面授权的情况下对 layui 开源界面框架本身申请相关的知识产权。
1. layui 开源界面组件库是一款开源免费的 Web UI 纯静态框架 ，主要用于更高效地开发网页界面。且 layui 开源界面组件库并不具备「互联网接入、网络数据存储、通讯传输以及窃取用户隐私」中的任何一项与用户数据等信息相关的动态功能，layui 开源界面组件库仅是 UI 组件或素材类的本地资源。
2. layui 开源界面组件库仅属于 Web 前端的 UI 组件库，并不涉及任何后台程序代码；其尊重并保护所有用户的个人隐私权，不窃取任何用户计算机中的信息。更不具备用户数据存储等网络传输功能。
3. 您承诺秉着合法、合理的原则使用 layui 开源界面组件库，不利用 layui 开源界面组件库进行任何违法、侵害他人合法利益等恶意的行为，亦不将 layui 开源界面组件库运用于任何违反我国法律法规的 Web 平台。
4. 任何单位或个人因下载使用 layui 开源界面组件库而产生的任何意外、疏忽、合约毁坏、诽谤、版权或知识产权侵犯及其造成的损失 (包括但不限于直接、间接、附带或衍生的损失等)，本团队不承担任何法律责任。
5. 用户明确并同意本声明条款列举的全部内容，对使用 layui 开源界面组件库可能存在的风险和相关后果将完全由用户自行承担，本团队不承担任何法律责任。
6. 任何单位或个人在阅读本免责声明后，应在《MIT 开源许可证》所允许的范围内进行合法的发布、传播和使用 layui 开源界面组件库等行为，若违反本免责声明条款或违反法律法规所造成的法律责任(包括但不限于民事赔偿和刑事责任），由违约者自行承担。
7. 本团队对 layui 开源界面组件库拥有知识产权（包括但不限于商标权、专利权、著作权、商业秘密等），上述产品均受到相关法律法规的保护。
8. 任何单位或个人不得在未经本团队书面授权的情况下对 layui 开源界面组件库本身申请相关的知识产权。
9. 如果本声明的任何部分被认为无效或不可执行，则该部分将被解释为反映本团队的初衷，其余部分仍具有完全效力。不可执行的部分声明，并不构成我们放弃执行该声明的权利。
10. 本团队有权随时对本声明条款及附件内容进行单方面的变更，并以消息推送、网页公告等方式予以公布，公布后立即自动生效，无需另行单独通知；若您在本声明内容公告变更后继续使用的，表示您已充分阅读、理解并接受修改后的声明内容。

2
dist/css/layui.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/layui.js vendored
View File

File diff suppressed because one or more lines are too long

199
examples/code.html
View File

@ -1,129 +1,132 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>代码修饰器 - layui</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Code blocks adorn - Layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 50px 100px;}
pre{margin-bottom: 20px;}
</style>
<link href="../src/css/layui.css" rel="stylesheet">
<style>
body{padding: 32px;}
pre{margin-bottom: 20px;}
</style>
</head>
<body>
<pre class="layui-code" lay-title="JavaScript" lay-height="300px">
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
for(var i = 0; i < hashs.length; i++){
item = hashs[i].split('=');
/^\w+=/.test(hashs[i]) ? function(){
if(item[0] !== 'dir'){
param[item[0]] = item[1];
}
}() : param.dir.push(hashs[i]);
item = null;
}
return param;
};
<pre class="layui-code" lay-height="300px">
// 在里面存放任意的文本内容
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
code line
</pre>
<pre class="layui-code" lay-skin="notepad">
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
for(var i = 0; i < hashs.length; i++){
item = hashs[i].split('=');
/^\w+=/.test(hashs[i]) ? function(){
if(item[0] !== 'dir'){
param[item[0]] = item[1];
}
}() : param.dir.push(hashs[i]);
item = null;
}
return param;
};
<pre class="layui-code" lay-options="{title: '不显示行号', ln: false}">
code line
code line
code line
code line
code line
code line
</pre>
<pre class="layui-code" lay-options="{title: '深色风格', skin: 'dark'}">
code line
code line
code line
code line
code line
code line
</pre>
<pre class="layui-code" lay-title="嵌套">
code line
code line
code line
code line
<pre class="layui-code" lay-options="{ln: false}">
code line
code line
code line
<pre class="layui-code">
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
<pre class="layui-code">
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
code line
code line
code line
</pre>
</pre>
</pre>
<pre class="layui-code" lay-skin="notepad">
//路由
LAY.fn.router = function(hash){
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
for(var i = 0; i < hashs.length; i++){
item = hashs[i].split('=');
/^\w+=/.test(hashs[i]) ? function(){
if(item[0] !== 'dir'){
param[item[0]] = item[1];
}
}() : param.dir.push(hashs[i]);
item = null;
}
return param;
};
<pre class="layui-code" lay-skin="notepad">
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
<pre class="layui-code" lay-skin="notepad">
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
<pre class="layui-code" lay-skin="notepad">
//代码中的代码
var hashs = (hash || location.hash).replace(/^#/, '').split('/') || [];
var item, param = {
dir: []
};
<pre class="layui-code" lay-options="{skin: 'dark'}">
code line
code line
code line
code line
code line
code line
<pre class="layui-code" lay-options="{skin: 'dark'}">
code line
code line
code line
code line
code line
code line
<pre class="layui-code" lay-options="{skin: 'dark', ln: false}">
code line
code line
code line
code line
code line
code line
</pre>
</pre>
</pre>
</pre>
<pre class="layui-code" lay-options="{encode: true}">
<div>
123
</div>
</pre>
<pre class="layui-code" lay-encode="true">
<div>
123
</div>
<pre class="layui-code" lay-about="code">
About
</pre>
<pre id="custom1">
custom more about
</pre>
<script src="../src/layui.js"></script>
<script>
layui.use('code', function(){
layui.code();
});
// 通用实例，根据元素属性定制化参数
layui.code({
//about: 'code' // 右上角默认显示 code
});
// custom more about
layui.code({
elem: '#custom1',
about: [
'<a href="javascript:;">复制</a>',
'<a href="about:blank" target="_blank">跳转</a>'
].join('')
})
});
</script>
</body>
</html>

25
examples/json/table/demo1.json
View File

@ -3,7 +3,7 @@
,"msg": ""
,"count": 3000000
,"totalRow": {
"experience": "777"
"checkin": "777"
}
,"data": [{
"id": "10001"
@ -11,11 +11,12 @@
,"email": "test1@email.com"
,"sex": "<strong>男</strong>"
,"city": "浙江杭州"
,"sign": "鼠标移动到此处，可以通过点击单元格右侧的下拉图标，查看到被隐藏的全部内容。"
,"sign": "舍南舍北皆春水，但见群鸥日日来。花径不曾缘客扫，蓬门今始为君开。盘飧市远无兼味，樽酒家贫只旧醅。肯与邻翁相对饮，隔篱呼取尽余杯。"
,"experience": 7
,"ip": "192.168.0.8"
,"logins": 0
,"checkin": 0
,"joinTime": "2016-10-14"
,"LAY_DISABLED": true
}, {
"id": "10002"
,"username": "李白"
@ -25,19 +26,19 @@
,"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
,"experience": 9
,"ip": "192.168.0.8"
,"logins": "106"
,"checkin": "106"
,"joinTime": "2016-10-14"
,"LAY_CHECKED": true
}, {
}, {
"id": "10003"
,"username": "苏轼"
,"email": "test3@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
,"sign": "大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。"
,"experience": 8
,"ip": "192.168.0.8"
,"logins": null
,"checkin": null
,"joinTime": "2016-10-14"
}, {
"id": "10004"
@ -48,7 +49,7 @@
,"sign": "人生恰似一场修行"
,"experience": 6
,"ip": "192.168.0.8"
,"logins": "106"
,"checkin": "106"
,"joinTime": "2016-10-14"
}, {
"id": "10005"
@ -59,7 +60,7 @@
,"sign": "人生恰似一场修行"
,"experience": 64
,"ip": "192.168.0.8"
,"logins": "106"
,"checkin": "106"
,"joinTime": "2016-10-14"
}, {
"id": "10006"
@ -70,7 +71,7 @@
,"sign": "人生恰似一场修行"
,"experience": 65
,"ip": "192.168.0.8"
,"logins": "106"
,"checkin": "106"
,"joinTime": "2016-10-14"
}, {
"id": "10007"
@ -81,7 +82,7 @@
,"sign": "人生恰似一场修行"
,"experience": 49
,"ip": "192.168.0.8"
,"logins": "106"
,"checkin": "106"
,"joinTime": "2016-10-14"
}, {
"id": "10008"
@ -92,7 +93,7 @@
,"sign": "人生恰似一场修行"
,"experience": 5
,"ip": "192.168.0.8"
,"logins": "106"
,"checkin": "106"
,"joinTime": "2016-10-14"
}]
}

51
examples/layedit.html
View File

@ -1,51 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>简单富文本编辑器 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 10px;}
</style>
</head>
<body>
<div style="width: 800px;">
<form class="layui-form">
<div class="layui-form-item">
<textarea name="demo" id="demo" class="layui-hide">
<p><span>一个范围具有两个边界点，即一个开始点和一个结束点。每个边界点由一个节点和那个节点的偏移量指定。该节点通常是&nbsp;</span><a href="http://www.w3school.com.cn/xmldom/dom_element.asp" title="XML DOM - Element 对象">Element 节点</a><span>、</span><a href="http://www.w3school.com.cn/xmldom/dom_document.asp" title="XML DOM - Document 对象">Document 节点</a><span>或&nbsp;</span><a href="http://www.w3school.com.cn/xmldom/dom_text.asp" title="XML DOM - Text 对象">Text 节点</a><span>。对于 Element 节点和 Document 节点，偏移量指该节点的子节点。偏移量为 0，说明边界点位于该节点的第一个子节点之前。偏移量为 1，说明边界点位于该节点的第一个子节点之后，第二个子节点之前。但如果边界节点是 Text 节点，偏移量则指的是文本中两个字符之间的位置。</span></p>
</textarea>
</div>
<button class="layui-btn">提交</button>
<a class="layui-btn" id="getChoose">获取选中内容</a>
</form>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use('layedit', function(){
var layedit = layui.layedit;
var index = layedit.build('demo', {
//hideTool: ['image']
uploadImage: {
url: 'json/upload/demoLayEdit.json'
,type: 'get'
}
//,tool: []
//,height: 100
});
getChoose.onclick = function(){
alert(layedit.getSelection(index));
};
});
</script>
</body>
</html>

103
examples/table-test.html
View File

@ -21,7 +21,6 @@
<script type="text/html" id="toolbarDemo">
<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>
@ -77,15 +76,36 @@
<table id="test" lay-filter="test"></table>
<script src="../src/layui.js"></script>
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.13/layui.js"></script>
<script>
(function(off){
if(!off) return;
layui.disuse('table').extend({
table: '{/}//ww:5018/layui/2.6.13/src/modules/table'
});
})();
layui.use(['table', 'dropdown'], function(){
var $ = layui.$;
var table = layui.table;
var laytpl = layui.laytpl;
var dropdown = layui.dropdown;
var form = layui.form;
// 仅用于各类测试的表头
var test_cols = [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'username', title:'用户名', width:120, edit: 'text'}
,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text'}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width: 120}
,{field:'sign', title:'签名'}
,{field: 'experience', title: '积分', width:80, sort: true, align:'center', totalRow: '{{ d.TOTAL_NUMS }} 😊'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]];
// 全局设定某参数
table.set({
where: {
@ -97,30 +117,32 @@ layui.use(['table', 'dropdown'], function(){
//,height: 300
});
$('#appendtest').append($('#TPL_appendtest').html())
table.init('appendtest');
//渲染
window.ins1 = table.render({
elem: '#test'
,height: 500
,height: 520
//,width: 600
,title: '用户数据表'
,url: 'json/table/demo1.json'
//,method: 'post'
,pagebar: '#pagebarDemo' // 分页栏模板
,lineStyle: 'height: 100px;' // 行样式
//,lineStyle: 'height: 95px;' // 行样式
,css: [ // 自定义样式
'.layui-table-page{text-align: right;}'
,'.layui-table-pagebar{float: left;}'
].join('')
//,className: '.demo-table-view'
//,size: 'lg'
//,size: 'sm'
//,skin: 'line'
//,autoSort: false //是否自动排序。如果否，则由服务端排序
//,loading: false
,totalRow: true
,page: true
,pagebar: '#pagebarDemo' // 分页栏模板
,page: !1 ? false : {
//curr: layui.data('tableCache').curr || 1 // 读取记录中的页码，赋值给起始页
}
,limit: 30
,toolbar: '#toolbarDemo'
,defaultToolbar: ['filter', 'exports', 'print', {
@ -129,18 +151,9 @@ layui.use(['table', 'dropdown'], function(){
,icon: 'layui-icon-tips'
}]
//,escape: false
,cols: !1 ? [[ //仅用于测试
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'username', title:'用户名', width:120, edit: 'text'}
,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text'}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width:120}
,{field:'sign', title:'签名'}
,{field: 'experience', title: '积分', width:80, sort: true, align:'center', totalRow: '{{ d.TOTAL_NUMS }} 😊'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]] : [[
,cols: !1 ? test_cols : [[
{type: 'checkbox', fixed: 'left'}
//,{type: 'numbers', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'username', title:'用户名', width:120, edit: 'text', templet: '#usernameTpl'}
,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text', templet: function(d){
@ -152,15 +165,16 @@ layui.use(['table', 'dropdown'], function(){
var td = obj.td(this.field); //获取当前 td
return td.find('select').val();
}}
,{field:'sign', title:'签名', edit: 'textarea'}
,{field: 'experience', title: '积分', width:80, sort: true, align:'center', totalRow: '{{ d.TOTAL_NUMS }} 😊', templet: '<div>{{ d.experience }} 分</div>'}
,{field:'ip', title:'IP', width: 120}
,{field:'logins', title:'登入次数', width: 100, sort: true, totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 次'}
,{field:'sign', title:'签名', minWidth: 200, style:'color: #5FB878', edit: 'textarea'}
,{field: 'experience', title: '积分', width: 100, sort: true, align:'center', totalRow: !1 ? '{{=d.LAY_COL.field}}' : '{{= d.TOTAL_NUMS }} 分 😊', templet: '<div><a href="" class="layui-table-link">{{ d.experience }}</a> 分</div>'}
,{field:'ip', title:'IP', width: 120, align: 'right'}
,{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'}
,{field:'joinTime', title:'加入时间', width: 120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width: 180}
]]
,initSort1: {
//,autoSort: false // 禁用前端自动排序，由服务的完成排序
,initSort11111: { // 初始排序状态
field: 'experience' //排序字段，对应 cols 设定的各字段名
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
@ -172,9 +186,17 @@ layui.use(['table', 'dropdown'], function(){
,key: 'experience'
,order: 'asc'
}
,done: function(){
,done: function(res, curr, count){
var id = this.id;
// 记录当前页码
/*
layui.data('tableCache', {
key: 'curr',
value: curr
});
*/
// 重载测试
dropdown.render({
elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
@ -326,19 +348,20 @@ layui.use(['table', 'dropdown'], function(){
//排序事件
table.on('sort(test)', function(obj){
console.log(obj);
//console.log(obj);
return;
//return;
layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
//服务端排序
table.reload('test', {
initSort: obj
//,page: {curr: 1} //重新从第一页开始
,where: { //重新请求服务端
key: obj.field //排序字段
,order: obj.type //排序方式
table.reloadData('test', {
//initSort: obj,
//page: {curr: 1}, //重新从第一页开始
where: { // 向服务端传入排序参数
key: obj.field, //排序字段
order: obj.type //排序方式
}
}, true);
});
});
// 工具栏事件
@ -351,10 +374,6 @@ layui.use(['table', 'dropdown'], function(){
var data = checkStatus.data;
layer.alert(layui.util.escape(JSON.stringify(data)));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'getData':
var getData = table.getData(id);
console.log(getData);

3
examples/table.html
View File

@ -201,6 +201,7 @@ layui.use('table', function(){
//,height: 300
,cellMinWidth: 80
//,skin: 'line'
//,size: 'lg'
,toolbar: true
,cols: [[
{field: 'id', hide: true}
@ -236,7 +237,7 @@ layui.use('table', function(){
,{field: 'sex', title: '性别', width: 80}
,{field: 'city', title: '城市', width: 100}
// ,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'experience', title: '积分', width: 80, sort: true, totalRow: true, totalRowDecimals: 3}
,{field: 'experience', title: '积分', width: 80, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'}
]]
,data: [{
"id": "10001"

4
gulpfile.js
View File

@ -1,6 +1,4 @@
/**
* Building Layui
*/
'use strict';
const pkg = require('./package.json');
const gulp = require('gulp');

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "layui",
"realname": "layui",
"version": "2.7.0",
"version": "2.7.2",
"description": "Classic modular Front-End UI library",
"main": "dist/layui.js",
"license": "MIT",

14
src/css/layui.css
View File

@ -723,6 +723,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-checkbox[lay-skin="primary"]:hover i{border-color: #5FB878; color: #fff;}
.layui-form-checked[lay-skin="primary"] i{border-color: #5FB878 !important; background-color: #5FB878; color: #fff;}
.layui-checkbox-disabled[lay-skin="primary"] span{background: none!important; color: #c2c2c2!important;}
.layui-form-checked.layui-checkbox-disabled[lay-skin="primary"] i{background: #eee!important; border-color: #eee!important;}
.layui-checkbox-disabled[lay-skin="primary"]:hover i{border-color: #d2d2d2;}
.layui-form-item .layui-form-checkbox[lay-skin="primary"]{margin-top: 10px;}
@ -893,10 +894,10 @@ a cite{font-style: normal; *cursor:pointer;}
/* 大表格 */.layui-table[lay-size="lg"] th,
.layui-table[lay-size="lg"] td{padding-top: 15px; padding-right: 30px; padding-bottom: 15px; padding-left: 30px;}
.layui-table-view .layui-table[lay-size="lg"] .layui-table-cell{height: 40px; line-height: 40px;}
.layui-table-view .layui-table[lay-size="lg"] .layui-table-cell{height: 50px; line-height: 40px;}
/* 小表格 */.layui-table[lay-size="sm"] th,
.layui-table[lay-size="sm"] td{padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; font-size: 12px;}
.layui-table-view .layui-table[lay-size="sm"] .layui-table-cell{height: 20px; line-height: 20px;}
.layui-table-view .layui-table[lay-size="sm"] .layui-table-cell{height: 30px; line-height: 20px;}
/* 数据表格 */
.layui-table[lay-data]{display: none;}
@ -950,6 +951,8 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-table-cell{height: 38px; line-height: 28px; padding: 6px 15px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;}
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{top: -1px; padding: 0;}
.layui-table-cell .layui-table-link{color: #01AAED;}
.layui-table-cell[align="center"]{-webkit-box-pack: center;}
.layui-table-cell[align="right"]{-webkit-box-pack: end;}
.laytable-cell-checkbox,
.laytable-cell-radio,
@ -986,13 +989,16 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-table-page .layui-laypage input{width: 40px;}
.layui-table-page .layui-laypage button{padding: 0 10px;}
.layui-table-page select{height: 18px;}
.layui-table-pagebar{float: right; line-height: 32px;}
.layui-table-pagebar{float: right; line-height: 23px;}
.layui-table-pagebar .layui-btn-sm{margin-top: -1px;}
.layui-table-pagebar .layui-btn-xs{margin-top: 2px;}
.layui-table-view select[lay-ignore]{display: inline-block;}
.layui-table-patch .layui-table-cell{padding: 0; width: 30px;}
.layui-table-edit{position: absolute; left: 0; top: 0; z-index: 900; min-width: 100%; min-height: 100%; padding: 0 14px 1px; border-radius: 0; box-shadow: 1px 1px 20px rgba(0,0,0,.15); background-color: #fff;}
.layui-table-edit{position: absolute; left: 0; top: 0; z-index: 900; min-width: 100%; min-height: 100%; padding: 5px 14px; border-radius: 0; box-shadow: 1px 1px 20px rgba(0,0,0,.15); background-color: #fff;}
.layui-table-edit:focus{border-color: #5FB878!important;}
input.layui-input.layui-table-edit{height: 100%;}
select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
.layui-table-view .layui-form-switch,
.layui-table-view .layui-form-checkbox,

33
src/css/modules/code.css
View File

@ -1,9 +1,5 @@
/**
@Name: layui.code
@Description：Classic modular front-end UI framework
@License：MIT
* code
*/
/* 加载就绪标志 */
@ -11,18 +7,25 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
/* 默认风格 */
.layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 13px;}
.layui-code-h3{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
.layui-code-h3 a{position: absolute; right: 10px; top: 0; color: #999;}
.layui-code-view .layui-code-ol{position: relative; overflow: auto;}
.layui-code-view .layui-code-ol li{position: relative; margin-left: 45px; line-height: 20px; padding: 0 10px; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;}
.layui-code-view .layui-code-ol li:first-child{padding-top: 10px;}
.layui-code-view .layui-code-ol li:last-child{padding-bottom: 10px;}
.layui-code-title{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
.layui-code-title > .layui-code-about{position: absolute; right: 10px; top: 0; color: #B7B7B7;}
.layui-code-about > a{padding-left: 10px;}
.layui-code-view > .layui-code-ol,
.layui-code-view > .layui-code-ul{position: relative; overflow: auto;}
.layui-code-view > .layui-code-ol > li{position: relative; margin-left: 45px; line-height: 20px; padding: 0 10px; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;}
.layui-code-view > .layui-code-ol > li:first-child,
.layui-code-view > .layui-code-ul > li:first-child{padding-top: 10px;}
.layui-code-view > .layui-code-ol > li:last-child,
.layui-code-view > .layui-code-ul > li:last-child{padding-bottom: 10px;}
.layui-code-view > .layui-code-ul > li{position: relative; line-height: 20px; padding: 0 10px; list-style-type: none; *list-style-type: none; background-color: #fff;}
.layui-code-view pre{margin: 0;}
/* notepadd++ 风格 */
.layui-code-notepad{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
.layui-code-notepad .layui-code-h3{border-bottom: none;}
.layui-code-notepad .layui-code-ol li{background-color: #3F3F3F; border-left: none;}
/* 深色风格 */
.layui-code-dark{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
.layui-code-dark > .layui-code-title{border-bottom: none;}
.layui-code-dark > .layui-code-ol > li,
.layui-code-dark > .layui-code-ul > li{background-color: #3F3F3F; border-left: none;}
.layui-code-dark > .layui-code-ul > li{margin-left: 6px;}
/* 代码预览 */
.layui-code-demo .layui-code{visibility: visible !important; margin: -15px; border-top: none; border-right: none; border-bottom: none;}

5
src/layui.js
View File

@ -15,7 +15,7 @@
}
,Layui = function(){
this.v = '2.7.0'; // layui 版本号
this.v = '2.7.2'; // layui 版本号
}
//识别预先可能定义的指定全局对象
@ -238,7 +238,7 @@
apps = that.isArray(apps) ? apps : [apps];
that.each(apps, function (index, item) {
if (!config.status[item]) {
return error('module ' + item + ' is not exist');
//return error('module ' + item + ' is not exist');
}
delete that[item];
delete modules[item];
@ -246,6 +246,7 @@
delete config.status[item];
delete config.modules[item];
});
return that;
};
//获取节点的 style 属性值

126
src/modules/code.js
View File

@ -1,63 +1,99 @@
/**
* code
* 代码区简易修饰
* 代码块简易修饰
*/
layui.define(['util'], function(exports){
layui.define(['lay', 'util'], function(exports){
"use strict";
var $ = layui.$;
var util = layui.util;
exports('code', function(options){
var elems = [];
var trim = function(str){
return $.trim(str).replace(/^\n|\n$/, '');
}
options = options || {};
options.elem = $(options.elem||'.layui-code');
options.lang = 'lang' in options ? options.lang : 'code';
options.elem.each(function(){
elems.push(this);
});
layui.each(elems.reverse(), function(index, item){
var ELEM_TITLE = 'layui-code-title';
// 默认参数项
var config = {
elem: '.layui-code', // 元素选择器
title: '&lt;/&gt;', // 标题
about: '', // 右上角信息
ln: true // 是否显示行号
};
var trim = function(str){
return $.trim(str).replace(/^\n|\n$/, '');
};
// export api
exports('code', function(options){
var opts = options = $.extend({}, config, options);
// 目标元素是否存在
options.elem = $(options.elem);
if(!options.elem[0]) return;
// 从内至外渲染
layui.each(options.elem.get().reverse(), function(index, item){
var othis = $(item);
var html = trim(othis.html());
// 合并属性上的参数，并兼容旧版本属性写法 lay-*
var options = $.extend({}, opts, lay.options(item), function(obj){
var attrs = ['title', 'height', 'encode', 'skin', 'about'];
layui.each(attrs, function(i, attr){
var value = othis.attr('lay-'+ attr);
if(typeof value === 'string'){
obj[attr] = value;
}
})
return obj;
}({}));
// 有序或无序列表
var listTag = options.ln ? 'ol' : 'ul';
var listElem = $('<'+ listTag +' class="layui-code-'+ listTag +'">');
// header
var headerElem = $('<div class="'+ ELEM_TITLE +'">');
// 添加组件 clasName
othis.addClass('layui-code-view layui-box');
// 自定义风格
if(options.skin){
if(options.skin === 'notepad') options.skin = 'dark';
othis.addClass('layui-code-'+ options.skin);
}
// 转义 HTML 标签
if(othis.attr('lay-encode') || options.encode){
html = util.escape(html);
if(options.encode) html = util.escape(html);
html = html.replace(/[\r\t\n]+/g, '</li><li>'); // 转义换行符
// 生成列表
othis.html(listElem.html('<li>' + html + '</li>'));
// 创建 header
if(!othis.children('.'+ ELEM_TITLE)[0]){
headerElem.html(options.title + (
options.about
? '<div class="layui-code-about">' + options.about + '</div>'
: ''
));
othis.prepend(headerElem);
}
othis.html('<ol class="layui-code-ol"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></ol>')
if(!othis.find('>.layui-code-h3')[0]){
othis.prepend('<h3 class="layui-code-h3">'+ (othis.attr('lay-title')||options.title||'&lt;/&gt;') + '<a href="javascript:;">'+ (othis.attr('lay-lang')||options.lang||'') +'</a>' + '</h3>');
}
var ol = othis.find('>.layui-code-ol');
othis.addClass('layui-box layui-code-view');
//识别皮肤
if(othis.attr('lay-skin') || options.skin){
othis.addClass('layui-code-' +(othis.attr('lay-skin') || options.skin));
}
//按行数适配左边距
if((ol.find('li').length/100|0) > 0){
ol.css('margin-left', (ol.find('li').length/100|0) + 'px');
}
//设置最大高度
if(othis.attr('lay-height') || options.height){
ol.css('max-height', othis.attr('lay-height') || options.height);
// 按行数适配左边距
(function(autoIncNums){
if(autoIncNums > 0){
listElem.css('margin-left', autoIncNums + 'px');
}
})(Math.floor(listElem.find('li').length/100));
// 限制最大高度
if(options.height){
listElem.css('max-height', options.height);
}
});
});
}).addcss('modules/code.css?v=2', 'skincodecss');
}).addcss('modules/code.css?v=3', 'skincodecss');

384
src/modules/table.js
View File

@ -15,37 +15,38 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
var hint = layui.hint();
var device = layui.device();
//外部接口
// api
var table = {
config: {
checkName: 'LAY_CHECKED' //是否选中状态的字段名
,indexName: 'LAY_TABLE_INDEX' //初始下标索引名，用于恢复排序
} //全局配置项
,cache: {} //数据缓存
config: { // 全局配置项
checkName: 'LAY_CHECKED' // 是否选中状态的字段名
,indexName: 'LAY_TABLE_INDEX' // 初始下标索引名，用于恢复排序
,disabledName: 'LAY_DISABLED'
}
,cache: {} // 数据缓存
,index: layui.table ? (layui.table.index + 10000) : 0
//设置全局项
// 设置全局项
,set: function(options){
var that = this;
that.config = $.extend({}, that.config, options);
return that;
}
//事件
// 事件
,on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback);
}
}
//操作当前实例
// 操作当前实例
,thisTable = function(){
var that = this
,options = that.config
,id = options.id || options.index;
if(id){
thisTable.that[id] = that; //记录当前实例对象
thisTable.config[id] = options; //记录当前实例配置项
thisTable.that[id] = that; // 记录当前实例对象
thisTable.config[id] = options; // 记录当前实例配置项
}
return {
@ -65,44 +66,66 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
}
}
//获取当前实例配置项
// 获取当前实例配置项
,getThisTableConfig = function(id){
var config = thisTable.config[id];
if(!config) hint.error(id ? ('The table instance with ID \''+ id +'\' not found') : 'ID argument required');
return config || null;
}
//解析自定义模板数据
// 解析自定义模板数据
,parseTempData = function(obj){
obj = obj || {};
var options = this.config || {}
,item3 = obj.item3 //表头数据
,content = obj.content; //原始内容
,item3 = obj.item3 // 表头数据
,content = obj.content; // 原始内容
//是否编码 HTML
// 是否编码 HTML
if(options.escape) content = util.escape(content);
//获取模板
// 获取模板
var templet = obj.text && item3.exportTemplet || (item3.templet || item3.toolbar);
//获取模板内容
// 获取模板内容
if(templet){
content = typeof templet === 'function'
? templet.call(item3, obj.tplData, obj.obj)
: laytpl($(templet).html() || String(content)).render(obj.tplData);
}
//是否只返回文本
// 是否只返回文本
return obj.text ? $('<div>'+ content +'</div>').text() : content;
}
//字符常量
,MOD_NAME = 'table', ELEM = '.layui-table', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', HIDE_V = 'layui-hide-v', DISABLED = 'layui-disabled', NONE = 'layui-none'
// 字符
,MOD_NAME = 'table'
,ELEM = '.layui-table'
,THIS = 'layui-this'
,SHOW = 'layui-show'
,HIDE = 'layui-hide'
,HIDE_V = 'layui-hide-v'
,DISABLED = 'layui-disabled'
,NONE = 'layui-none'
,ELEM_VIEW = 'layui-table-view', ELEM_TOOL = '.layui-table-tool', ELEM_BOX = '.layui-table-box', ELEM_INIT = '.layui-table-init', ELEM_HEADER = '.layui-table-header', ELEM_BODY = '.layui-table-body', ELEM_MAIN = '.layui-table-main', ELEM_FIXED = '.layui-table-fixed', ELEM_FIXL = '.layui-table-fixed-l', ELEM_FIXR = '.layui-table-fixed-r', ELEM_TOTAL = '.layui-table-total', ELEM_PAGE = '.layui-table-page', ELEM_SORT = '.layui-table-sort', ELEM_EDIT = 'layui-table-edit', ELEM_HOVER = 'layui-table-hover'
,ELEM_VIEW = 'layui-table-view'
,ELEM_TOOL = '.layui-table-tool'
,ELEM_BOX = '.layui-table-box'
,ELEM_INIT = '.layui-table-init'
,ELEM_HEADER = '.layui-table-header'
,ELEM_BODY = '.layui-table-body'
,ELEM_MAIN = '.layui-table-main'
,ELEM_FIXED = '.layui-table-fixed'
,ELEM_FIXL = '.layui-table-fixed-l'
,ELEM_FIXR = '.layui-table-fixed-r'
,ELEM_TOTAL = '.layui-table-total'
,ELEM_PAGE = '.layui-table-page'
,ELEM_PAGE_VIEW = '.layui-table-pageview'
,ELEM_SORT = '.layui-table-sort'
,ELEM_EDIT = 'layui-table-edit'
,ELEM_HOVER = 'layui-table-hover'
//thead区域模板
// thead 区域模板
,TPL_HEADER = function(options){
var rowCols = '{{#if(item2.colspan){}} colspan="{{=item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{=item2.rowspan}}"{{#}}}';
@ -196,7 +219,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,'{{# }; }}'
,'{{# if(right){ }}'
,'<div class="layui-table-fixed layui-table-fixed-r">'
,'<div class="layui-table-fixed layui-table-fixed-r layui-hide">'
,'<div class="layui-table-header">'
,TPL_HEADER({fixed: 'right'})
,'<div class="layui-table-mend"></div>'
@ -216,13 +239,11 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
, '</table>'
,'</div>'
,'{{# } }}'
,'{{# if(d.data.page || d.data.pagebar){ }}'
,'<div class="layui-table-column layui-table-page">'
,'<div class="layui-table-column layui-table-page layui-hide">'
,'<div class="layui-inline layui-table-pageview" id="layui-table-page{{=d.index}}"></div>'
,'</div>'
,'{{# } }}'
,'<style>'
,'{{# layui.each(d.data.cols, function(i1, item1){'
,'layui.each(item1, function(i2, item2){ }}'
@ -233,11 +254,13 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,' }'
,'{{# });'
,'}); }}'
,'{{# if(d.data.lineStyle){ }}'
,'.layui-table-view-{{= d.index }} .layui-table-body .layui-table .layui-table-cell{'
,' display: -webkit-box; -webkit-box-align: center; display: -moz-box; -moz-box-align: center; white-space: normal; {{- d.data.lineStyle }} '
,'{{# if(d.data.lineStyle){'
,'var cellClassName = ".layui-table-view-"+ d.index +" .layui-table-body .layui-table .layui-table-cell";'
,'}}'
,'{{= cellClassName }}{'
,'display: -webkit-box; -webkit-box-align: center; white-space: normal; {{- d.data.lineStyle }} '
,'}'
,'.layui-table-view-{{= d.index }} .layui-table-body .layui-table .layui-table-cell:hover{overflow: auto;}'
,'{{= cellClassName }}:hover{overflow: auto;}'
,'{{# } }}'
,'{{# if(d.data.css){ }}'
,'{{- d.data.css }}'
@ -248,7 +271,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,_WIN = $(window)
,_DOC = $(document)
//构造器
// 构造器
,Class = function(options){
var that = this;
that.index = ++table.index;
@ -256,21 +279,21 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
that.render();
};
//初始默认配置
// 初始默认配置
Class.prototype.config = {
limit: 10 //每页显示的数量
,loading: true //请求数据时，是否显示 loading
limit: 10 // 每页显示的数量
,loading: true // 请求数据时，是否显示 loading
,escape: true // 是否开启 HTML 编码功能，即转义 html 原文
,cellMinWidth: 60 //所有单元格默认最小宽度
,editTrigger: 'click' //单元格编辑的事件触发方式
,defaultToolbar: ['filter', 'exports', 'print'] //工具栏右侧图标
,autoSort: true //是否前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
,cellMinWidth: 60 // 所有单元格默认最小宽度
,editTrigger: 'click' // 单元格编辑的事件触发方式
,defaultToolbar: ['filter', 'exports', 'print'] // 工具栏右侧图标
,autoSort: true // 是否前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
,text: {
none: '无数据'
}
};
//表格渲染
// 表格渲染
Class.prototype.render = function(type){
var that = this
,options = that.config;
@ -285,7 +308,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,limitName: 'limit'
}, options.request)
//响应数据的自定义格式
// 响应数据的自定义格式
options.response = $.extend({
statusName: 'code' //规定数据状态的字段名称
,statusCode: 0 //规定成功的状态码
@ -325,10 +348,15 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,hasRender = othis.next('.' + ELEM_VIEW)
//主容器
,reElem = that.elem = $('<div class="layui-form layui-border-box"></div>');
,reElem = that.elem = $('<div></div>');
reElem.addClass(function(){
var arr = [ELEM_VIEW, ELEM_VIEW +'-'+ that.index];
var arr = [
ELEM_VIEW,
ELEM_VIEW +'-'+ that.index,
'layui-form',
'layui-border-box'
];
if(options.className) arr.push(options.className);
return arr.join(' ');
}()).attr({
@ -377,7 +405,12 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
if(options.cols.length > 1){
// 补全高度
var th = that.layFixed.find(ELEM_HEADER).find('th');
th.height(that.layHeader.height() - 1 - parseFloat(th.css('padding-top')) - parseFloat(th.css('padding-bottom')));
// 固定列表头同步跟本体 th 一致高度
var headerMain = that.layHeader.first();
layui.each(th, function (thIndex, thElem) {
thElem = $(thElem);
thElem.height(headerMain.find('th[data-key="' + thElem.attr('data-key') + '"]').height() + 'px');
})
}
that.pullData(that.page); //请求数据
@ -392,7 +425,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
checkbox: 50
,radio: 50
,space: 15
,numbers: 40
,numbers: 60
};
//让 type 参数兼容旧版本
@ -429,7 +462,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
if(type === 'width') return options.clientWidth;
// 初始化 css 参数
if(options.css){
if(options.css && options.css.indexOf(ELEM_VIEW) === -1){
var css = options.css.split('}');
layui.each(css, function(index, value){
if(value){
@ -439,7 +472,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
options.css = css.join('}');
}
// 封装对col的配置处理
// 封装对 col 的配置处理
var initChildCols = function (i1, item1, i2, item2) {
//如果列参数为空，则移除
if (!item2) {
@ -597,25 +630,25 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//动态分配列宽
Class.prototype.setColsWidth = function(){
var that = this
,options = that.config
,colNums = 0 //列个数
,autoColNums = 0 //自动列宽的列个数
,autoWidth = 0 //自动列分配的宽度
,countWidth = 0 //所有列总宽度和
,cntrWidth = that.setInit('width');
var that = this;
var options = that.config;
var colNums = 0; // 列个数
var autoColNums = 0; // 自动列宽的列个数
var autoWidth = 0; // 自动列分配的宽度
var countWidth = 0; // 所有列总宽度和
var cntrWidth = that.setInit('width');
//统计列个数
// 统计列个数
that.eachCols(function(i, item){
item.hide || colNums++;
});
//减去边框差和滚动条宽
// 减去边框差和滚动条宽
cntrWidth = cntrWidth - function(){
return (options.skin === 'line' || options.skin === 'nob') ? 2 : colNums + 1;
}() - that.getScrollWidth(that.layMain[0]) - 1;
//计算自动分配的宽度
// 计算自动分配的宽度
var getAutoWidth = function(back){
//遍历所有列
layui.each(options.cols, function(i1, item1){
@ -632,10 +665,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
if(!back){
width = item2.width || 0;
if(/\d+%$/.test(width)){ //列宽为百分比
if(/\d+%$/.test(width)){ // 列宽为百分比
width = Math.floor((parseFloat(width) / 100) * cntrWidth);
width < minWidth && (width = minWidth);
} else if(!width){ //列宽未填写
} else if(!width){ // 列宽未填写
item2.width = width = 0;
autoColNums++;
}
@ -649,31 +682,31 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
});
});
//如果未填充满，则将剩余宽度平分
// 如果未填充满，则将剩余宽度平分
(cntrWidth > countWidth && autoColNums) && (
autoWidth = (cntrWidth - countWidth) / autoColNums
);
}
getAutoWidth();
getAutoWidth(true); //重新检测分配的宽度是否低于最小列宽
getAutoWidth(true); // 重新检测分配的宽度是否低于最小列宽
//记录自动列数
// 记录自动列数
that.autoColNums = autoColNums;
//设置列宽
// 设置列宽
that.eachCols(function(i3, item3){
var minWidth = item3.minWidth || options.cellMinWidth;
if(item3.colGroup || item3.hide) return;
//给位分配宽的列平均分配宽
// 给未分配宽的列平均分配宽
if(item3.width === 0){
that.getCssRule(options.index +'-'+ item3.key, function(item){
item.style.width = Math.floor(autoWidth >= minWidth ? autoWidth : minWidth) + 'px';
});
}
//给设定百分比的列分配列宽
// 给设定百分比的列分配列宽
else if(/\d+%$/.test(item3.width)){
that.getCssRule(options.index +'-'+ item3.key, function(item){
item.style.width = Math.floor((parseFloat(item3.width) / 100) * cntrWidth) + 'px';
@ -681,7 +714,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
}
});
//填补 Math.floor 造成的数差
// 填补 Math.floor 造成的数差
var patchNums = that.layMain.width() - that.getScrollWidth(that.layMain[0])
- that.layMain.children('table').outerWidth();
@ -712,7 +745,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
that.loading(!0);
};
//重置表格尺寸/结构
// 重置表格尺寸/结构
Class.prototype.resize = function(){
var that = this;
that.fullSize(); //让表格铺满
@ -720,26 +753,26 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
that.scrollPatch(); //滚动条补丁
};
//表格重载
// 表格重载
Class.prototype.reload = function(options, deep, type){
var that = this;
options = options || {};
delete that.haveInit;
//防止数组深度合并
// 防止数组深度合并
layui.each(options, function(key, item){
if(layui.type(item) === 'array') delete that.config[key];
});
//对参数进行深度或浅扩展
// 对参数进行深度或浅扩展
that.config = $.extend(deep, {}, that.config, options);
//执行渲染
// 执行渲染
that.render(type);
};
//异常提示
// 异常提示
Class.prototype.errorView = function(html){
var that = this
,elemNone = that.layMain.find('.'+ NONE)
@ -755,14 +788,14 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
that.layMain.append(that.layNone = layNone);
// 异常情况下对page和total的内容处理
that.layPage && that.layPage.addClass(HIDE).find('>div').html('');
that.layTotal && that.layTotal.addClass(HIDE).find('tbody').html('');
// 异常情况下对 page 和 total 的内容处理
that.layTotal.addClass(HIDE_V);
that.layPage.find(ELEM_PAGE_VIEW).addClass(HIDE_V);
table.cache[that.key] = []; //格式化缓存数据
};
//页码
// 初始页码
Class.prototype.page = 1;
//获得数据
@ -864,6 +897,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//渲染视图
,render = function(){ //后续性能提升的重点
//同步表头父列的相关值
options.HAS_SET_COLS_PATCH || that.setColsPatch();
options.HAS_SET_COLS_PATCH = true;
var thisCheckedRowIndex;
if(!sort && that.sortKey){
return that.sort(that.sortKey.field, that.sortKey.sort, true);
@ -896,7 +933,6 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
if(item3.templet) attr.push('data-content="'+ content +'"'); //自定义模板
if(item3.toolbar) attr.push('data-off="true"'); //行工具列关闭单元格事件
if(item3.event) attr.push('lay-event="'+ item3.event +'"'); //自定义事件
if(item3.style) attr.push('style="'+ item3.style +'"'); //自定义样式
if(item3.minWidth) attr.push('data-minwidth="'+ item3.minWidth +'"'); //单元格最小宽度
return attr.join(' ');
}() +' class="'+ function(){ //追加样式
@ -908,31 +944,52 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,'<div class="layui-table-cell laytable-cell-'+ function(){ //返回对应的CSS类标识
return item3.type === 'normal' ? key
: (key + ' laytable-cell-' + item3.type);
}() +'"'+ (item3.align ? ' align="'+ item3.align +'"' : '') +'>' + function(){
}() +'"'
+ (item3.align ? ' align="'+ item3.align +'"' : '')
+ function(){
var attr = [];
if(item3.style) attr.push('style="'+ item3.style +'"'); //自定义单元格样式
return attr.join(' ');
}() +'>'
+ function(){
var tplData = $.extend(true, {
LAY_INDEX: numbers
,LAY_COL: item3
}, item1)
,checkName = table.config.checkName;
,checkName = table.config.checkName
,disabledName = table.config.disabledName;
//渲染不同风格的列
switch(item3.type){
case 'checkbox':
case 'checkbox': // 复选
return '<input type="checkbox" name="layTableCheckbox" lay-skin="primary" '+ function(){
// 其他属性
var arr = [];
//如果是全选
if(item3[checkName]){
item1[checkName] = item3[checkName];
return item3[checkName] ? 'checked' : '';
if(item3[checkName]) arr[0] = 'checked';
}
return tplData[checkName] ? 'checked' : '';
if(tplData[checkName]) arr[0] = 'checked';
// 禁选
if(tplData[disabledName]) arr.push('disabled');
return arr.join(' ');
}() +'>';
break;
case 'radio':
case 'radio': // 单选
if(tplData[checkName]){
thisCheckedRowIndex = i1;
}
return '<input type="radio" name="layTableRadio_'+ options.index +'" '
+ (tplData[checkName] ? 'checked' : '') +' lay-type="layTableRadio">';
+ function(){
var arr = [];
if(tplData[checkName]) arr[0] = 'checked';
if(tplData[disabledName]) arr.push('disabled');
return arr.join(' ');
}() +' lay-type="layTableRadio">';
break;
case 'numbers':
return numbers;
@ -961,7 +1018,12 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
trs_fixed_r.push('<tr data-index="'+ i1 +'">'+ tds_fixed_r.join('') + '</tr>');
});
// 容器的滚动条位置复位
that.layBody.scrollTop(0);
if(options.resetScrollbar){
that.layBody.scrollLeft(0);
}
that.layMain.find('.'+ NONE).remove();
that.layMain.find('tbody').html(trs.join(''));
that.layFixLeft.find('tbody').html(trs_fixed.join(''));
@ -970,43 +1032,41 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
that.renderForm();
typeof thisCheckedRowIndex === 'number' && that.setThisRowChecked(thisCheckedRowIndex);
that.syncCheckAll();
//滚动条补丁
// 因为 page 参数有可能发生变化 先重新铺满
that.fullSize();
// 滚动条补丁
that.haveInit ? that.scrollPatch() : setTimeout(function(){
that.scrollPatch();
}, 50);
that.haveInit = true;
layer.close(that.tipsIndex);
//同步表头父列的相关值
options.HAS_SET_COLS_PATCH || that.setColsPatch();
options.HAS_SET_COLS_PATCH = true;
};
table.cache[that.key] = data; //记录数据
//显示隐藏分页栏
//that.layPage[(count == 0 || (data.length === 0 && curr == 1)) ? 'addClass' : 'removeClass'](HIDE);
//显示隐藏合计栏
that.layTotal[data.length == 0 ? 'addClass' : 'removeClass'](HIDE_V);;
that.layTotal[data.length == 0 ? 'addClass' : 'removeClass'](HIDE_V);
//显示隐藏分页栏
if(!options.pagebar){
that.layPage[
(count == 0 || (data.length === 0 && curr == 1))
? 'addClass'
: 'removeClass'
](HIDE_V);
}
that.layPage[(options.page || options.pagebar) ? 'removeClass' : 'addClass'](HIDE);
that.layPage.find(ELEM_PAGE_VIEW)[
(!options.page || count == 0 || (data.length === 0 && curr == 1))
? 'addClass'
: 'removeClass'
](HIDE_V);
//如果无数据
if(data.length === 0){
that.renderForm();
return that.errorView(options.text.none);
} else {
that.layFixed.removeClass(HIDE);
that.layFixLeft.removeClass(HIDE);
}
//如果执行初始排序
@ -1053,7 +1113,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,totalNums = {};
if(!options.totalRow) return;
layui.each(data, function(i1, item1){
//若数据项为空数组，则不往下执行（因为删除数据时，会将原有数据设置为 []）
if(layui.type(item1) === 'array' && item1.length === 0) return;
@ -1077,9 +1137,11 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//td 内容
var content = function(){
var text = item3.totalRowText || ''
,decimals = item3.totalRowDecimals || 2
,decimals = 'totalRowDecimals' in item3 ? item3.totalRowDecimals : 2
,thisTotalNum = parseFloat(totalNums[field]).toFixed(decimals)
,tplData = {}
,tplData = {
LAY_COL: item3
}
,getContent;
tplData[field] = thisTotalNum;
@ -1097,7 +1159,6 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,td = ['<td data-field="'+ field +'" data-key="'+ options.index + '-'+ item3.key +'" '+ function(){
var attr = [];
if(item3.align) attr.push('align="'+ item3.align +'"'); //对齐方式
if(item3.style) attr.push('style="'+ item3.style +'"'); //自定义样式
if(item3.minWidth) attr.push('data-minwidth="'+ item3.minWidth +'"'); //单元格最小宽度
return attr.join(' ');
}() +' class="'+ function(){ //追加样式
@ -1110,13 +1171,19 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
var str = (options.index + '-' + item3.key);
return item3.type === 'normal' ? str
: (str + ' laytable-cell-' + item3.type);
}() +'">' + function(){
}() +'"'+ function(){
var attr = [];
if(item3.style) attr.push('style="'+ item3.style +'"'); //自定义单元格样式
return attr.join(' ');
}() +'>' + function(){
var totalRow = item3.totalRow || options.totalRow;
//如果 totalRow 参数为字符类型，则解析为自定义模版
if(typeof totalRow === 'string'){
return laytpl(totalRow).render($.extend({
TOTAL_NUMS: content
}, item3))
TOTAL_NUMS: totalNums[field]
,LAY_COL: item3
}, item3));
}
return content;
}()
@ -1218,10 +1285,11 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
that.renderData(res, that.page, that.count, true);
if(formEvent){
layui.event.call(th, MOD_NAME, 'sort('+ filter +')', {
options.initSort = {
field: field
,type: type
});
};
layui.event.call(th, MOD_NAME, 'sort('+ filter +')', options.initSort);
}
};
@ -1253,7 +1321,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
thisData[index][options.checkName] = checked;
};
//同步全选按钮状态
// 同步全选按钮状态
Class.prototype.syncCheckAll = function(){
var that = this
,options = that.config
@ -1284,7 +1352,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
}
};
//获取cssRule
// 获取 cssRule
Class.prototype.getCssRule = function(key, callback){
var that = this
,style = that.elem.find('style')[0]
@ -1319,18 +1387,18 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
if(options.toolbar){
bodyHeight -= (that.layTool.outerHeight() || 50);
}
//减去统计朗的高度
//减去统计栏的高度
if(options.totalRow){
bodyHeight -= (that.layTotal.outerHeight() || 40);
}
//减去分页栏的高度
if(options.page){
bodyHeight -= (that.layPage.outerHeight() || 41);
if(options.page || options.pagebar){
bodyHeight -= (that.layPage.outerHeight() || 43);
}
that.layMain.css('height', bodyHeight - 2);
that.layMain.outerHeight(bodyHeight);
};
//获取滚动条宽度
@ -1635,7 +1703,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
tr: tr //行元素
,data: table.clearCacheKey(data) //当前行数据
,del: function(){ //删除行数据
table.cache[that.key][index] = [];
table.cache[that.key][index] = [];
tr.remove();
that.scrollPatch();
}
@ -1643,11 +1711,11 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
fields = fields || {};
layui.each(fields, function(key, value){
var td = tr.children('td[data-field="'+ key +'"]')
,cell = td.children(ELEM_CELL); //获取当前修改的列
,cell = td.children(ELEM_CELL); //获取当前修改的列
//更新缓存中的数据
if(key in data) data[key] = value;
that.eachCols(function(i, item3){
//更新相应列视图
if(item3.field == key){
@ -1660,7 +1728,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
item3.templet && that.renderForm();
} else if(item3.templet || item3.toolbar){ //更新所有其他列的模板
var thisTd = tr.children('td[data-field="'+ (item3.field || i) +'"]')
,content = data[item3.field];
,content = data[item3.field];
thisTd.children(ELEM_CELL).html(parseTempData.call(that, {
item3: item3
,content: content
@ -1671,6 +1739,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
}
});
});
that.renderForm();
}
}, sets);
};
@ -1678,14 +1748,16 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//复选框选择
that.elem.on('click', 'input[name="layTableCheckbox"]+', function(){ //替代元素的 click 事件
var checkbox = $(this).prev()
,childs = that.layBody.find('input[name="layTableCheckbox"]')
,children = that.layBody.find('input[name="layTableCheckbox"]')
,index = checkbox.parents('tr').eq(0).data('index')
,checked = checkbox[0].checked
,isAll = checkbox.attr('lay-filter') === 'layTableAllChoose';
if(checkbox[0].disabled) return;
//全选
if(isAll){
childs.each(function(i, item){
children.each(function(i, item){
item.checked = checked;
that.setCheckData(i, checked);
});
@ -1696,10 +1768,15 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
that.syncCheckAll();
}
layui.event.call(checkbox[0], MOD_NAME, 'checkbox('+ filter +')', commonMember.call(checkbox[0], {
checked: checked
,type: isAll ? 'all' : 'one'
}));
// 事件
layui.event.call(
checkbox[0],
MOD_NAME, 'checkbox('+ filter +')',
commonMember.call(checkbox[0], {
checked: checked,
type: isAll ? 'all' : 'one'
})
);
});
//单选框选择
@ -1760,7 +1837,6 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,data = table.cache[that.key][index];
data[field] = value; //更新缓存中的值
layui.event.call(this, MOD_NAME, 'edit('+ filter +')', commonMember.call(this, {
value: value
,field: field
@ -2022,13 +2098,21 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
// 找到它的子列所在cols的下标
var i2 = i1 + (parseInt(item2.rowspan) || 1);
layui.each(cols[i2], function (i22, item22) {
//如果子列已经被标注为{PARENT_COL_INDEX}，或者子列累计 colspan 数等于父列定义的 colspan，则跳出当前子列循环
if (item22.PARENT_COL_INDEX || (childIndex >= 1 && childIndex == (item2.colspan || 1))) return;
item22.PARENT_COL_INDEX = index;
item2.CHILD_COLS.push(item22);
childIndex = childIndex + (item22.hide ? 0 : parseInt(item22.colspan > 1 ? item22.colspan : 1));
eachChildCols(index, cols, i2, item22);
if (item22.parentKey) { // 如果字段信息中包含了parentKey和key信息
if (item22.parentKey === item2.key) {
item22.PARENT_COL_INDEX = index;
item2.CHILD_COLS.push(item22);
eachChildCols(index, cols, i2, item22);
}
} else {
// 没有key信息以colspan数量所谓判断标准
//如果子列已经被标注为{PARENT_COL_INDEX}，或者子列累计 colspan 数等于父列定义的 colspan，则跳出当前子列循环
if (item22.PARENT_COL_INDEX || (childIndex >= 1 && childIndex == (item2.colspan || 1))) return;
item22.PARENT_COL_INDEX = index;
item2.CHILD_COLS.push(item22);
childIndex = childIndex + (item22.hide ? 0 : parseInt(item22.colspan > 1 ? item22.colspan : 1));
eachChildCols(index, cols, i2, item22);
}
});
}
};
@ -2064,9 +2148,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
// 表格选中状态
table.checkStatus = function(id){
var nums = 0
,invalidNum = 0
,arr = []
,data = table.cache[id] || [];
,invalidNum = 0
,arr = []
,data = table.cache[id] || [];
//计算全选个数
layui.each(data, function(i, item){
if(layui.type(item) === 'array'){
@ -2075,7 +2160,9 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
}
if(item[table.config.checkName]){
nums++;
arr.push(table.clearCacheKey(item));
if(!item[table.config.disabledName]){
arr.push(table.clearCacheKey(item));
}
}
});
return {
@ -2212,16 +2299,18 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
args[3] = 'reloadData';
// 过滤与数据无关的参数
var dataParams = [
'data', 'url', 'where', 'page', 'limit',
var dataParams = new RegExp('^('+ [
'data', 'url', 'method', 'contentType',
'headers', 'where', 'page', 'limit',
'request', 'response', 'parseData'
];
].join('|') + ')$');
layui.each(args[1], function (key, value) {
if(dataParams.indexOf(key) === -1){
if(!dataParams.test(key)){
delete args[1][key];
}
});
return table.reload.apply(null, args);
};
@ -2236,6 +2325,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
data = $.extend({}, data);
delete data[table.config.checkName];
delete data[table.config.indexName];
delete data[table.config.disabledName];
return data;
};