关于table发现的一些问题

建议 已结
5 135
我骑牛撞交警
悬赏:20飞吻
一、table表头参数minWidth
在table的表头参数里设置了minWidth,但是不生效;

F12查看代码得到是css没有min-width这个样式,然后查看源码,发现确实没添加这个样式

添加上去后源码:


二、table翻页limit
在table的参数中设置了limit为20

第一次查询后每页显示数量是20条

我手动修改成每页只显示10条


然后我重新搜索,调用 table.reload();
此table又变成了每页20条。
建议修改每页显示数时,能一并修改参数的limit值


三、先渲染table出来,点击多选框出错(添加)
先渲染table,因为没设置url和data,所以不会进行渲染数据
点击表头上面的多选框,会报错

查看报错信息得知,因为它要去获取cache的值,但是因为还没获取到值,所以直接报错



table渲染代码:
$this.dataTable = table.render({
id: 'select-question-table',
elem: $('table[lay-filter=select-question]', this.element),
method: 'POST',
limit: 20,
page: true,
loading: true,
cols: [
[{
title: '序号',
field: 'index',
align: 'center',
width: 70
}, {
title: '内容',
align: 'center',
minWidth: 709,
templet: function(row) {
let question = action.delHtmlTag(row.question);
let answers = action.delHtmlTag(row.answers);
let html = [];
html.push('<div class="question-content">');
html.push('<span style="color:#888">');
html.push(question);
html.push('</span>');
html.push('<div style="height:5px;border-bottom:1px dashed #cccccc;overflow:hidden"></div>');
html.push('<span class="tips"> 参考答案: ');
html.push(answers);
html.push('</span>');
html.push('</div>');
return html.join("");;
}
}, {
title: '选择',
type: 'checkbox',
width: 70
}]
],
parseData: function(res) { // 将原始数据解析成 table 组件所规定的数据
return {
'code': res.success == true ? '0' : '-1',
'count': res.total, // 解析数据长度
'data': res.rows
};
},
done: function(){
var limit = $(".layui-table-page .layui-laypage-limits option[selected]", $this.element).val();
if(limit){
$this.dataTable.config.limit = parseInt(limit);
}
}
});
查询reload代码:
$this.dataTable.reload({
url: 'eduExamQuestion/findEduExamQuestion',
where: field
});
回帖
  • layui表格的宽度设置不是完全都利用css来的,比如minWidth这个属性,他不会最终落实到css上,而是在计算的时候有一个依据,就是width没有设置,表格要给他们分配宽度的时候如果计算出来的列宽少于整个最小宽度的值会以最小的为主,然后重新计算自动宽度的列宽,所以这个问题不是简单的认为他没有给你加这个样式,这个是他本来的设计就不是如此的,至于为啥失效很可能是因为你设置了minWidth之后是否还有设置了width这个属性,不管是固定值或者百分比,只要设置了minWidth都会不起作用,以width为准,这个文档中有明确的说明:
    局部定义当前常规单元格的最小宽度(默认:60),一般用于列宽自动分配的情况。其优先级高于基础参数中的 cellMinWidth
    第二个现象这边没有出现过,一般要么就是旧的版本的问题,不过我从我使用过的版本开始都没遇到过,更大的可能就是自己使用的问题,所以不给出你的环境的代码第二个现象是没有意义的
    0 回复
  • @岁月小偷 layui版本是2.4.3,主题已编辑,添加了一个问题,并且加上了代码
    0 回复
  • @我骑牛撞交警 问题三,表格不能没有设置url和data,没有数据的话要给data:[],两个都没有设置渲染是会有问题的,table内部没有对这种情况去设定一个data:[]这个是一个缺陷,所以目前只能自己的去屏蔽这种现象
    0 回复
  • @岁月小偷 问题三,data和url,二选一,必填。明白~~
    问题二,我更新版本到2.4.5之后,貌似没这个问题了,不知道是什么问题
    0 回复
  • @我骑牛撞交警 嗯嗯,问题2的个人感觉有可能是你用的layui的js被改过,原始的版本是不会出现这么低级的错误的额一般
    0 回复