TableColumn设置ComboBox默认值问题(SJS-11064)

收藏

本帖最后由 Lynn.Dou 于 2021-11-29 14:22 编辑

this.spread = spread;
spread.suspendPaint();
let sheet = spread.getActiveSheet();
let data = {
name: 'Jones', region: 'East',
sales: [
{orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99, isDelivered: '是'},
{orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99, isDelivered: ''},
{orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99, isDelivered: ''}
]
};
let convert = function (item) {
return item['cost'] + '[backcolor=rgb(247, 247, 247)]tableColumn5.cellType(combo).value('是');设置不起作用[/backcolor]
;
}
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, "units", "Units");
let tableColumn4 = new GCsheets.Tables.TableColumn(4, "cost", "Cost", null, null, convert);
let tableColumn5 = new GCsheets.Tables.TableColumn(5);
const combo = new GCsheets.CellTypes.ComboBox();
combo.items([{text: '是', value: 1},{text: '否', value: 0}])
tableColumn5.cellType(combo).value('是');
tableColumn5.name('选择');
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();
}

复制代码

tableColumn5.cellType(combo).value('是');设置不起作用

Lynn.Dou · Lynn.Dou

经调研，原因如下图：
image.png612072753.png

将
combo.editorValueType(GCsheets.CellTypes.EditorValueType.index);

修改为
combo.editorValueType(GCsheets.CellTypes.EditorValueType.value);
即可。

Lynn.Dou · Lynn.Dou

云智装 · 云智装

Lynn.Dou 发表于 2021-11-29 14:00
问题已复现，已将此问题记录下来，待有进展会在贴中更新。
本帖先做保留处理。

好的

Lynn.Dou · Lynn.Dou

问题已复现，已将此问题记录下来，待有进展会在贴中更新。
本帖先做保留处理。

云智装 · 云智装

Lynn.Dou 发表于 2021-11-25 17:43
在demo中添加下面代码，设置editorValueType 为value。（具体介绍请参考学习指南：https://demo.grapecity. ...

测试出来了，数据源不变的情况下，调整Columni的tems位置，设置的默认值就不对了
没有调位置之前-正常 image.png510800780.png

调了位置之后-视图的数据就变了-不正确
image.png268799437.png

测试代码

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>
<input onClick={()=>this.addTable(this.spread)} type="button" value='添加'></input>
</div>
);
}
initSpread(spread) {
this.spread = spread;
}
addTable(spread){
spread.suspendPaint();
let sheet = spread.getActiveSheet();
let data = {
name: 'Jones', region: 'East',
cost: [
{
name: "面积",
disable_edit_amount: 0,
can_del: 0,
cost_type: 1
}, {
name: "套内价格",
disable_edit_amount: 0,
can_del: 0,
cost_type: 0
}, {
name: "套外价格",
disable_edit_amount: 0,
can_del: 0,
cost_type: 0
}, {
name: "基础装修",
disable_edit_amount: 0,
can_del: 0,
cost_type: 0
}, {
name: "管理费",
disable_edit_amount: 0,
can_del: 0,
cost_type: 0
}, {
name: "税金",
disable_edit_amount: 0,
can_del: 0,
cost_type: 0
}, {
name: "总报价",
disable_edit_amount: 0,
can_del: 1,
cost_type: 1
}]
};
let table = sheet.tables.add('tableSales', 0, 0, 5, 4);
this.table = table;
const column=[
{dataIndex:'name',title:'名称'},
{dataIndex:'can_del',title:'是否能删除',columnType:{
type:'select',
options:[{text: '否', value: 0},{text: '是', value: 1}]
}
},{dataIndex:'disable_edit_amount',title:'是否能编辑',columnType:{
type:'select',
// options:[{text: '是', value: 1},{text: '否', value: 0}] //（有问题）把这个注释打开就能重现
options:[{text: '否', value: 0},{text: '是', value: 1}]//(正常)
}
},{dataIndex:'cost_type',title:'是否是合计项',columnType:{
type:'select',
options:[{text: '否', value: 0},{text: '是', value: 1}]
}
}]
table.style(GCsheets.Tables.TableThemes["medium4"]);
table.autoGenerateColumns(false);
let newColumn=this.setTableColumn(sheet,column,0)
table.bind(newColumn, 'cost', data);
spread.resumePaint();
}
//统一初始化话column
setTableColumn(sheet, column, start) {
if (!column.length) return;
let tableColumns = []
for (let i = 0, IL = column.length; i < IL; i++) {
let tableColumn = new GCsheets.Tables.TableColumn(i + 1, column[i].dataIndex, column[i].title || '', column[i].formatter || null);
if (column[i].columnType) {
const columnType = column[i].columnType;
if (columnType.type === 'select' && (columnType.options || []).length) {
const combo = new GCsheets.CellTypes.ComboBox();
combo.items(columnType.options);
combo.editorValueType(GCsheets.CellTypes.EditorValueType.index);
tableColumn = new GCsheets.Tables.TableColumn(i + 1, column[i].dataIndex, column[i].title || '', column[i].formatter || null, combo)
}
}
sheet.setColumnWidth(start + i, column[i].width || 80);//设置宽度
tableColumns.push(tableColumn);
}
return tableColumns
}
}
ReactDOM.render(<App />, _getElementById('app'));