目錄
4、layui動態表格 layui-table-col-special
6、如何獲取數據表格選中行的obj對象？=》checkbox，radio選定方案
1、表格內容換行顯示及固定欄高度異常的解決方案
-適用場景 使用了固定列並且需要表格內容換行顯示
正常使用
/**
* 修正浮動欄高度
* @param tableElem 表格顯示div
*/
function autoFixed(tableElem) {
var $tableView = tableElem || $(".layui-table-view");
var dataIndex, trHeight;
$tableView.each(function () {
// 獲取兩側浮動欄
var $fixed = $(this).find(".layui-table-fixed");
// 同步表頭高度
$fixed.find(".layui-table-header tr").height($(this).find(".layui-table-header tr").eq(0).height());
//遍歷tr 修正浮動欄行高
$(this).find(".layui-table-main tr").each(function () {
dataIndex = $(this).attr("data-index");
trHeight = $(this).css("height");
$fixed.find("tr[data-index=" + dataIndex + "]").css("height", trHeight);
})
// 將固定列header的高度設置一下
$fixed.find(".layui-table-header th").height($(this).find(".layui-table-header th").eq(0).height());
});
}
// 使用
done: function() {
autoFixed($(this.elem[0]).next());
}
針對一些手動調整引起的問題的解決方案
// 監聽瀏覽器窗口大小變化
var resizeTimer;
$(window).resize(function() {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function() {
resizeTimer = null;
autoFixed();
},
200);
});
// 監聽表頭鼠標按下事件
$(document).on('mousedown', 'thead',
function(e) {
var that = $(this);
$(document).one('mouseup',
function() {
autoFixed(that.parents('.layui-table-view'));
})
});
2、Layui表格之多列合併展示
當我們在使用Layui的時候，有時表格中的列比較多，展示出來肯定是有問題的，這樣就不得不捨棄一些列不展示，不展示是一種解決方案，但是更好的解決方案應該是合併展示。
3、layui的複雜表頭三級以上
4、layui動態表格 layui-table-col-special
使用layui動態表格時，用到複雜表頭，如果colspan=1時，會出現一例空白列，根本問題應該是layui 在複雜表頭時, colspan 必須大於1，解決辦法是，修改colspan爲2，然後添加一列空白列{title: '', field:'', hide: true}
5、laydate在谷歌瀏覽器彈出日期選擇框後消失
修改了laydate.js，把trigger:"focus",show:!1改爲trigger:"click",show:!1 ，目前運作正常
6、如何獲取數據表格選中行的obj對象？=》checkbox，radio選定方案
// 利用common.js實現的,使用與單元格事件稍有不同
// 單元格事件本身就可以獲取的
原型=》common.js
/** common.js By zouqj */
layui.define(['layer'], function (exports) {
"use strict";
var $ = layui.jquery,
layer = layui.layer,
form = parent.layui.form;
var common = {
getRadioRow: function (obj,table) {
obj.trObjs = [];
var that = {};
that.elem = obj.config.elem.next();
that.layBody = that.elem.find('.layui-table-body');
that.key = obj.config.id;
that.layBody.find('.layui-form-radioed').each(function () {
obj.trObjs.push(commonMember(that, $(this),table));
})
return obj.trObjs;
},
getCheckedRow: function (obj, table) {
obj.trObjs = [];
var that = {};
that.elem = obj.config.elem.next();
that.layBody = that.elem.find('.layui-table-body');
that.key = obj.config.id;
that.layBody.find('.layui-form-checked').each(function () {
obj.trObjs.push(commonMember(that, $(this), table));
})
return obj.trObjs;
}
};
//數據行中的事件監聽返回的公共對象成員
var commonMember = function (that, othis, table, sets) {
var ELEM_CELL = '.layui-table-cell';
var index = othis.parents('tr').eq(0).data('index'),
tr = that.layBody.find('tr[data-index="' + index + '"]'),
data = table.cache[that.key][index];
return $.extend({
tr: tr //行元素
,
data: table.clearCacheKey(data) //當前行數據
,
del: function () { //刪除行數據
table.cache[that.key][index] = [];
tr.remove();
that.scrollPatch();
},
update: function (fields) { //修改行數據
fields = fields || {};
layui.each(fields, function (key, value) {
if (key in data) {
var templet, td = tr.children('td[data-field="' + key + '"]');
data[key] = value;
table.eachCols(function (i, item2) {
if (item2.field == key && item2.templet) {
templet = item2.templet;
}
});
td.children(ELEM_CELL).html(function () {
return templet ? function () {
return typeof templet === 'function' ?
templet(data) :
laytpl($(templet).html() || value).render(data)
}() : value;
}());
td.data('content', value);
}
});
}
}, sets);
};
exports('common', common);
});