主从表的从表数据是异步获取的时候，从表无法渲染显示，要如何设置？

收藏

主从表的从表数据是异步获取的时候，从表无法渲染显示，要如何设置？
（非异步数据是可以显示的，异步获取数据则无法展开，查看代码，没有看到从表的内容行，只有表头）

KevinChen · KevinChen

您好，通过您的描述，我无法定位并重现这个问题，想了解您采用的是分离主从表还是内嵌主从表？具体怎么修改数据和刷新UI的呢？建议您可以提供一个能重现问题的Demo，或者在官网示例上重现这个问题~
主从分离表：https://demo.grapecity.com.cn/wi ... eparateGrids/purejs
主从内嵌表：https://demo.grapecity.com.cn/wi ... -Detail/NestedGrids(RowDetail)/purejs

Fishborne · Fishborne

是内嵌主从表，当点击主表行的“+”号试图展开从表时，
当从表数据是异步数据时，就无法展开，控件没有反应，也没有报错

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
});
//
// 保存子表引用
var testDetail;
// 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');
testDetail = new wjGrid.FlexGrid(cell, {
headersVisibility: wjGrid.HeadersVisibility.Column,
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;
}
});
document.getElementById("btn").addEventListener('click',()=>{
// 只有展开子表时才能打印出数据来。
console.log(testDetail);
});
//
}

复制代码

测试地址：
https://www.grapecity.com/wijmo/ ... s(RowDetail)/purejs

所以请debug检查createDetailCell中的逻辑执行是否正确，加载数据是否成功。

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

[已处理] 主从表的从表数据是异步获取的时候，从表无法渲染显示，要如何设置？

3 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章