wijmo grid 内嵌表格 Grids in Row Details

wijmo grid 内嵌表格 Grids in Row Details
可否多个主行的详情表都打开？

FlexGrid的viewRange属性可以拿到当前可见的区域Range对象，参考API：
https://demo.grapecity.com.cn/wi ... grid.html#viewrange

FlexGrid的updatedView事件可以在Grid界面变更后触发，参考：
https://demo.grapecity.com.cn/wi ... id.html#updatedview

配合isDetailAvailable和isDetailVisible就可以先判断，再执行showDetail
https://demo.grapecity.com.cn/wi ... l#isdetailavailable
https://demo.grapecity.com.cn/wi ... tml#isdetailvisible

你好，可以支持，参考API：

https://www.grapecity.com/wijmo/ ... de.html#expandmulti

用法：



完整代码：

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import * as wjOdata from '@grapecity/wijmo.odata';
   
5. import * as wjGrid from '@grapecity/wijmo.grid';
   
6. import * as wjGridDetail from '@grapecity/wijmo.grid.detail';
   
7. //
   
8. document.readyState === 'complete' ? init() : window.onload = init;
   
9. //
   
10. function init() {
    
11.     //
    
12.     // get OData categories and products
    
13.     var url = 'https://services.odata.org/Northwind/Northwind.svc';
    
14.     var categories = new wjOdata.ODataCollectionView(url, 'Categories', {
    
15.         fields: ['CategoryID', 'CategoryName', 'Description']
    
16.     });
    
17.     var products = new wjOdata.ODataCollectionView(url, 'Products');
    
18.     //
    
19.     // shared column definitions
    
20.     var categoryColumns = [
    
21.         { binding: 'CategoryName', header: 'Category Name', width: '*' },
    
22.         { binding: 'Description', header: 'Description', width: '2*' }
    
23.     ];
    
24.     //
    
25.     // get products for a given category
    
26.     function getProducts(categoryID) {
    
27.         var arr = [];
    
28.         products.items.forEach(function (product) {
    
29.             if (product.CategoryID == categoryID) {
    
30.                 arr.push(product);
    
31.             }
    
32.         });
    
33.         return arr;
    
34.     }
    
35.     //
    
36.     // grid with HTML detail
    
37.     var htmlDetail = new wjGrid.FlexGrid('#htmlDetail', {
    
38.         autoGenerateColumns: false,
    
39.         columns: categoryColumns,
    
40.         itemsSource: categories,
    
41.         isReadOnly: true
    
42.     });
    
43.     //
    
44.     // html detail provider
    
45.     var dpHtml = new wjGridDetail.FlexGridDetailProvider(htmlDetail, {
    
46.         //
    
47.         // use animation when showing details
    
48.         isAnimated: true,
    
49.         //
    
50.         // create detail cells for a given row
    
51.         createDetailCell: function (row) {
    
52.             //
    
53.             // build detail content for the current category
    
54.             var cat = row.dataItem;
    
55.             var prods = getProducts(cat.CategoryID);
    
56.             var html = 'ID: <b>' + cat.CategoryID + '</b><br/>';
    
57.             html += 'Name: <b>' + cat.CategoryName + '</b><br/>';
    
58.             html += 'Description: <b>' + cat.Description + '</b><br/>';
    
59.             html += 'Products: <b>' + prods.length + ' items</b><br/>';
    
60.             html += '<ol>';
    
61.             prods.forEach(function (product) {
    
62.                 html += '<li>' + product.ProductName + '</li>';
    
63.             });
    
64.             html += '</ol>';
    
65.             //
    
66.             // create and return detail cell
    
67.             var cell = document.createElement('div');
    
68.             cell.innerHTML = html;
    
69.             return cell;
    
70.         }
    
71.     });
    
72.     //
    
73.     // grid with grid detail
    
74.     var gridDetail = new wjGrid.FlexGrid('#gridDetail', {
    
75.         autoGenerateColumns: false,
    
76.         columns: categoryColumns,
    
77.         itemsSource: categories,
    
78.         isReadOnly: true
    
79.     });
    
80.     //
    
81.     // grid detail provider
    
82.     var dpGrid = new wjGridDetail.FlexGridDetailProvider(gridDetail, {
    
83.         //
    
84.         // use animation when showing details
    
85.         isAnimated: true,
    
86.         //
    
87.         // limit height of detail rows
    
88.         maxHeight: 150,
    
89. 
    
90.         detailVisibilityMode: wjGridDetail.DetailVisibilityMode.ExpandMulti,
    
91.         //
    
92.         // create detail cells for a given row
    
93.         createDetailCell: function (row) {
    
94.             var cell = document.createElement('div');
    
95.             var detailGrid = new wjGrid.FlexGrid(cell, {
    
96.                 headersVisibility: wjGrid.HeadersVisibility.Column,
    
97.                 isReadOnly: true,
    
98.                 autoGenerateColumns: false,
    
99.                 itemsSource: getProducts(row.dataItem.CategoryID),
    
100.                 columns: [
     
101.                     { header: 'ID', binding: 'ProductID' },
     
102.                     { header: 'Name', binding: 'ProductName' },
     
103.                     { header: 'Qty/Unit', binding: 'QuantityPerUnit' },
     
104.                     { header: 'Unit Price', binding: 'UnitPrice' },
     
105.                     { header: 'Discontinued', binding: 'Discontinued' }
     
106.                 ]
     
107.             });
     
108.             return cell;
     
109.         }
     
110.     });
     
111.     //
     
112. }
     

复制代码

示例地址：

https://www.grapecity.com/wijmo/ ... -Detail/NestedGrids(RowDetail)/purejs

直接复制您上述代码， 还是不能自动展开，
（目前只是在展开其中一个后，不会自动收起已经展开的）
是否可以执行一个方法 自动展开全部？  

抱歉我理解有误，有个接口可以实现，参考：

https://demo.grapecity.com.cn/wi ... der.html#showdetail

这个需要 “主row” 或者 row Index 来展开， 那如何获取 当前窗口(可视范围内) 的row 和 row index ?  如何监测 垂直滚动条的滚动， 以便获取当前可以看到的行 和 row Index ?

showDetail(row: any, hideOthers?: boolean): void

这个需要 “主row” 或者 row Index 来展开， 那如何获取 当前窗口(可视范围内) 的row 和 row index ?  如何监测 垂直滚动条的滚动， 以便获取当前可以看到的行 和 row Index ?