table复杂表头错误问题,请大神看下是我配置问题还是bug

提问 已结 14 416
Tyland飞易腾
悬赏:20飞吻
版本:layui 2.6 浏览器:谷歌
这是表格代码,怎么看配置都没问题
table.render({
elem: '#tablist',
url: '/api/',
cols: [
[
{ width: 100, title: '部门' },
{ title: '一车间', colspan:7},
{ width:100, title: '填报时间' },
{ title: '2019/5/16 11:27:24', colspan: 2 }
],
[
{ field: 'name', width: 100, title: '姓名', rowspan: 2 },
{ field: 'jjgz', width: 100, title: '计件工资', edit:'number', rowspan: 2 },
{ title: '奖、罚', align:'center', colspan: 4 },
{ field: 'xjgz', width: 100, title: '休假工资', edit: 'number', rowspan: 2 },
{ field: 'wjggz', width: 150, title: '未进岗基础工资', edit: 'number', rowspan: 2 },
{ field: 'qtgz', width: 100, title: '其它', edit: 'number', rowspan: 2 },
{ field: 'total', width: 100, title: '合计', rowspan: 2 },
{
width: 100, title: '操作', rowspan: 2, templet: function () {
return '<a class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon layui-icon-ok"></i> 保存</a>';
}
},
],
[
{ field: 'jF_ZL', width: 100, title: '质量', edit: 'number' },
{ field: 'jF_QQ', width: 100, title: '缺勤', edit: 'number' },
{ field: 'jF_SB', width: 100, title: '设备', edit:'number' },
{ field: 'jF_QT', width: 100, title: '其它', edit: 'number' },
]
],
page: false,
id: 'tables'
});
下面是生成的内容



不知道为什么多出来一列

我用vscode  写了一遍,和配置一样,没问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{width:100%;}
table td{padding:10px; border: 1px solid #ccc;}
</style>
</head>
<body>
<table>
<tr>
<td>部门</td>
<td colspan="7">车间一</td>
<td>填报日期</td>
<td colspan="2">时间</td>
</tr>
<tr>
<td rowspan="2">姓名</td>
<td rowspan="2">计件工资</td>
<td colspan="4">奖罚</td>
<td rowspan="2">休假工资</td>
<td rowspan="2">未进岗基础工资</td>
<td rowspan="2">其它</td>
<td rowspan="2">合计</td>
<td rowspan="2">操作</td>
</tr>
<tr>
<td>质量</td>
<td>缺勤</td>
<td>设备</td>
<td>其它</td>
</tr>
</table>
</body>
</html>
测试预览内容

回帖
  • table.render({
    elem: '#tablist',
    url: '/api/',
    cols: [
    [
    { width: 100, title: '部门', colGroup: true }, //这里加参数colGroup:true
    { title: '一车间', colspan:7},
    { width:100, title: '填报时间', colGroup: true }, //这里加参数colGroup:true
    { title: '2019/5/16 11:27:24', colspan: 2 }
    ],
    [
    { field: 'name', width: 100, title: '姓名', rowspan: 2 },
    { field: 'jjgz', width: 100, title: '计件工资', edit:'number', rowspan: 2 },
    { title: '奖、罚', align:'center', colspan: 4 },
    { field: 'xjgz', width: 100, title: '休假工资', edit: 'number', rowspan: 2 },
    { field: 'wjggz', width: 150, title: '未进岗基础工资', edit: 'number', rowspan: 2 },
    { field: 'qtgz', width: 100, title: '其它', edit: 'number', rowspan: 2 },
    { field: 'total', width: 100, title: '合计', rowspan: 2 },
    {
    width: 100, title: '操作', rowspan: 2, templet: function () {
    return '<a class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon layui-icon-ok"></i> 保存</a>';
    }},
    ],
    [
    { field: 'jF_ZL', width: 100, title: '质量', edit: 'number' },
    { field: 'jF_QQ', width: 100, title: '缺勤', edit: 'number' },
    { field: 'jF_SB', width: 100, title: '设备', edit:'number' },
    { field: 'jF_QT', width: 100, title: '其它', edit: 'number' },
    ]
    ],
    page: false,
    id: 'tables'
    });
    0 回复
  • 未进岗那列, 宽度多出了50
    0 回复
  • @希望的曙光 不是的,改把那150改成100,还是这样,没变化,只不过那列变窄了,最后还是多出一列
    0 回复
  • 大佬都来看看啊
    0 回复
  • 部门和车间一这两列
    0 回复
  • 第一行表头跨一列的要改成至少跨两列
    0 回复

  • 0 回复
  • 部门和填报时间这两列有问题。
    加上操作一列,事实上实际效果应该是多出两列,而不是你说的多出一列。
    0 回复


  • 建议写法
    table.render({
    elem: '#tablist',
    url: 'json/temp.json',
    cols: [
    [
    { field: 'name', width: 100, title: '姓名', rowspan: 3},
    { title: '部门:一车间', colspan:7},
    { width:100, title: '填报时间: 2019/5/16 11:27:24', colspan: 3 },
    ],
    [
    { field: 'jjgz', width: 100, title: '计件工资', edit:'number', rowspan: 2 },
    { title: '奖、罚', align:'center', colspan: 4 },
    { field: 'xjgz', width: 100, title: '休假工资', edit: 'number', rowspan: 2 },
    { field: 'wjggz', width: 150, title: '未进岗基础工资', edit: 'number', rowspan: 2 },
    { field: 'qtgz', width: 100, title: '其它', edit: 'number', rowspan: 2 },
    { field: 'total', width: 100, title: '合计', rowspan: 2 },
    {
    width: 100, title: '操作', rowspan: 2, templet: function () {
    return '<a class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon layui-icon-ok"></i> 保存</a>';
    }
    },
    ],
    [
    { field: 'jF_ZL', width: 100, title: '质量', edit: 'number' },
    { field: 'jF_QQ', width: 100, title: '缺勤', edit: 'number' },
    { field: 'jF_SB', width: 100, title: '设备', edit:'number' },
    { field: 'jF_QT', width: 100, title: '其它', edit: 'number' },
    ]
    ],
    page: false,
    id: 'tables'
    });
    0 回复
  • @希望的曙光 还是不对,我做了一个demo,可以下载帮忙看下
    文件下载
    0 回复