在jqGrid中使用子表格可以通過以下步驟實現:
以下是一個示例代碼,演示如何在jqGrid中使用子表格:
$("#grid").jqGrid({
url: 'data.json',
datatype: 'json',
mtype: 'GET',
colModel: [
{ name: 'id', index: 'id', key: true, hidden: true },
{ name: 'name', index: 'name', width: 200 },
{ name: 'age', index: 'age', width: 100 },
{ name: 'company', index: 'company', width: 300 }
],
subGrid: true,
subGridRowExpanded: showSubGrid
});
function showSubGrid(subgrid_id, row_id) {
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t";
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table>");
$("#" + subgrid_table_id).jqGrid({
url: 'sub_data.json?foo=' + row_id,
datatype: 'json',
colModel: [
{ name: 'id', index: 'id', key: true, hidden: true },
{ name: 'product', index: 'product', width: 200 },
{ name: 'price', index: 'price', width: 100 },
{ name: 'quantity', index: 'quantity', width: 100 },
{ name: 'total', index: 'total', width: 100 }
]
});
}
在上面的示例中,主表格中包含了一個子表格,子表格中顯示了產品的信息。在展開主表格的每一行時,會加載對應行的子表格數據并顯示在子表格中。