概述

上一节，我们给大家主细表的主表和子表的用法，以及主表和子表的分页方法，

本文我们还是通过wijmo.grid.detail模块附带的FlexGridDetailProvider类来完成另一种主细表的表现

本次我们主要还是使用服务器端数据：

此表格显示每行上的产品类别。展开行显示一个HTML元素，其中包含有关该类别中的产品的信息:

主表是产品的简要信息，子表主要是展示产品各项信息

主表模板

   1:   var url = 'http://services.odata.org/Northwind/Northwind.svc';

   2:    var categories = new wijmo.odata.ODataCollectionView(url, 'Categories', {

   3:        fields: ['CategoryID', 'CategoryName', 'Description']

   4:    })

   5:    var products = new wijmo.odata.ODataCollectionView(url, 'Products');

6:

   7:      // shared column definitions

   8:      var categoryColumns = [

   9:          { binding: 'CategoryName', header: 'Category Name', width: '*' },

  10:          { binding: 'Description', header: 'Description', width: '2*' }

  11:      ];

12:

  13:    // get products for a given category

  14:      function getProducts(categoryID) {

  15:        var arr = [];

  16:        products.items.forEach(function(product) {

  17:          if (product.CategoryID == categoryID) {

  18:            arr.push(product);

  19:        }

  20:      });

  21:          return arr;

  22:      }

23:

  24:      // grid with HTML detail

  25:    var htmlDetail = new wijmo.grid.FlexGrid('#htmlDetail', {

  26:        autoGenerateColumns: false,

  27:      columns: categoryColumns,

  28:      itemsSource: categories

  29:    });

然后我们构造子表的模板：

   1:  // html detail provider

   2:      var dpHtml = new wijmo.grid.detail.FlexGridDetailProvider(htmlDetail, {

3:

   4:          // use animation when showing details

   5:      isAnimated: true,

6:

   7:      // create detail cells for a given row

   8:      createDetailCell: function (row) {

9:

  10:          // build detail content for the current category

  11:          var cat = row.dataItem;

  12:        var prods = getProducts(cat.CategoryID);

  13:        var html = 'ID: <b>' + cat.CategoryID + '</b><br/>';

  14:        html += 'Name: <b>' + cat.CategoryName + '</b><br/>';

  15:        html += 'Description: <b>' + cat.Description + '</b><br/>';

  16:        html += 'Products: <b>' + prods.length + ' items</b><br/>';

  17:        html += '<ol>';

  18:              prods.forEach(function(product) {

  19:            html += '<li>' + product.ProductName + '</li>';

  20:        });

  21:              html += '</ol>';

22:

  23:        // create and return detail cell

  24:          var cell = document.createElement('div');

  25:        cell.innerHTML = html;

  26:        return cell;

  27:          }

  28:      });

29:

  30:      // grid with grid detail

  31:    var gridDetail = new wijmo.grid.FlexGrid('#gridDetail', {

  32:        autoGenerateColumns: false,

  33:      columns: categoryColumns,

  34:      itemsSource: categories

  35:    });

36:

  37:    // grid detail provider

  38:      var dpGrid = new wijmo.grid.detail.FlexGridDetailProvider(gridDetail, {

39:

  40:          // use animation when showing details

  41:      isAnimated: true,

42:

  43:      // limit height of detail rows

  44:      maxHeight: 150,

45:

  46:      // create detail cells for a given row

  47:      createDetailCell: function (row) {

  48:          var cell = document.createElement('div');

  49:        var detailGrid = new wijmo.grid.FlexGrid(cell, {

  50:            headersVisibility: wijmo.grid.HeadersVisibility.Column,

  51:          autoGenerateColumns: false,

  52:          itemsSource: getProducts(row.dataItem.CategoryID),

  53:          columns: [

  54:              { header: 'ID', binding: 'ProductID' },

  55:            { header: 'Name', binding: 'ProductName' },

  56:            { header: 'Qty/Unit', binding: 'QuantityPerUnit' },

  57:            { header: 'Unit Price', binding: 'UnitPrice' },

  58:            { header: 'Discontinued', binding: 'Discontinued' }

  59:                  ]

  60:              });

  61:        return cell;

  62:          }

  63:      });

运行效果如下：

Wijmo5实现主细表（二）