内嵌表格，报错

登录

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

KevinChen · KevinChen

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

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

mtkj · mtkj

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

KevinChen · KevinChen

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

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjOdata from '@grapecity/wijmo.odata';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjGridDetail from '@grapecity/wijmo.grid.detail';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// get OData categories and products
var url = 'https://services.odata.org/Northwind/Northwind.svc';
var categories = new wjOdata.ODataCollectionView(url, 'Categories', {
fields: ['CategoryID', 'CategoryName', 'Description']
});
var products = new wjOdata.ODataCollectionView(url, 'Products');
//
// shared column definitions
var categoryColumns = [
{ binding: 'CategoryName', header: 'Category Name', width: '*' },
{ binding: 'Description', header: 'Description', width: '2*' }
];
//
// get products for a given category
function getProducts(categoryID) {
var arr = [];
products.items.forEach(function (product) {
if (product.CategoryID == categoryID) {
arr.push(product);
}
});
return arr;
}
//
// grid with HTML detail
var htmlDetail = new wjGrid.FlexGrid('#htmlDetail', {
autoGenerateColumns: false,
columns: categoryColumns,
itemsSource: categories,
isReadOnly: true
});
//
// html detail provider
var dpHtml = new wjGridDetail.FlexGridDetailProvider(htmlDetail, {
//
// use animation when showing details
isAnimated: true,
//
// create detail cells for a given row
createDetailCell: function (row) {
//
// build detail content for the current category
var cat = row.dataItem;
var prods = getProducts(cat.CategoryID);
var html = 'ID: ' + cat.CategoryID + ' ';
html += 'Name: ' + cat.CategoryName + ' ';
html += 'Description: ' + cat.Description + ' ';
html += 'Products: ' + prods.length + ' items ';
html += '<ol>';
prods.forEach(function (product) {
html += '<li>' + product.ProductName + '</li>';
});
html += '</ol>';
//
// create and return detail cell
var cell = document.createElement('div');
cell.innerHTML = html;
return cell;
}
});
//
// grid with grid detail
var gridDetail = new wjGrid.FlexGrid('#gridDetail', {
autoGenerateColumns: false,
columns: categoryColumns,
itemsSource: categories,
isReadOnly: true
});
//
// grid detail provider
var dpGrid = new wjGridDetail.FlexGridDetailProvider(gridDetail, {
//
// use animation when showing details
isAnimated: true,
//
// limit height of detail rows
maxHeight: 150,
//
// create detail cells for a given row
createDetailCell: function (row) {
var cell = document.createElement('div');
var detailGrid = new wjGrid.FlexGrid(cell, {
isReadOnly: true,
autoGenerateColumns: false,
itemsSource: getProducts(row.dataItem.CategoryID),
columns: [
{ header: 'ID', binding: 'ProductID' },
{ header: 'Name', binding: 'ProductName' },
{ header: 'Qty/Unit', binding: 'QuantityPerUnit' },
{ header: 'Unit Price', binding: 'UnitPrice' },
{ header: 'Discontinued', binding: 'Discontinued' }
]
});
console.log(1);
new wjGridDetail.FlexGridDetailProvider(detailGrid, {
//
// use animation when showing details
isAnimated: true,
//
// limit height of detail rows
maxHeight: 150,
//
// create detail cells for a given row
createDetailCell: function (row) {
var cell = document.createElement('div');
var detailGrid = new wjGrid.FlexGrid(cell, {
isReadOnly: true,
autoGenerateColumns: false,
itemsSource: getProducts(row.dataItem.CategoryID),
columns: [
{ header: 'ID', binding: 'ProductID' },
{ header: 'Name', binding: 'ProductName' },
{ header: 'Qty/Unit', binding: 'QuantityPerUnit' },
{ header: 'Unit Price', binding: 'UnitPrice' },
{ header: 'Discontinued', binding: 'Discontinued' }
]
});
return cell;
}
});
return cell;
}
});
//
}

复制代码

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

mtkj · mtkj

KevinChen · KevinChen

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

mtkj · mtkj

KevinChen · KevinChen

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

mtkj · mtkj

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

了解下调研进度

KevinChen · KevinChen

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

复制代码

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjOdata from '@grapecity/wijmo.odata';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjGridDetail from '@grapecity/wijmo.grid.detail';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// get OData categories and products
var url = 'https://services.odata.org/Northwind/Northwind.svc';
var categories = new wjOdata.ODataCollectionView(url, 'Categories', {
fields: ['CategoryID', 'CategoryName', 'Description']
});
var products = new wjOdata.ODataCollectionView(url, 'Products');
//
// shared column definitions
var categoryColumns = [
{ binding: 'CategoryName', header: 'Category Name', width: '*' },
{ binding: 'Description', header: 'Description', width: '2*' }
];
//
// get products for a given category
function getProducts(categoryID) {
var arr = [];
products.items.forEach(function (product) {
if (product.CategoryID == categoryID) {
arr.push(product);
}
});
return arr;
}
//
// grid with HTML detail
var htmlDetail = new wjGrid.FlexGrid('#htmlDetail', {
autoGenerateColumns: false,
columns: categoryColumns,
itemsSource: categories,
isReadOnly: true
});
//
// html detail provider
var dpHtml = new wjGridDetail.FlexGridDetailProvider(htmlDetail, {
//
// use animation when showing details
isAnimated: true,
//
// create detail cells for a given row
createDetailCell: function (row) {
//
// build detail content for the current category
var cat = row.dataItem;
var prods = getProducts(cat.CategoryID);
var html = 'ID: ' + cat.CategoryID + ' ';
html += 'Name: ' + cat.CategoryName + ' ';
html += 'Description: ' + cat.Description + ' ';
html += 'Products: ' + prods.length + ' items ';
html += '<ol>';
prods.forEach(function (product) {
html += '<li>' + product.ProductName + '</li>';
});
html += '</ol>';
//
// create and return detail cell
var cell = document.createElement('div');
cell.innerHTML = html;
return cell;
}
});
//
// grid with grid detail
var gridDetail = new wjGrid.FlexGrid('#gridDetail', {
autoGenerateColumns: false,
columns: categoryColumns,
itemsSource: categories,
isReadOnly: true
});
//
// grid detail provider
var dpGrid = new wjGridDetail.FlexGridDetailProvider(gridDetail, {
//
// use animation when showing details
isAnimated: false,
//
// limit height of detail rows
maxHeight: 150,
//
// create detail cells for a given row
createDetailCell: function (row) {
var cell = document.createElement('div');
var detailGrid = new wjGrid.FlexGrid(cell, {
isReadOnly: true,
autoGenerateColumns: false,
itemsSource: getProducts(row.dataItem.CategoryID),
columns: [
{ header: 'ID', binding: 'ProductID' },
{ header: 'Name', binding: 'ProductName' },
{ header: 'Qty/Unit', binding: 'QuantityPerUnit' },
{ header: 'Unit Price', binding: 'UnitPrice' },
{ header: 'Discontinued', binding: 'Discontinued' }
]
});
console.log(1);
var dpGrid2 = new wjGridDetail.FlexGridDetailProvider(detailGrid, {
//
// use animation when showing details
isAnimated: false,
//
// limit height of detail rows
maxHeight: 550,
//
// create detail cells for a given row
createDetailCell: function (row) {
var cell = document.createElement('div');
new wjGrid.FlexGrid(cell, {
isReadOnly: true,
autoGenerateColumns: false,
itemsSource: getProducts(row.dataItem.CategoryID),
columns: [
{ header: 'ID', binding: 'ProductID' },
{ header: 'Name', binding: 'ProductName' },
{ header: 'Qty/Unit', binding: 'QuantityPerUnit' },
{ header: 'Unit Price', binding: 'UnitPrice' },
{ header: 'Discontinued', binding: 'Discontinued' }
]
});
setTimeout(function(){
detailGrid.scrollIntoView(0,0)
}, 100);
return cell;
}
});
return cell;
}
});
//
}

复制代码

示例地址：

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

		自动登录	找回密码
密码			立即注册

[已处理] 内嵌表格，报错

最佳答案

10 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章