可以使用 html 标签更改 jqgrid 行布局吗？

Question

我在我的 Web 应用程序中使用 jqgrid 响应式引导版本，没有任何问题。

是否可以将 jqgrid 中的一行格式化为具有 2 行的 html 表格。

例如，假设我有闲置数据：

columnn-1 : 20 个字符长。 columnn-2 : 20 个字符长。 columnn-3 : 最长 200 个字符（带有垂直滚动条的文本区域）

是否有可能通过在 jqgrid 行中使用自定义格式化程序来显示我们在 html 表中使用 colspan 所做的数据？

<table border="1">
    <tr>
        <td align='center'>Column-1</td>
        <td align='center'>Column-2</td>
    </tr>
    <tr>
        <td colspan="2" align='center'>Column-3</td>
    </tr>
</table>

table

谢谢。

Answer 1

下面的代码可以满足您的需求。请注意使用 afterInserRow 事件并将 gridview 参数设置为 false：

    var mynewdata = [
        {id: "id1", Col1 : "data11", Col2: "data12", Col3: "data13"},
        {id: "id2", Col1 : "data21", Col2: "data22", Col3: "data23"},
        {id: "id3", Col1 : "data31", Col2: "data32", Col3: "data33"},
        {id: "id4", Col1 : "data41", Col2: "data42", Col3: "data43"}
    ];

    $(document).ready(function () {
       $("#jqGrid").jqGrid({
            datatype: "local",
            data: mynewdata,
            height: 250,
            width: 780,
            colModel: [
                { name: 'id', hidden: true, key: true},
                { name: 'Col1', width: 75 },
                { name: 'Col2', width: 90 },
                { name: 'Col3', width: 100, hidden: true }
            ],          
            gridview : false,
            afterInsertRow: function(id, rowdata, curr) {
                var newid = id+"1";
                var data = '<tr role="row" id="'+newid+'" tabindex="-1" class="jqgrow ui-row-ltr ui-widget-content">';
                data += '<td colspan="2" role="gridcell" style="text-align:center" title="data11" aria-describedby="jqGrid_Col1">'+rowdata.Col3+'</td>';
                data += '</tr>';
                $("#"+id).parent().append(data);
            }
        });
});