Closed zamhown closed 3 months ago
列头或者行头存在虚拟表头时,下面的单元格存在两个问题:
let tableInstance; const input_editor = new VTable_editors.InputEditor(); VTable.register.editor('input-editor', input_editor); fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_Chart_data.json') .then(res => res.json()) .then(data => { const option = { records: data, rows: [ { dimensionKey: 'Category', title: 'Category', headerStyle: { textStick: true }, width: 'auto' }, { dimensionKey: 'Sub-Category', title: 'Sub-Catogery', headerStyle: { textStick: true }, width: 'auto' } ], columns: [ { dimensionKey: 'Segment', title: 'Segment', headerStyle: { textStick: true }, format: rec => { return 'kkk'; }, } ], columnTree: [ { dimensionKey: 'Sment-1', value: 'Segment-1 (virtual-node)', virtual: true, children: [ { dimensionKey: 'Segment', value: 'Consumer', children: [ { indicatorKey: 'Quantity', value: 'Quantity' }, { indicatorKey: 'Sales', value: 'Sales' }, { indicatorKey: 'Profit', value: 'Profit' } ] }, { dimensionKey: 'Segment', value: 'Corporate', children: [ { indicatorKey: 'Quantity', value: 'Quantity' }, { indicatorKey: 'Sales', value: 'Sales' }, { indicatorKey: 'Profit', value: 'Profit' } ] } ] }, { dimensionKey: 'Segment', value: 'Home Office', children: [ { dimensionKey: 'Segment-2', value: 'Segment-2 (virtual-node)', virtual: true, children: [ { indicatorKey: 'Quantity', value: 'Quantity' }, { indicatorKey: 'Sales', value: 'Sales' }, { indicatorKey: 'Profit', value: 'Profit' } ] } ] }, { dimensionKey: 'Segment', value: 'Column Totals', children: [ { indicatorKey: 'Quantity', value: 'Quantity' }, { indicatorKey: 'Sales', value: 'Sales' }, { indicatorKey: 'Profit', value: 'Profit' } ] } ], indicators: [ { indicatorKey: 'Quantity', title: 'Quantity', width: 'auto', showSort: false, headerStyle: { fontWeight: 'normal' }, style: { padding: [16, 28, 16, 28], } }, { indicatorKey: 'Sales', title: 'Sales', width: 'auto', showSort: false, headerStyle: { fontWeight: 'normal' }, format: rec => { return '$' + Number(rec).toFixed(2); }, style: { padding: [16, 28, 16, 28], } }, { indicatorKey: 'Profit', title: 'Profit', width: 'auto', showSort: false, headerStyle: { fontWeight: 'normal' }, format: rec => { return '$' + Number(rec).toFixed(2); }, style: { padding: [16, 28, 16, 28] } } ], corner: { titleOnDimension: 'row' }, dataConfig: { totals: { row: { showGrandTotals: true, showSubTotals: true, showSubTotalsOnTop: true, showGrandTotalsOnTop: true, subTotalsDimensions: ['Category'], grandTotalLabel: 'Row Totals', subTotalLabel: 'Sub Totals' }, column: { showGrandTotals: true, showSubTotals: false, grandTotalLabel: 'Column Totals' } } }, theme: VTable.themes.DEFAULT.extends({ headerStyle: { bgColor: '#5071f9', color(args) { if ( (args.cellHeaderPaths.colHeaderPaths?.length === 1 && args.cellHeaderPaths.colHeaderPaths[0].virtual) || (args.cellHeaderPaths.colHeaderPaths?.length === 2 && args.cellHeaderPaths.colHeaderPaths[1].virtual) ) { return 'red'; } return '#fff'; } }, cornerHeaderStyle: { bgColor: '#5071f9', color: '#fff' } }), editor: 'input-editor', editCellTrigger: 'click', widthMode: 'standard' }; tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID), option); window.tableInstance = tableInstance; });
列头或者行头存在虚拟表头时,下面的单元格存在两个问题: