明细行

下面表格的每一行代表了一个产品类别。要看到每个类别的产品，通过点击加号展开行。 展开的行会在下面显示一个详细行，包括任意内容（在这个样例中，是一个包含产品信息的网状格）。

详情行是使用FlexGridDetailProvider类实现的。 FlexGridDetailProvider类有一个createDetailCell函数来创建用来显示任意行详情的HTML元素。 详情部分的内容是完全自定义的。

除了createDetailCell函数，FlexGridDetailProvider类还有别的属性，允许你在详情行显示时自定义它们的尺寸等。

使用FlexGridDetailProvider类

这个表格直接使用了FlexGridDetailProvider类。 它指定了一个createDetailCell函数来创建用来显示主行代表类别的产品的子表格。

代码如下所示：

// create FlexGridDetailProvider for "flex" control
var dp = new wijmo.grid.detail.FlexGridDetailProvider(flex);
dp.maxHeight = 250;

// create and host detail cells
dp.createDetailCell = function (row) {
  var cell = document.createElement('div');
  var detailGrid = new wijmo.grid.FlexGrid(cell);
  detailGrid.itemsSource = $scope.getProducts(row.dataItem.CategoryID);
  detailGrid.headersVisibility = wijmo.grid.HeadersVisibility.Column;
  return cell;
}

// remove details from items with odd CategoryID
dp.rowHasDetail = function (row) {
    return row.dataItem.CategoryID % 2 == 0;
}

使用wj-flex-grid-detail指令

这个表格使用wj-flex-grid-detail指令。 这条指令定义在一个拥有子FlexGrid的模板上，用来显示主行代表类别的产品。

标记如下所示：

<wj-flex-grid 
  items-source="categories">
  <wj-flex-grid-column header="Name" binding="CategoryName"></wj-flex-grid-column>
  <wj-flex-grid-column header="Description" binding="Description" width="*"></wj-flex-grid-column>
  <wj-flex-grid-detail max-height="250"  detail-visibility-mode="detailMode">
    <wj-flex-grid 
      items-source="getProducts($item.CategoryID)"
      headers-visibility="Column">
    </wj-flex-grid>
  </wj-flex-grid-detail>
</wj-flex-grid>

选择detailVisibilityMode的属性值来决定什么时候行详情是可见的。

Code Selection ExpandSingle ExpandMulti

使用带有另一个模板的wj-flex-grid-detail指令

下面的表格使用了wj-flex-grid-detail指令，指定一个定义为HTML内容的模板，包括 使用ng-repeat指令创建的列表。

标记如下所示：

<wj-flex-grid 
  items-source="categories">
  <wj-flex-grid-column header="Name" binding="CategoryName"></wj-flex-grid-column>
  <wj-flex-grid-column header="Description" binding="Description" width="*"></wj-flex-grid-column>
  <wj-flex-grid-detail detail-visibility-mode="ExpandSingle">
    ID: <b>{​{$item.CategoryID}}</b><br />
    Name: <b>{​{$item.CategoryName}}</b><br />
    Description: <b>{​{$item.Description}}</b><br />
    <ol>
      <li ng-repeat="p in getProducts($item.CategoryID).items">{​{p.ProductName}}</li>
    </ol>
  </wj-flex-grid-detail>
</wj-flex-grid>

ID: {{$item.CategoryID}}
Name: {{$item.CategoryName}}
Description: {{$item.Description}}

1. {{p.ProductName}}

使用自定义元素显示或隐藏详情

wj-flex-grid-detail指令有一个"control"属性，你可以使用它访问它的FlexGridDetailProvider 类中的方法。在这个样例中，我们在标记中使用这些方法来提供用于展开和折叠详情列的自定义图标。

这个方法的好处是可以完全控制用户的体验，包括用来显示和隐藏详情列的外观和行为。

标记如下所示：

<wj-flex-grid 
  items-source="categories"
  headers-visibility="Column"
  selection-mode="Row">
  <wj-flex-grid-column header="Name" binding="CategoryName" is-read-only="true" width="200">
    <img ng-show="dp.isDetailVisible($row)" ng-click="dp.hideDetail($row)" src="resources/hide.png" />
    <img ng-hide="dp.isDetailVisible($row)" ng-click="dp.showDetail($row, true)" src="resources/show.png" />
    {​{$item.CategoryName}}
  </wj-flex-grid-column>
  <wj-flex-grid-column header="Description" binding="Description" width="2*"></wj-flex-grid-column>
  <wj-flex-grid-detail control="dp" detail-visibility-mode="Code">
    <div style="padding:12px;background-color:#cee6f7">
      ID: <b>{​{$item.CategoryID}}</b><br />
      Name: <b>{​{$item.CategoryName}}</b><br />
      Description: <b>{​{$item.Description}}</b><br />
      <button class="btn btn-default" ng-click="dp.hideDetail($row)">Hide Detail</button>
    </div>
  </wj-flex-grid-detail>
</wj-flex-grid>

{{$item.CategoryName}}

ID: {{$item.CategoryID}}
Name: {{$item.CategoryName}}
Description: {{$item.Description}}
Hide Detail