本帖最后由 Lynn.Dou 于 2022-1-13 18:22 编辑
版本:最新
描述
1、在sheet1添加一个表格;
2、在sheet2同样也添加一个表格,
3、设置sheet2中金额的第一行等于sheet1金额的和
4、移动sheet2的金额的这一列到Item前面
结果:B2引入公式已经发生了改变,没移动前:=SUM(tableSales[[#Data], [金额]]),移动后:=SUM(tableSales[[#Data], [Delivered]])
测试demo
- import * as React from 'react';
- import * as ReactDOM from 'react-dom';
- import '@grapecity/spread-sheets-resources-zh';
- GC.Spread.Common.CultureManager.culture("zh-cn");
- import GC from '@grapecity/spread-sheets';
- import { SpreadSheets } from '@grapecity/spread-sheets-react';
- import './styles.css';
- const Component = React.Component;
- const GCsheets = GC.Spread.Sheets;
- function _getElementById(id) {
- return document.getElementById(id);
- }
- class App extends Component {
- constructor(props) {
- super(props);
- this.spread = null;
- this.table = null;
- this.state = {
- dirtyRowsValue: null
- };
- }
- render() {
- return (
- <div class="sample-tutorial">
- <div class="sample-spreadsheets">
- <SpreadSheets workbookInitialized={spread=>this.initSpread(spread)}>
- </SpreadSheets>
- </div>
- <Panel
- dirtyRowsValue={this.state.dirtyRowsValue}
- onGetDirtyRowsClickEvent={(e)=>{this.onGetDirtyRowsClickEvent(e)}}
- yidong={(a,b)=>{this.yidong(a,b)}}
- />
- </div>
- );
- }
- initSpread(spread) {
- this.spread = spread;
- spread.suspendPaint();
- let sheet = spread.getActiveSheet();
- let data = {
- name: 'Jones', region: 'East',
- sales: [
- {orderDate: '1/6/2013', item: 'Pencil', num: 95, cost: 1.99, isDelivered: true},
- {orderDate: '4/1/2013', item: 'Binder', num: 60, cost: 4.99, isDelivered: false},
- {orderDate: '6/8/2013', item: 'Pen Set', num: 16, cost: 15.99, isDelivered: false}
- ]
- };
- let table = sheet.tables.add('tableSales', 0, 0, 5, 5);
- this.table = table;
- table.style(GCsheets.Tables.TableThemes["medium4"]);
- let tableColumn1 = new GCsheets.Tables.TableColumn(1, "orderDate", "Order Date", "yyyy-mm-dd");
- let tableColumn2 = new GCsheets.Tables.TableColumn(2, "item", "Item");
- let tableColumn3 = new GCsheets.Tables.TableColumn(3, "num", "数量");
- let tableColumn4 = new GCsheets.Tables.TableColumn(4, "cost", "金额");
- let tableColumn5 = new GCsheets.Tables.TableColumn(5, "isDelivered", "Delivered", null, new GC.Spread.Sheets.CellTypes.CheckBox());
- table.autoGenerateColumns(false);
- table.bind([tableColumn1, tableColumn2, tableColumn3, tableColumn4, tableColumn5], 'sales', data);
- sheet.setColumnWidth(0, 120);
- sheet.setColumnWidth(1, 120);
- sheet.setColumnWidth(2, 120);
- sheet.setColumnWidth(3, 120);
- sheet.setColumnWidth(4, 120);
- spread.resumePaint();
- }
- addTabl(){
- const spread=this.spread;
- spread.suspendPaint();
- let sheet = spread.getActiveSheet();
- let data = {
- name: 'Jones', region: 'East',
- sales: [
- {orderDate: '1/6/2013', item: 'Pencil', num: 95, cost: 1.99, isDelivered: true},
- {orderDate: '4/1/2013', item: 'Binder', num: 60, cost: 4.99, isDelivered: false},
- {orderDate: '6/8/2013', item: 'Pen Set', num: 16, cost: 15.99, isDelivered: false},
- {orderDate: '6/8/2013', item: 'Pen Set', num: 16, cost: 15.99, isDelivered: false}
- ]
- };
- let table = sheet.tables.add('tableSales02', 0, 0, 5, 5);
- this.table = table;
- table.style(GCsheets.Tables.TableThemes["medium4"]);
- let tableColumn1 = new GCsheets.Tables.TableColumn(1, "orderDate", "Order Date", "yyyy-mm-dd");
- let tableColumn2 = new GCsheets.Tables.TableColumn(2, "item", "Item");
- let tableColumn3 = new GCsheets.Tables.TableColumn(3, "num", "数量");
- let tableColumn4 = new GCsheets.Tables.TableColumn(4, "cost", '金额');
- let tableColumn5 = new GCsheets.Tables.TableColumn(5, "isDelivered", "Delivered", null, new GC.Spread.Sheets.CellTypes.CheckBox());
- table.autoGenerateColumns(false);
- table.bind([tableColumn1, tableColumn2, tableColumn3, tableColumn4, tableColumn5], 'sales', data);
- sheet.setColumnWidth(0, 120);
- sheet.setColumnWidth(1, 120);
- sheet.setColumnWidth(2, 120);
- sheet.setColumnWidth(3, 120);
- sheet.setColumnWidth(4, 120);
- spread.resumePaint();
- }
- //移动封装
- yidong(fromColumn, toColumn) {
- const spread=this.spread;
- let sheet = spread.getActiveSheet();
- spread.suspendPaint();
- spread.commandManager().execute({
- cmd: 'dragDrop',
- sheetName: sheet.name(),
- fromRow: -1,
- fromColumn: fromColumn,//从哪一行开始移动
- toRow: -1,
- toColumn: toColumn,//总的要移动多少列(移动列数就等于:总的6-3=3)
- rowCount: -1,
- columnCount: 1,//移动的列数
- copy: false,
- insert: true,
- option: GCsheets.CopyToOptions.all
- });
- spread.resumePaint();
- }
- onGetDirtyRowsClickEvent(e) {
- this.addTabl()
- }
-
- }
- class Panel extends Component{
- constructor(props){
- super(props);
- }
- render(){
- return (
- <div class="options-container">
- <div class="option-row">
- <label class="custom-label">Change table data and click button to get the dirty rows.</label>
- </div>
- <input type="button" id="getState" value="addTable" onClick={(e)=>{this.props.onGetDirtyRowsClickEvent(e)}} />
- <input type="button" id="getState" value="移动" onClick={(e)=>{this.props.yidong(3,1)}} />
- <textarea id="stateText" class="state-text" value={this.props.dirtyRowsValue}></textarea>
- </div>
- );
- }
- }
- ReactDOM.render(<App />, _getElementById('app'));
复制代码
|
|