目录
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);
});