【SpreadJS V16】甘特图Duration列，数据展示及获取的问题

Joestar.Xu

本帖最后由樱花飞舞于 2023-12-5 14:14 编辑

image.png661349181.png

问题一：如图，接口中返回的duration字段为“1 day”但页面显示的数据却是“1天”，请问在哪里配置。

问题二：在表格中手动编辑后的数据通过什么方法可以获取到，整个更新后的源数据。

Joestar.Xu · Joestar.Xu

您好，我这边加了一个按钮，在修改完毕后点击按钮输出信息到控制台就可以看见更改的数据了：

image.png894951476.png

代码如下：

import "./App.css";
import React, { useState, useRef } from "react";
import * as GC from "@grapecity/spread-sheets";
import { SpreadSheets, Worksheet } from "@grapecity/spread-sheets-react";
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-ganttsheet";
import "../node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import "@grapecity/spread-sheets-resources-zh";
GC.Spread.Common.CultureManager.culture("zh-cn");
function App() {
// state
const [spreadVal, setSpreadVal] = useState<any>(null);
// init
let initSpread = function (value: any) {
let spread = value;
setSpreadVal(spread);
initGanttSheetWithChildrenData(spread);
};
// function getBaseApiUrl() {
// return "https://developer.mescius.com/spreadjs/demos/server/api"
// }
function initGanttSheetWithChildrenData(spread: any) {
// var tableName = "Gantt_Children";
// var baseApiUrl = getBaseApiUrl();
// var apiUrl = baseApiUrl + "/" + tableName;
var dataManager = spread.dataManager();
var myTable1 = dataManager?.addTable("myTable1", {
batch: true,
// remote: {
// read: {
// url: apiUrl
// }
// },
data: [
{
id: 1,
parentId: null,
taskNumber: 1,
name: "Plan for Project Server 2013 deployment",
duration: "1 day",
predecessors: "",
level: 1,
resource: 1,
cost: 100,
},
],
schema: {
hierarchy: {
type: "ChildrenPath",
column: "children",
},
},
});
var ganttSheet = spread.addSheetTab(
2,
"GanttSheet3",
GC.Spread.Sheets.SheetType.ganttSheet
);
var view = myTable1?.addView("myView1", [
{ value: "taskNumber", caption: "NO.", width: 60 },
{ value: "name", caption: "Task Name", width: 200 },
{ value: "duration", caption: "Duration", width: 90 },
{ value: "predecessors", caption: "Predecessors", width: 120 },
]);
view?.fetch().then(function () {
ganttSheet.bindGanttView(view);
});
}
function click() {
let spread = spreadVal;
console.log(spread.dataManager().tables.myTable1.getChanges(), "<<<<");
}
return (
<div className="sample-tutorial">
<div className="sample-spreadsheets">
<SpreadSheets
workbookInitialized={(spread) => initSpread(spread)}
></SpreadSheets>
<button onClick={click}>Click</button>
</div>
</div>
);
}
export default App;

复制代码

Joestar.Xu · Joestar.Xu

您好，

问题一：不确定您想要配置的是什么，是想将1天显示为1 Day吗？

问题二：甘特图依赖于集算表，所以需要结合集算表相关的API才能实现，以官网的例子为例：

image.png616725463.png

添加上图的代码到指定位置后，修改任意项的数据，执行submitChanges接口即可获取修改的数据项：

image.png887035827.png

将这个数据项与之前获取的数据源结合后即可获取到更新后的数据。

樱花飞舞 · 樱花飞舞

Joestar.Xu 发表于 2023-12-5 16:50
您好，

问题一：不确定您想要配置的是什么，是想将1天显示为1 Day吗？

感谢回复！

关于问题一我想要实现的效果是，将接口返回的“1Day”字段渲染到页面上显示为“1天"；

问题二我是使用data字段将数据传入到table中，而非使用remote属性直接写api接口的形式，请问该怎么获取我在页面上修改某个单元格后的数据呢？

Joestar.Xu · Joestar.Xu

您好，

问题一：我没太明白，也就是说现在您的接口返回的是：1 day，渲染到页面上的也是1 day吗？如果是这样的话您确认一下您SpreadJS的语言是否为中文，如果为中文无误的话，您提供一个可以复现这个问题的Demo，我们这边调研一下看看是什么原因导致的。

问题二：您参考下面这行代码试试看能否满足您的需求：

spread.dataManager().tables.myTable.getChanges();