内嵌表格，报错

内嵌表格，wijmo.grid.detail 报错

mtkj 发表于 2020-8-13 11:49

你好，这个需求可以用动态列宽实现，参考这个示例：
https://demo.grapecity.com.cn/wi ... /ColumnWidth/purejs

这个内嵌表格能有多级的吗，现在我们需要无限级的内嵌，一层接一层的，每层的内嵌字段都不一致

你好，支持多级嵌套，参考代码如下：

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.         // create detail cells for a given row
    
91.         createDetailCell: function (row) {
    
92.             var cell = document.createElement('div');
    
93.             var detailGrid = new wjGrid.FlexGrid(cell, {
    
94.                 isReadOnly: true,
    
95.                 autoGenerateColumns: false,
    
96.                 itemsSource: getProducts(row.dataItem.CategoryID),
    
97.                 columns: [
    
98.                     { header: 'ID', binding: 'ProductID' },
    
99.                     { header: 'Name', binding: 'ProductName' },
    
100.                     { header: 'Qty/Unit', binding: 'QuantityPerUnit' },
     
101.                     { header: 'Unit Price', binding: 'UnitPrice' },
     
102.                     { header: 'Discontinued', binding: 'Discontinued' }
     
103.                 ]
     
104.             });
     
105. 
     
106.             console.log(1);
     
107.             new wjGridDetail.FlexGridDetailProvider(detailGrid, {
     
108.                 //
     
109.                 // use animation when showing details
     
110.                 isAnimated: true,
     
111.                 //
     
112.                 // limit height of detail rows
     
113.                 maxHeight: 150,
     
114.                 //
     
115.                 // create detail cells for a given row
     
116.                 createDetailCell: function (row) {
     
117.                     var cell = document.createElement('div');
     
118.                     var detailGrid = new wjGrid.FlexGrid(cell, {
     
119.                         isReadOnly: true,
     
120.                         autoGenerateColumns: false,
     
121.                         itemsSource: getProducts(row.dataItem.CategoryID),
     
122.                         columns: [
     
123.                             { header: 'ID', binding: 'ProductID' },
     
124.                             { header: 'Name', binding: 'ProductName' },
     
125.                             { header: 'Qty/Unit', binding: 'QuantityPerUnit' },
     
126.                             { header: 'Unit Price', binding: 'UnitPrice' },
     
127.                             { header: 'Discontinued', binding: 'Discontinued' }
     
128.                         ]
     
129.                     });
     
130.                     return cell;
     
131.                 }
     
132.             });
     
133. 
     
134.             return cell;
     
135.         }
     
136.     });
     
137.     //
     
138. }
     

复制代码

将在线示例的app.js完整替换可以看到，第二张表。
https://demo.grapecity.com.cn/wi ... -Detail/NestedGrids(RowDetail)/purejs

你好，这里需要引入一个detail的包，如图：

您好，这个问题还在调研，预计明天中午前回复。

KevinChen 发表于 2020-7-29 18:39
您好，这个问题还在调研，预计明天中午前回复。

了解下调研进度

您好，这里的逻辑是默认的，如果需要上滚显示主row，需要调用父表的方法，参考代码：

1. 
   

复制代码

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: false,
    
86.         //
    
87.         // limit height of detail rows
    
88.         maxHeight: 150,
    
89.         //
    
90.         // create detail cells for a given row
    
91.         createDetailCell: function (row) {
    
92.             var cell = document.createElement('div');
    
93.             var detailGrid = new wjGrid.FlexGrid(cell, {
    
94.                 isReadOnly: true,
    
95.                 autoGenerateColumns: false,
    
96.                 itemsSource: getProducts(row.dataItem.CategoryID),
    
97.                 columns: [
    
98.                     { header: 'ID', binding: 'ProductID' },
    
99.                     { header: 'Name', binding: 'ProductName' },
    
100.                     { header: 'Qty/Unit', binding: 'QuantityPerUnit' },
     
101.                     { header: 'Unit Price', binding: 'UnitPrice' },
     
102.                     { header: 'Discontinued', binding: 'Discontinued' }
     
103.                 ]
     
104.             });
     
105. 
     
106.             console.log(1);
     
107.             var dpGrid2 = new wjGridDetail.FlexGridDetailProvider(detailGrid, {
     
108.                 //
     
109.                 // use animation when showing details
     
110.                 isAnimated: false,
     
111.                 //
     
112.                 // limit height of detail rows
     
113.                 maxHeight: 550,
     
114.                 //
     
115.                 // create detail cells for a given row
     
116.                 createDetailCell: function (row) {
     
117.                     var cell = document.createElement('div');
     
118.                     new wjGrid.FlexGrid(cell, {
     
119.                         isReadOnly: true,
     
120.                         autoGenerateColumns: false,
     
121.                         itemsSource: getProducts(row.dataItem.CategoryID),
     
122.                         columns: [
     
123.                             { header: 'ID', binding: 'ProductID' },
     
124.                             { header: 'Name', binding: 'ProductName' },
     
125.                             { header: 'Qty/Unit', binding: 'QuantityPerUnit' },
     
126.                             { header: 'Unit Price', binding: 'UnitPrice' },
     
127.                             { header: 'Discontinued', binding: 'Discontinued' }
     
128.                         ]
     
129.                     });
     
130.                     setTimeout(function(){
     
131.                         detailGrid.scrollIntoView(0,0)
     
132.                     }, 100);
     
133.                     return cell;
     
134.                 }
     
135.             });
     
136. 
     
137.             return cell;
     
138.         }
     
139.     });
     
140.     //
     
141. }
     

复制代码

示例地址：

https://demo.grapecity.com.cn/wi ... s(RowDetail)/purejs