如何在jqgrid中使用子表格

avatar
作者
筋斗云
阅读量:3

在jqGrid中使用子表格可以通过以下步骤实现:

  1. 在主表格中设置子表格的属性,包括子表格的名称、展示方式等。
  2. 在子表格中设置需要显示的列信息。
  3. 使用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 }     ]   }); } 

在上面的示例中,主表格中包含了一个子表格,子表格中显示了产品的信息。在展开主表格的每一行时,会加载对应行的子表格数据并显示在子表格中。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!