国家  china

Wijmo5实现主细表(二)

概述

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

本文我们还是通过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:    });

 

image

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

   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:      });

运行效果如下:

1

更多信息请参照:

Wijmo产品网站:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo中文文档:http://wijmo.gcpowertools.com.cn/5/docs/

Wijmo中文学习教程:http://demo.gcpowertools.com.cn/wijmo5/learningwijmo/

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/Wijmo5-Main-Detail-2.aspx

不允许评论