theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
贤心 2022-06-24 10:16:50 +08:00
parent 691cb5811f
commit 96f5c38971
7 changed files with 235 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
examples/form.html
View File

@ -17,20 +17,20 @@
</head> </head>
<body> <body>
<form class="layui-form" method="get"> <form class="layui-form" method="get" lay-filter="top">
<div class="layui-form-item"> <div class="layui-form-item">
<div class="layui-input-inline"> <div class="layui-input-inline">
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input"> <input type="text" name="arr[]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div> </div>
<div class="layui-input-inline"> <div class="layui-input-inline">
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input"> <input type="text" name="arr[]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div> </div>
<div class="layui-input-inline"> <div class="layui-input-inline">
<input type="text" name="arr[title]" required placeholder="请输入" autocomplete="off" class="layui-input"> <input type="text" name="arr[title]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div> </div>
</div> </div>
<div class="layui-form-item"> <div class="layui-form-item">
<button class="layui-btn" lay-submit lay-filter="top">立即提交</button> <button class="layui-btn" id="testSubmit">立即提交</button>
</div> </div>
</form> </form>
@ -270,6 +270,7 @@
<script> <script>
layui.use(['form', 'util', 'laydate'], function(){ layui.use(['form', 'util', 'laydate'], function(){
var $ = layui.$;
var form = layui.form; var form = layui.form;
var layer = layui.layer; var layer = layui.layer;
var util = layui.util; var util = layui.util;
@ -289,12 +290,28 @@
] ]
}); });
/*
form.on('submit(top)', function(data){ form.on('submit(top)', function(data){
console.log(data); console.log(data);
return false; return false;
}); });
*/
//方法提交
$('#testSubmit').on('click', function(){
form.submit('top', function(data){
layer.confirm('确定提交么？', function(index){
layer.close(index);
// 验证均通过后执行提交
setTimeout(function(){
alert(JSON.stringify(data.field));
})
});
});
return false;
});
//日期 //日期

23
examples/table-test.html
View File

@ -68,9 +68,16 @@
<span {{# if(!d.activate){ }}style="color:#999"{{# } }}>{{ d.email }}</span> <span {{# if(!d.activate){ }}style="color:#999"{{# } }}>{{ d.email }}</span>
</script> </script>
<script type="text/html" id="pagebarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="footerDemoBtn1">底部按钮1</button>
<button class="layui-btn layui-btn-sm" lay-event="footerDemoBtn2">底部按钮2</button>
</div>
</script>
<table id="test" lay-filter="test"></table> <table id="test" lay-filter="test"></table>
<script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.5.3/layui.js" charset="utf-8"></script> <script src="../src/layui.js"></script>
<script> <script>
layui.use(['table', 'dropdown'], function(){ layui.use(['table', 'dropdown'], function(){
var $ = layui.$; var $ = layui.$;
@ -96,10 +103,18 @@ layui.use(['table', 'dropdown'], function(){
//渲染 //渲染
window.ins1 = table.render({ window.ins1 = table.render({
elem: '#test' elem: '#test'
,height: 400 ,height: 500
//,width: 600 //,width: 600
,title: '用户数据表' ,title: '用户数据表'
,url: 'json/table/demo1.json' ,url: 'json/table/demo1.json'
,pagebar: '#pagebarDemo' // 分页栏模板
,lineStyle: 'height: 100px;' // 行样式
,css: [ // 自定义样式
'.layui-table-page{text-align: right;}'
,'.layui-table-pagebar{float: left;}'
].join('')
//,size: 'lg' //,size: 'lg'
//,skin: 'line' //,skin: 'line'
//,autoSort: false //是否自动排序。如果否，则由服务端排序 //,autoSort: false //是否自动排序。如果否，则由服务端排序
@ -354,7 +369,7 @@ layui.use(['table', 'dropdown'], function(){
}; };
}); });
//触发行工具事件 //触发单元格工具事件
table.on('tool(test)', function(obj){ // 双击 toolDouble table.on('tool(test)', function(obj){ // 双击 toolDouble
var data = obj.data; var data = obj.data;
//console.log(obj) //console.log(obj)
@ -376,6 +391,8 @@ layui.use(['table', 'dropdown'], function(){
} }
}); });
//触发表格复选框选择 //触发表格复选框选择
table.on('checkbox(test)', function(obj){ table.on('checkbox(test)', function(obj){
console.log(obj) console.log(obj)

19
src/css/layui.css
View File

@ -906,7 +906,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-table-view .layui-table[lay-skin="line"]{border-width: 0; border-right-width: 1px;} .layui-table-view .layui-table[lay-skin="line"]{border-width: 0; border-right-width: 1px;}
.layui-table-view .layui-table[lay-skin="row"]{border-width: 0; border-bottom-width: 1px;} .layui-table-view .layui-table[lay-skin="row"]{border-width: 0; border-bottom-width: 1px;}
.layui-table-view .layui-table th, .layui-table-view .layui-table th,
.layui-table-view .layui-table td{padding: 5px 0; border-top: none; border-left: none;} .layui-table-view .layui-table td{padding: 0; border-top: none; border-left: none;}
.layui-table-view .layui-table th.layui-unselect .layui-table-cell span{cursor: pointer;} .layui-table-view .layui-table th.layui-unselect .layui-table-cell span{cursor: pointer;}
.layui-table-view .layui-table td{cursor: default;} .layui-table-view .layui-table td{cursor: default;}
.layui-table-view .layui-table td[data-edit="text"]{cursor: text;} .layui-table-view .layui-table td[data-edit="text"]{cursor: text;}
@ -918,6 +918,10 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-table-header{border-width: 0; border-bottom-width: 1px; overflow: hidden;} .layui-table-header{border-width: 0; border-bottom-width: 1px; overflow: hidden;}
.layui-table-header .layui-table{margin-bottom: -1px;} .layui-table-header .layui-table{margin-bottom: -1px;}
.layui-table-column{position: relative; width: 100%; min-height: 41px; padding: 8px 16px; border-width: 0; border-bottom-width: 1px;}
.layui-table-column .layui-btn-container{margin-bottom: -8px;}
.layui-table-column .layui-btn-container .layui-btn{margin-right: 8px; margin-bottom: 8px;}
.layui-table-tool .layui-inline[lay-event]{position: relative; width: 26px; height: 26px; padding: 5px; line-height: 16px; margin-right: 10px; text-align: center; color: #333; border: 1px solid #ccc; cursor: pointer; -webkit-transition: .5s all; transition: .5s all;} .layui-table-tool .layui-inline[lay-event]{position: relative; width: 26px; height: 26px; padding: 5px; line-height: 16px; margin-right: 10px; text-align: center; color: #333; border: 1px solid #ccc; cursor: pointer; -webkit-transition: .5s all; transition: .5s all;}
.layui-table-tool .layui-inline[lay-event]:hover{border: 1px solid #999;} .layui-table-tool .layui-inline[lay-event]:hover{border: 1px solid #999;}
.layui-table-tool-temp{padding-right: 120px;} .layui-table-tool-temp{padding-right: 120px;}
@ -943,14 +947,14 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-table-sort[lay-sort="asc"] .layui-table-sort-asc{border-bottom-color: #000;} .layui-table-sort[lay-sort="asc"] .layui-table-sort-asc{border-bottom-color: #000;}
.layui-table-sort[lay-sort="desc"] .layui-table-sort-desc{border-top-color: #000;} .layui-table-sort[lay-sort="desc"] .layui-table-sort-desc{border-top-color: #000;}
.layui-table-cell{height: 28px; line-height: 28px; padding: 0 15px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;} .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-form-checkbox[lay-skin="primary"]{top: -1px; padding: 0;}
.layui-table-cell .layui-table-link{color: #01AAED;} .layui-table-cell .layui-table-link{color: #01AAED;}
.laytable-cell-checkbox, .laytable-cell-checkbox,
.laytable-cell-radio, .laytable-cell-radio,
.laytable-cell-space, .laytable-cell-space,
.laytable-cell-numbers{padding: 0; text-align: center;} .laytable-cell-numbers{text-align: center; -webkit-box-pack: center;}
.layui-table-body{position: relative; overflow: auto; margin-right: -1px; margin-bottom: -1px;} .layui-table-body{position: relative; overflow: auto; margin-right: -1px; margin-bottom: -1px;}
.layui-table-body .layui-none{line-height: 26px; padding: 30px 15px; text-align: center; color: #999;} .layui-table-body .layui-none{line-height: 26px; padding: 30px 15px; text-align: center; color: #999;}
@ -967,7 +971,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-table-total{margin-bottom: -1px; border-width: 0; border-top-width: 1px; overflow: hidden;} .layui-table-total{margin-bottom: -1px; border-width: 0; border-top-width: 1px; overflow: hidden;}
.layui-table-page{position: relative; width: 100%; padding: 7px 7px 0; border-width: 0; border-top-width: 1px; height: 41px; margin-bottom: -1px; font-size: 12px; white-space: nowrap; overflow: hidden;} .layui-table-page{z-index: 880; border-width: 0; border-top-width: 1px; margin-bottom: -1px; white-space: nowrap; overflow: hidden;}
.layui-table-page>div{height: 26px;} .layui-table-page>div{height: 26px;}
.layui-table-page .layui-laypage{margin: 0;} .layui-table-page .layui-laypage{margin: 0;}
.layui-table-page .layui-laypage a, .layui-table-page .layui-laypage a,
@ -975,18 +979,19 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-table-page .layui-laypage a, .layui-table-page .layui-laypage a,
.layui-table-page .layui-laypage span.layui-laypage-curr{padding: 0 12px;} .layui-table-page .layui-laypage span.layui-laypage-curr{padding: 0 12px;}
.layui-table-page .layui-laypage span{margin-left: 0; padding: 0;} .layui-table-page .layui-laypage span{margin-left: 0; padding: 0;}
.layui-table-page .layui-laypage .layui-laypage-prev{margin-left: -7px!important;} .layui-table-page .layui-laypage .layui-laypage-prev{margin-left: -11px!important;}
.layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em{left: 0; top: 0; padding: 0;} .layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em{left: 0; top: 0; padding: 0;}
.layui-table-page .layui-laypage input, .layui-table-page .layui-laypage input,
.layui-table-page .layui-laypage button{height: 26px; line-height: 26px; } .layui-table-page .layui-laypage button{height: 26px; line-height: 26px; }
.layui-table-page .layui-laypage input{width: 40px;} .layui-table-page .layui-laypage input{width: 40px;}
.layui-table-page .layui-laypage button{padding: 0 10px;} .layui-table-page .layui-laypage button{padding: 0 10px;}
.layui-table-page select{height: 18px;} .layui-table-page select{height: 18px;}
.layui-table-view select[lay-ignore]{display: inline-block;} .layui-table-pagebar{float: right; line-height: 32px;}
.layui-table-view select[lay-ignore]{display: inline-block;}
.layui-table-patch .layui-table-cell{padding: 0; width: 30px;} .layui-table-patch .layui-table-cell{padding: 0; width: 30px;}
.layui-table-edit{position: absolute; left: 0; top: 0; z-index: 900; width: 100%; 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: 0 14px 1px; border-radius: 0; box-shadow: 1px 1px 20px rgba(0,0,0,.15); background-color: #fff;}
.layui-table-edit:focus{border-color: #5FB878!important;} .layui-table-edit:focus{border-color: #5FB878!important;}
select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;} select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
.layui-table-view .layui-form-switch, .layui-table-view .layui-form-switch,

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

@ -10,7 +10,7 @@
html #layuicss-skincodecss{display:none; position: absolute; width:1989px;} 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: 12px;} .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{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-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{position: relative; overflow: auto;}
@ -19,7 +19,7 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
.layui-code-view .layui-code-ol li:last-child{padding-bottom: 10px;} .layui-code-view .layui-code-ol li:last-child{padding-bottom: 10px;}
.layui-code-view pre{margin: 0;} .layui-code-view pre{margin: 0;}
/* notepadd++风格 */ /* notepadd++ 风格 */
.layui-code-notepad{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E} .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-h3{border-bottom: none;}
.layui-code-notepad .layui-code-ol li{background-color: #3F3F3F; border-left: none;} .layui-code-notepad .layui-code-ol li{background-color: #3F3F3F; border-left: none;}

19
src/modules/code.js
View File

@ -1,15 +1,20 @@
/** /**
* code 代码修饰器 * code
* MIT Licensed * 代码区简易修饰
*/ */
layui.define('jquery', function(exports){ layui.define(['util'], function(exports){
"use strict"; "use strict";
var $ = layui.$; var $ = layui.$;
var util = layui.util;
exports('code', function(options){ exports('code', function(options){
var elems = []; var elems = [];
var trim = function(str){
return $.trim(str).replace(/^\n|\n$/, '');
}
options = options || {}; options = options || {};
options.elem = $(options.elem||'.layui-code'); options.elem = $(options.elem||'.layui-code');
options.lang = 'lang' in options ? options.lang : 'code'; options.lang = 'lang' in options ? options.lang : 'code';
@ -19,12 +24,12 @@ layui.define('jquery', function(exports){
}); });
layui.each(elems.reverse(), function(index, item){ layui.each(elems.reverse(), function(index, item){
var othis = $(item), html = othis.html(); var othis = $(item);
var html = trim(othis.html());
//转义HTML标签 // 转义 HTML 标签
if(othis.attr('lay-encode') || options.encode){ if(othis.attr('lay-encode') || options.encode){
html = html.replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&amp;') html = util.escape(html);
.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;').replace(/"/g, '&quot;')
} }
othis.html('<ol class="layui-code-ol"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></ol>') othis.html('<ol class="layui-code-ol"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></ol>')

55
src/modules/form.js
View File

@ -62,6 +62,13 @@ layui.define('layer', function(exports){
$.extend(true, that.config.verify, settings); $.extend(true, that.config.verify, settings);
return that; return that;
}; };
//获取指定表单对象
Form.prototype.getFormElem = function(filter){
return $(ELEM + function(){
return filter ? ('[lay-filter="' + filter +'"]') : '';
}());
};
//表单事件 //表单事件
Form.prototype.on = function(events, callback){ Form.prototype.on = function(events, callback){
@ -71,7 +78,7 @@ layui.define('layer', function(exports){
//赋值/取值 //赋值/取值
Form.prototype.val = function(filter, object){ Form.prototype.val = function(filter, object){
var that = this var that = this
,formElem = $(ELEM + '[lay-filter="' + filter +'"]'); ,formElem = that.getFormElem(filter);
//遍历 //遍历
formElem.each(function(index, item){ formElem.each(function(index, item){
@ -109,7 +116,7 @@ layui.define('layer', function(exports){
//取值 //取值
Form.prototype.getValue = function(filter, itemForm){ Form.prototype.getValue = function(filter, itemForm){
itemForm = itemForm || $(ELEM + '[lay-filter="' + filter +'"]').eq(0); itemForm = itemForm || this.getFormElem(filter);
var nameIndex = {} //数组 name 索引 var nameIndex = {} //数组 name 索引
,field = {} ,field = {}
@ -726,6 +733,7 @@ layui.define('layer', function(exports){
} }
setTimeout(function(){ setTimeout(function(){
console.log(item);
(isForm2Elem ? othis.next().find('input') : item).focus(); (isForm2Elem ? othis.next().find('input') : item).focus();
}, 7); }, 7);
@ -757,27 +765,42 @@ layui.define('layer', function(exports){
return !stop; return !stop;
} }
//表单提交校验 // 提交表单并校验
var submit = function(){ var submit = Form.prototype.submit = function(filter, callback){
var field = {} //字段集合 var field = {}; //字段集合
,button = $(this) //当前触发的按钮 var button = $(this); //当前触发的按钮
,elem = button.parents(ELEM).eq(0) //当前所在表单域
,verifyElem = elem.find('*[lay-verify]') //获取需要校验的元素 // 表单域 lay-filter 属性值
,formElem = button.parents('form')[0] //获取当前所在的 form 元素，如果存在的话 var layFilter = typeof filter === 'string'
,filter = button.attr('lay-filter'); //获取过滤器 ? filter
: button.attr('lay-filter');
// 当前所在表单域
var elem = this.getFormElem
? this.getFormElem(layFilter)
: button.parents(ELEM).eq(0);
// 获取需要校验的元素
var verifyElem = elem.find('*[lay-verify]');
//开始校验 //开始校验
if(!form.validate(verifyElem)) return false; if(!form.validate(verifyElem)) return false;
//获取当前表单值 //获取当前表单值
field = form.getValue(null, elem); field = form.getValue(null, elem);
//返回的参数
var params = {
elem: this.getFormElem ? (window.event && window.event.target) : this //触发事件的对象
,form: this.getFormElem ? elem[0] : button.parents('form')[0] //当前所在的 form 元素，如果存在的话
,field: field //当前表单数据
};
//回调
typeof callback === 'function' && callback(params);
//返回字段 //事件
return layui.event.call(this, MOD_NAME, 'submit('+ filter +')', { return layui.event.call(this, MOD_NAME, 'submit('+ layFilter +')', params);
elem: this
,form: formElem
,field: field
});
}; };
//自动完成渲染 //自动完成渲染

168
src/modules/table.js
View File

@ -6,17 +6,17 @@
layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
"use strict"; "use strict";
var $ = layui.$ var $ = layui.$;
,laytpl = layui.laytpl var laytpl = layui.laytpl;
,laypage = layui.laypage var laypage = layui.laypage;
,layer = layui.layer var layer = layui.layer;
,form = layui.form var form = layui.form;
,util = layui.util var util = layui.util;
,hint = layui.hint() var hint = layui.hint();
,device = layui.device() var device = layui.device();
//外部接口 //外部接口
,table = { var table = {
config: { config: {
checkName: 'LAY_CHECKED' //是否选中状态的字段名 checkName: 'LAY_CHECKED' //是否选中状态的字段名
,indexName: 'LAY_TABLE_INDEX' //初始下标索引名，用于恢复排序 ,indexName: 'LAY_TABLE_INDEX' //初始下标索引名，用于恢复排序
@ -98,7 +98,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
} }
//字符常量 //字符常量
,MOD_NAME = 'table', ELEM = '.layui-table', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', 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_SORT = '.layui-table-sort', ELEM_EDIT = 'layui-table-edit', ELEM_HOVER = 'layui-table-hover'
@ -161,8 +161,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,'</table>'].join('') ,'</table>'].join('')
//主模板 //主模板
,TPL_MAIN = ['<div class="layui-form layui-border-box {{=d.VIEW_CLASS}}{{# if(d.data.className){ }} {{= d.data.className }}{{# } }}" lay-filter="LAY-table-{{=d.index}}" lay-id="{{= d.data.id }}" style="{{# if(d.data.width){ }}width:{{=d.data.width}}px;{{# } }} {{# if(d.data.height){ }}height:{{=d.data.height}}px;{{# } }}">' ,TPL_MAIN = [
,'{{# if(d.data.toolbar){ }}' ,'{{# if(d.data.toolbar){ }}'
,'<div class="layui-table-tool">' ,'<div class="layui-table-tool">'
,'<div class="layui-table-tool-temp"></div>' ,'<div class="layui-table-tool-temp"></div>'
@ -218,9 +217,9 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,'</div>' ,'</div>'
,'{{# } }}' ,'{{# } }}'
,'{{# if(d.data.page){ }}' ,'{{# if(d.data.page || d.data.pagebar){ }}'
,'<div class="layui-table-page">' ,'<div class="layui-table-column layui-table-page">'
,'<div id="layui-table-page{{=d.index}}"></div>' ,'<div class="layui-inline layui-table-pageview" id="layui-table-page{{=d.index}}"></div>'
,'</div>' ,'</div>'
,'{{# } }}' ,'{{# } }}'
@ -234,8 +233,17 @@ 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 }} '
,'}'
,'.layui-table-view-{{= d.index }} .layui-table-body .layui-table .layui-table-cell:hover{overflow: auto;}'
,'{{# } }}'
,'{{# if(d.data.css){ }}'
,'{{- d.data.css }}'
,'{{# } }}'
,'</style>' ,'</style>'
,'</div>'].join('') ].join('')
,_WIN = $(window) ,_WIN = $(window)
,_DOC = $(document) ,_DOC = $(document)
@ -317,9 +325,23 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,hasRender = othis.next('.' + ELEM_VIEW) ,hasRender = othis.next('.' + ELEM_VIEW)
//主容器 //主容器
,reElem = that.elem = $(laytpl(TPL_MAIN).render({ ,reElem = that.elem = $('<div class="layui-form layui-border-box"></div>');
VIEW_CLASS: ELEM_VIEW
,data: options reElem.addClass(function(){
var arr = [ELEM_VIEW, ELEM_VIEW +'-'+ that.index];
if(options.className) arr.push(options.className);
return arr.join(' ');
}()).attr({
'lay-filter': 'LAY-TABLE-FORM-DF-'+ that.index
,'lay-id': options.id
,'style': function(){
var arr = [];
if(options.width) arr.push('width:'+ options.width + 'px;');
if(options.height) arr.push('height:'+ options.height + 'px;');
return arr.join('')
}()
}).html(laytpl(TPL_MAIN).render({
data: options
,index: that.index //索引 ,index: that.index //索引
})); }));
@ -342,15 +364,18 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
that.layTotal = reElem.find(ELEM_TOTAL); that.layTotal = reElem.find(ELEM_TOTAL);
that.layPage = reElem.find(ELEM_PAGE); that.layPage = reElem.find(ELEM_PAGE);
//初始化工具栏 // 初始化头部工具栏
that.renderToolbar(); that.renderToolbar();
//让表格平铺 // 初始化底部分页栏
that.renderPagebar();
// 让表格平铺
that.fullSize(); that.fullSize();
//如果多级表头，则填补表头高度 // 如果多级表头，则填补表头高度
if(options.cols.length > 1){ if(options.cols.length > 1){
//补全高度 // 补全高度
var th = that.layFixed.find(ELEM_HEADER).find('th'); 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.height(that.layHeader.height() - 1 - parseFloat(th.css('padding-top')) - parseFloat(th.css('padding-bottom')));
} }
@ -364,8 +389,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
var that = this var that = this
,options = that.config ,options = that.config
,initWidth = { ,initWidth = {
checkbox: 48 checkbox: 50
,radio: 48 ,radio: 50
,space: 15 ,space: 15
,numbers: 40 ,numbers: 40
}; };
@ -403,6 +428,17 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
if(type === 'width') return options.clientWidth; if(type === 'width') return options.clientWidth;
// 初始化 css 参数
if(options.css){
var css = options.css.split('}');
layui.each(css, function(index, value){
if(value){
css[index] = '.'+ ELEM_VIEW + '-'+ that.index + ' ' + value;
}
});
options.css = css.join('}');
}
// 封装对col的配置处理 // 封装对col的配置处理
var initChildCols = function (i1, item1, i2, item2) { var initChildCols = function (i1, item1, i2, item2) {
//如果列参数为空，则移除 //如果列参数为空，则移除
@ -501,7 +537,22 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
}); });
} }
that.layTool.find('.layui-table-tool-self').html(iconElem.join('')); that.layTool.find('.layui-table-tool-self').html(iconElem.join(''));
} };
// 分页栏
Class.prototype.renderPagebar = function(){
var that = this
,options = that.config
,layPagebar = that.layPagebar = $('<div class="layui-inline layui-table-pagebar"></div>')
//开启分页栏自定义模板
if(options.pagebar){
var pagebarHtml = $(options.pagebar).html() || '';
pagebarHtml && layPagebar.append(laytpl(pagebarHtml).render(options));
that.layPage.append(layPagebar);
}
};
//同步表头父列的相关值 //同步表头父列的相关值
Class.prototype.setParentCol = function(hide, parentKey){ Class.prototype.setParentCol = function(hide, parentKey){
@ -936,7 +987,19 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
table.cache[that.key] = data; //记录数据 table.cache[that.key] = data; //记录数据
//显示隐藏分页栏 //显示隐藏分页栏
that.layPage[(count == 0 || (data.length === 0 && curr == 1)) ? 'addClass' : 'removeClass'](HIDE); //that.layPage[(count == 0 || (data.length === 0 && curr == 1)) ? 'addClass' : 'removeClass'](HIDE);
//显示隐藏合计栏
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);
}
//如果无数据 //如果无数据
if(data.length === 0){ if(data.length === 0){
@ -1075,7 +1138,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//渲染表单 //渲染表单
Class.prototype.renderForm = function(type){ Class.prototype.renderForm = function(type){
form.render(type, 'LAY-table-'+ this.index); var that = this
,options = that.config
,filter = that.elem.attr('lay-filter');
form.render(type, filter);
}; };
//标记当前行选中状态 //标记当前行选中状态
@ -1460,6 +1526,17 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
,config: options ,config: options
},{})); },{}));
}); });
//分页栏操作事件
that.layPagebar.on('click', '*[lay-event]', function(e){
var othis = $(this)
,events = othis.attr('lay-event');
layui.event.call(this, MOD_NAME, 'pagebar('+ filter +')', $.extend({
event: events
,config: options
},{}));
});
//拖拽调整宽度 //拖拽调整宽度
th.on('mousemove', function(e){ th.on('mousemove', function(e){
@ -1722,10 +1799,14 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
//显示编辑表单 //显示编辑表单
if(editType){ if(editType){
var input = $('<input class="layui-input '+ ELEM_EDIT +'">'); var input = $(function(){
if(editType === 'textarea') { var inputElem = '<input class="layui-input '+ ELEM_EDIT +'">';
input = $('<textarea class="layui-input ' + ELEM_EDIT + '"></textarea>'); if(editType === 'textarea') {
} inputElem = '<textarea class="layui-input ' + ELEM_EDIT + '"></textarea>';
}
return inputElem;
}());
input[0].value = othis.data('content') || elemCell.text(); input[0].value = othis.data('content') || elemCell.text();
othis.find('.'+ELEM_EDIT)[0] || othis.append(input); othis.find('.'+ELEM_EDIT)[0] || othis.append(input);
input.focus(); input.focus();
@ -2014,17 +2095,22 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
}; };
// 表格导出 // 表格导出
table.exportFile = function(id, data, type){ table.exportFile = function(id, data, options){
data = data || table.clearCacheKey(table.cache[id]); data = data || table.clearCacheKey(table.cache[id]);
type = type || 'csv'; options = typeof options === 'object' ? options : function(){
var obj = {};
var thatTable = thisTable.that[id] options && (obj.type = options);
,config = thisTable.config[id] || {} return obj;
,textType = ({ }();
var type = options.type || 'csv';
var thatTable = thisTable.that[id];
var config = thisTable.config[id] || {};
var textType = ({
csv: 'text/csv' csv: 'text/csv'
,xls: 'application/vnd.ms-excel' ,xls: 'application/vnd.ms-excel'
})[type] })[type];
,alink = document.createElement("a"); var alink = document.createElement("a");
if(device.ie) return hint.error('IE_NOT_SUPPORT_EXPORTS'); if(device.ie) return hint.error('IE_NOT_SUPPORT_EXPORTS');
@ -2084,7 +2170,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
return dataTitle.join(',') + '\r\n' + dataMain.join('\r\n') + '\r\n' + dataTotal.join(','); return dataTitle.join(',') + '\r\n' + dataMain.join('\r\n') + '\r\n' + dataTotal.join(',');
}()); }());
alink.download = (config.title || 'table_'+ (config.index || new Date().getTime())) + '.' + type; alink.download = (options.title || config.title || 'table_'+ (config.index || '')) + '.' + type;
document.body.appendChild(alink); document.body.appendChild(alink);
alink.click(); alink.click();
document.body.removeChild(alink); document.body.removeChild(alink);