diff --git a/src/modules/table.js b/src/modules/table.js
index 50525a40..1b269ce1 100644
--- a/src/modules/table.js
+++ b/src/modules/table.js
@@ -258,29 +258,6 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
,'
'
-
- ,''
].join('');
var _WIN = $(window);
@@ -385,13 +362,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
options.height = $(that.parentDiv).height() - that.parentHeightGap;
}
- //开始插入替代元素
+ // 开始插入替代元素
var othis = options.elem;
var hasRender = othis.next('.' + ELEM_VIEW);
- //主容器
+ // 主容器
var reElem = that.elem = $('');
+ // 添加 className
reElem.addClass(function(){
var arr = [
ELEM_VIEW,
@@ -418,11 +396,14 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
index: that.index //索引
}));
- //生成替代元素
- hasRender[0] && hasRender.remove(); //如果已经渲染,则Rerender
+ // 初始化样式
+ that.renderStyle();
+
+ // 生成替代元素
+ hasRender[0] && hasRender.remove(); // 如果已经渲染,则 Rerender
othis.after(reElem);
- //各级容器
+ // 各级容器
that.layTool = reElem.find(ELEM_TOOL);
that.layBox = reElem.find(ELEM_BOX);
that.layHeader = reElem.find(ELEM_HEADER);
@@ -443,11 +424,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 让表格平铺
that.fullSize();
- that.pullData(that.page); //请求数据
- that.events(); //事件
+ that.pullData(that.page); // 请求数据
+ that.events(); // 事件
};
- //根据列类型,定制化参数
+ // 根据列类型,定制化参数
Class.prototype.initOpts = function(item){
var that = this
var options = that.config;
@@ -458,7 +439,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
numbers: 60
};
- //让 type 参数兼容旧版本
+ // 让 type 参数兼容旧版本
if(item.checkbox) item.type = "checkbox";
if(item.space) item.type = "space";
if(!item.type) item.type = "normal";
@@ -553,6 +534,60 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
};
+ // 初始化样式
+ Class.prototype.renderStyle = function() {
+ var that = this;
+ var options = that.config;
+ var index = that.index;
+ var text = [];
+
+ // 单元格宽度
+ layui.each(options.cols, function(i1, item1) {
+ layui.each(item1, function(i2, item2) {
+ var key = [index, i1, i2].join('-');
+ var val = item2.width ? ['width: ', item2.width, 'px'].join('') : '';
+ text.push('.laytable-cell-'+ key +'{'+ val +'}');
+ });
+ });
+
+ // 自定义行样式
+ (function (lineStyle) {
+ if (!lineStyle) return;
+ var trClassName = '.layui-table-view-'+ index +' .layui-table-body .layui-table tr';
+ var rules = lineStyle.split(';');
+ var cellMaxHeight = 'none';
+
+ // 计算单元格最大高度
+ layui.each(rules, function(i, rule) {
+ rule = rule.split(':');
+ if (rule[0] === 'height') {
+ var val = parseFloat(rule[1]);
+ if (!isNaN(val)) cellMaxHeight = (val - 1) + 'px';
+ return true;
+ }
+ });
+
+ // 多行相关样式
+ layui.each([
+ '{'+ lineStyle +'}',
+ '.layui-table-cell{height: auto; max-height: '+ cellMaxHeight +'; white-space: normal; text-overflow: clip;}',
+ '> td:hover > .layui-table-cell{overflow: auto;}'
+ ], function(i, val) {
+ text.push(trClassName + ' ' + val);
+ });
+ })(options.lineStyle);
+
+ // 自定义 css 属性
+ if (options.css) text.push(options.css);
+
+ // 生成 style
+ lay.style({
+ target: that.elem[0],
+ text: text.join(''),
+ id: 'DF-'+ index
+ });
+ };
+
// 初始工具栏
Class.prototype.renderToolbar = function(){
var that = this
@@ -784,7 +819,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 给未分配宽的列平均分配宽
if(item3.width === 0){
- that.getCssRule(item3.key, function(item){
+ that.cssRules(item3.key, function(item){
item.style.width = Math.floor(function(){
if(autoWidth < minWidth) return minWidth;
if(autoWidth > maxWidth) return maxWidth;
@@ -795,7 +830,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 给设定百分比的列分配列宽
else if(/\d+%$/.test(item3.width)){
- that.getCssRule(item3.key, function(item){
+ that.cssRules(item3.key, function(item){
var width = Math.floor((parseFloat(item3.width) / 100) * cntrWidth);
width < minWidth && (width = minWidth);
width > maxWidth && (width = maxWidth);
@@ -805,7 +840,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 给拥有普通 width 值的列分配最新列宽
else {
- that.getCssRule(item3.key, function(item){
+ that.cssRules(item3.key, function(item){
item.style.width = item3.width + 'px';
});
}
@@ -828,7 +863,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var th = getEndTh();
var key = th.data('key');
- that.getCssRule(key, function(item){
+ that.cssRules(key, function(item){
var width = item.style.width || th.outerWidth();
item.style.width = (parseFloat(width) + patchNums) + 'px';
@@ -1662,20 +1697,19 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
}
};
- // 获取 cssRule
- Class.prototype.getCssRule = function(key, callback){
+ // 获取对应单元格的 cssRules
+ Class.prototype.cssRules = function(key, callback){
var that = this;
var style = that.elem.children('style')[0];
- var sheet = style.sheet || style.styleSheet || {};
- var rules = sheet.cssRules || sheet.rules;
- layui.each(rules, function(i, item){
- if(item.selectorText === ('.laytable-cell-'+ key)){
+
+ lay.getStyleRules(style, function(item){
+ if (item.selectorText === ('.laytable-cell-'+ key)) {
return callback(item), true;
}
});
};
- //让表格铺满
+ // 让表格铺满
Class.prototype.fullSize = function(){
var that = this;
var options = that.config;
@@ -2002,7 +2036,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
e.preventDefault();
dict.offset = [e.clientX, e.clientY]; //记录初始坐标
- that.getCssRule(key, function(item){
+ that.cssRules(key, function(item){
var width = item.style.width || othis.outerWidth();
dict.rule = item;
dict.ruleWidth = parseFloat(width);
@@ -2061,7 +2095,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
delete thisTable.eventMoveElem;
// 列拖拽宽度后的事件
- thatTable.getCssRule(key, function(item){
+ thatTable.cssRules(key, function(item){
col.width = parseFloat(item.style.width);
layui.event.call(th[0], MOD_NAME, 'colResized('+ filter +')', {
col: col,
@@ -2433,7 +2467,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
that.elem.find('.'+ ELEM_CELL_C).trigger('click');
// 设置当前单元格展开宽度
- that.getCssRule(key, function(item){
+ that.cssRules(key, function(item){
var width = item.style.width;
var expandedWidth = col.expandedWidth || (that.elem.width() / 3);
@@ -2443,7 +2477,9 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
elemCellClose.data('cell-width', width);
item.style.width = expandedWidth + 'px';
- that.scrollPatch(); // 滚动条补丁
+ setTimeout(function(){
+ that.scrollPatch(); // 滚动条补丁
+ });
});
// 设置当前单元格展开样式
@@ -2458,7 +2494,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
elemCellClose.on('click', function(){
var $this = $(this);
that.setRowActive(index, ELEM_EXPAND, true); // 移除单元格展开样式
- that.getCssRule(key, function(item){
+ that.cssRules(key, function(item){
item.style.width = $this.data('cell-width'); // 恢复单元格展开前的宽度
that.resize(); // 滚动条补丁
});