jsGrid子网格（Subgrid）跨整行显示历史数据的实现问题

我明白你现在遇到的问题——嵌套的历史数据表格没法占满整个行的宽度，对吧？这是因为你之前的嵌套结构没处理好表格的列合并逻辑，咱们来一步步修正：

问题根源 #

你之前直接把嵌套的jsGrid放在<tr>里，但HTML表格的<tr>必须包含<td>元素才能正确布局；而且要让这个嵌套表格占满整行，必须给对应的<td>设置colspan属性，让它横跨主表格的所有列。

修正后的代码 #

$("#jsGrid").jsGrid({
    // 你的其他配置项...
    rowRenderer: function(item) {
        // 获取主表格的列数，用来设置colspan
        const columnCount = this.fields.length;
        
        // 构建主数据行
        const row = $("<tr>");
        const items = Object.keys(item);
        
        items.forEach(function(key, index) {
            // 按照你的原有逻辑跳过最后一个键
            if(key !== items[items.length-1]) {
                const cell = $("<td>").addClass("jsgrid-cell").append(item[key]);
                row.append(cell);
            }
        });
        
        // 构建嵌套行：先创建tr，里面放一个跨所有列的td
        const nestedRow = $("<tr>").addClass("nested-grid").hide();
        const nestedCell = $("<td>").attr("colspan", columnCount); // 关键：设置colspan
        
        // 在嵌套单元格里初始化历史数据表格
        nestedCell.jsGrid({
            width: "100%",
            height: "auto",
            editing: false,
            data: [{"a":"d1","b": "d2"},{"a":"d3","b":"d4"},{"a":"d5","b":"d6"}],
            heading: false,
            fields: [
                { name: "a", type: "text"},
                { name: "b", type: "text"}
            ]
        });
        
        // 把单元格加到嵌套行里
        nestedRow.append(nestedCell);
        
        // 点击主行切换嵌套行显示/隐藏
        row.click(function () {
            nestedRow.toggle();
        });
        
        // 返回主行和嵌套行
        return row.add(nestedRow);
    }
});

关键修改点 #

• 添加colspan属性：给嵌套行里的<td>设置colspan为this.fields.length（主表格的列数），确保它能横跨整个表格宽度。
• 调整嵌套结构：把历史数据表格放在<td>内部，再把这个<td>放到<tr>里，符合HTML表格的规范结构。
• 动态获取列数：用this.fields.length来获取主表格的列数，避免硬编码，适配不同的列配置。

这样修改后，你的历史数据表格就能完美占满整个行的宽度啦～

内容的提问来源于stack exchange，提问作者amdg