wijmo grid 内嵌表格 Grids in Row Details
wijmo grid 内嵌表格 Grids in Row Details
可否多个主行的详情表都打开？
FlexGrid的viewRange属性可以拿到当前可见的区域Range对象，参考API：
https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid.flexgrid.html#viewrange
FlexGrid的updatedView事件可以在Grid界面变更后触发，参考：
https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid.flexgrid.html#updatedview
配合isDetailAvailable和isDetailVisible就可以先判断，再执行showDetail
https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid_detail.flexgriddetailprovider.html#isdetailavailable
https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid_detail.flexgriddetailprovider.html#isdetailvisible 你好，可以支持，参考API：
https://www.grapecity.com/wijmo/api/enums/wijmo_grid_detail.detailvisibilitymode.html#expandmulti
用法：
完整代码：
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: <b>' + cat.CategoryID + '</b><br/>';
html += 'Name: <b>' + cat.CategoryName + '</b><br/>';
html += 'Description: <b>' + cat.Description + '</b><br/>';
html += 'Products: <b>' + prods.length + ' items</b><br/>';
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,
detailVisibilityMode: wjGridDetail.DetailVisibilityMode.ExpandMulti,
//
// create detail cells for a given row
createDetailCell: function (row) {
var cell = document.createElement('div');
var detailGrid = 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;
}
});
//
}
示例地址：
https://www.grapecity.com/wijmo/demos/Grid/Master-Detail/NestedGrids(RowDetail)/purejs 直接复制您上述代码， 还是不能自动展开，
（目前只是在展开其中一个后，不会自动收起已经展开的）
是否可以执行一个方法 自动展开全部？
抱歉我理解有误，有个接口可以实现，参考：
https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid_detail.flexgriddetailprovider.html#showdetail 这个需要 “主row” 或者 row Index 来展开， 那如何获取 当前窗口(可视范围内) 的row 和 row index ?如何监测 垂直滚动条的滚动， 以便获取当前可以看到的行 和 row Index ? showDetail(row: any, hideOthers?: boolean): void
这个需要 “主row” 或者 row Index 来展开， 那如何获取 当前窗口(可视范围内) 的row 和 row index ?如何监测 垂直滚动条的滚动， 以便获取当前可以看到的行 和 row Index ?
页:
[1]