Question

我使用gijgo.com/Grid中的gijgo进行datatable控件。到目前为止，对于标准数据加载，它的工作就像魅力一样超级快。但现在我需要连续添加子网格又名网格。如图所示：

Gijgo网站有一些关于生成常规数据表的示例代码，但没有太多生成子网格的信息。

我编写了以下代码来生成主表

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/grid.min.css" rel="stylesheet" />

<table id="grid" style="margin-left:5%;">
  @*<thead>
  <tr>
    <th width="100em" data-field="ProductID">Product ID</th>
    <th data-field="Name">Name</th>
    <th data-field="ProductNumber" data-min-width="250" data-priority="1">Product Number</th>            
  </tr>
  </thead>*@
</table>

@section Scripts{
  <script src="~/Scripts/jquery-2.2.3.min.js"></script>
  <script src="~/Scripts/bootstrap.min.js"></script>
  <script src="~/Scripts/grid.min.js"></script>
  <script>
    $(document).ready(function () {
      var grid = $('#grid').grid({
        columns: [
          { title: 'CategoryID', field: 'Category ID' },
          { title: 'Name', field: 'Name' },
          { title: 'Is Blocked', field: 'Blocked' }
        ],
        dataSource: 'Home/GetData',
        uiLibrary:'bootstrap',
        detailTemplate: '<div class="divT row"><table class="tbl" data-source="Home/GetAllProducts"></table></div>',/*****/
        responsive: true,
        showHiddenColumnsAsDetails: false,
        width: 800,

      });
    })
}

我使用了属性＆＃34; detailTemplate＆＃34;创建Gijgo demo site中提到的详细信息部分。它不会在每一行中生成内部表。内表的数据来自DB。

上面的代码应该列出所有类别作为主要行，并且在每行下面它应该在内部网格中显示该类别的所有产品。

有没有完成我的子网格任务？

Answer 1

我认为如果您使用detailExpand事件在子网格中加载数据，那将是最好的您可以在http://gijgo.com/Grid/Events/detailExpand

了解有关此活动的更多信息

以下是示例：

   var grid, data = [ {ID: 1, Name: 'test 1'}, {ID: 2, Name: 'test 2'}, {ID: 3, Name: 'test 3'} ];
   grid = $('#grid').grid({
         dataSource: '/version_0_6/Grid/GetPlayers',
         detailTemplate: '<div></div>',
         columns: [ { field: 'ID' }, { field: 'Name' }, { field: 'DateOfBirth', type: 'date' } ]
     });
   grid.on('detailExpand', function (e, $detailWrapper, record) {
         var subggrid = $detailWrapper.append('<table id="subgrid"/>').find('table').grid({
           dataSource: data,
           columns: [{ field: 'ID', width: 20 }, { field: 'Name' }],
           pager: { limit: 2 }
         });
         subggrid.on('pageChanging', function (e, newPage) {
             e.stopPropagation();
           });
     });
     grid.on('detailCollapse', function (e, $detailWrapper, record) {
         $detailWrapper.empty();
     });

如何向行添加详细数据？

1 个答案: