js cols 设置二级表头表格填充数据时多出一倍空白列

Question

cols : [[
{field:'inter_code',width:150,title:'接口调用代码'}
,{field:'interface_code',width:150,title:'0'}
,{field:'inter_description',width:150,title:'接口调用说明'}
,{field:'interface_description',width:150,title:'接口调用成功'}
,{field:'res_description',width:150,title:'结果描述'}
,{field:'results_description',width:150,title:'查无此设备'}
], [
{field:'box_ip', width:150, title: '机顶盒IP', sort: true}
,{field:'business_account', width:150, title: '业务账号'}
,{field:'box_type', width:150, title: '机顶盒型号'}
,{field:'box_mac', width:150, title: '机顶盒MAC'}
,{field:'box_sn', width:150, title: '机顶盒sn号'}
,{field:'box_version', title: '机顶盒软件版本', width: 150}
]],

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要解决在使用 jQuery 和 tablesorter 框架设置的表格中出现的一行额外空格的问题，你可以尝试以下步骤：

1. 确保字段名称正确：检查你的表格中的每一列是否都以正确的格式（例如 field:'column_name'）设置。这可能是因为你将 cols 属性的格式错误地写成了 [[[...]]] 或者是由于字段名称拼写不正确。

2. 验证是否有多余的空格或换行符：在你的 HTML 中，确保所有的文本框、标签和属性值都是有效的。特别是对于 colspan 或 rowspan 类型的属性，它们应该只包含数字或者一个单引号内的字符串。

3. 更新样式规则：如果你的 CSS 规则包括了对这些空格的处理，那么你应该检查它是否被误用或者过时。确保所有空格都被正确地删除或者替换为适当的字符。

4. 检查数据源：如果问题仍然存在，可能是你的服务器返回的数据结构发生了变化。重新加载数据并确认没有丢失任何信息。

5. 使用 JavaScript 更新布局：为了更精确地控制显示的单元格数量，可以考虑使用 JavaScript 来动态调整表格布局。例如，你可以通过添加一行新的单元格来增加列数，并且删除多余的空格来解决问题。

// 获取表格元素
var table = $('#your-table');

// 添加一行新单元格
table.append('<tr></tr>');

// 删除多余的空格
table.find('th').each(function(index) {
    $(this).html($(this).text().replace(/\s/g,''));
});

// 使用tablesorter框架
$(table).DataTable();

// 验证数据准确性
var data = [
    // 数据示例
];

$.ajax({
    url: 'your-api-url',
    type: 'POST',
    data: JSON.stringify(data),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(response){
        console.log(response);
    },
    error: function(xhr, status, error){
        console.error(error);
    }
});

以上方法可以帮助你找到并修复导致额外空格的原因。如果你能提供具体的代码片段或详细的信息，我可以为你提供更具体的操作建议。