在任何图表甘特图中拖放和持续时间更改

Question

我无法弄清楚在使用drag＆amp; drog＆amp; drop;

我从JSON调用中获取数据，并具有以下代码

chart = anychart.ganttResource();
chart.data(anychart.data.tree(data, 'asTable'));
var dataGrid = chart.dataGrid();
chart.editing(true);

我正在锁定文档中的https://docs.anychart.com/gantt_chart/live_edit_ui_and_api，但它并不是在说什么之后要听什么。我试图做

var tree = anychart.data.tree(data, 'asTable');
tree.listen("treeItemUpdate", function(e) {
              alert("test");  
            });

但警报未显示。编辑：我确实得到了警报，似乎我的代码中有一个错字。

拖动和持续时间更改工作正常，但是我需要将更改存储在DB中，但是当我写的时，我看不到什么欺骗者。

edit2：

我更改了警报以显示文档中提到的信息，所以我有

tree.listen("treeItemUpdate", function(e) {
                console.log(e);
              alert("test " + e.type + " " + e.item + " " + e.path + " " + e.field + " " + e.value + " " );  
            });

警报给出类似的东西

test treeitemupdate [object Object] periods,2,start periods 1512574122684 
test treeitemupdate [object Object] periods,2,end periods 1512583122684

合并显示

时

Object { type: "treeitemupdate", target: {…}, c: {…}, f: false, l: false, yA: true, item: {…}, path: […], field: "periods", value: 1512405943770 }

打开该项目给了我这个，但是我看不到如何使用此数据

item: {…}
P: Object { b: {…}, P: null, f: […], … } 
b: Object { yb: false, yj: undefined, ai: {…}, … }
c: Object { nc: true, depth: 1, index: 2, … }
f: Array []
g: Object { id: "270", rowHeight: 15, periods: […] }
h: Object {  }
__proto__: Object { get: g.get(), set: g.set(), Ve: g.Ve(), … }

我的图表看起来像这样甘特图

我的json就像这个

[{"id":"0",
"collapsed":false,
"rowHeight":15,
"userLevel":"0"
},{
"id":"4",
"collapsed":false,
"rowHeight":15,
"name":"(1 - jnb) Bjerre, Janine Nedergaard ",
"userLevel":"3"
},{
"id":"270",
"parent":"4",
"rowHeight":15,
"periods":[{
    "id":"270_2",
    "stoke":"none",
    "start":"1512370800000",
    "end":"1512464400000",
    "fill":"#DCE4EF",
    "personID":4,
    "id_task":"270"
    },{
    "id":"474_3",
    "stoke":"none",
    "start":"1512543600000",
    "end":"1512547200000",
    "fill":"#DCE4EF",
    "personID":4,
    "id_task":"474"
    },{
    "id":"140_6",
    "stoke":"none",
    "start":"1512548100000",
    "end":"1512743400000",
    "fill":"#DCE4EF",
    "personID":4,"id_task":"140"}]
},{
"id":"488",
"parent":"4",
"rowHeight":15,
"periods":[{"
    id":"488_4",
    "stoke":"none",
    "start":"1512543600000",
    "end":"1512547200000",
    "fill":"#DCE4EF",
    "personID":4,
    "id_task":"488"
    },{
    "id":"485_7",
    "stoke":"none",
    "start":"1512554400000",
    "end":"1512561600000",
    "fill":"#DCE4EF",
    "personID":4,
    "id_task":"485"
    },{
    "id":"247_8",
    "stoke":"none",
    "start":"1512564960000",
    "end":"1512568560000",
    "fill":"#FFFFFF",
    "personID":4,
    "id_task":"247"}]
},{
"id":"372",
"parent":"4",
"rowHeight":15,
"periods":[{
    "id":"372_5",
    "stoke":"none",
    "start":"1512547200000",
    "end":"1512556200000",
    "fill":"#DCE4EF",
    "personID":4,
    "id_task":"372"
    },{
    "id":"222_9",
    "stoke":"none",
    "start":"1512565200000",
    "end":"1512568800000",
    "fill":"#DCE4EF",
    "personID":4,
    "id_task":"222"}]
},{
"id":"313",
"parent":"4",
"rowHeight":15,
"periods":[{
    "id":"313_10",
    "stoke":"none",
    "start":"1512566400000",
    "end":"1512570000000",
    "fill":"#FFFFFF",
    "personID":4,
    "id_task":"313"}]
},{
"id":"26",
"collapsed":false,
"rowHeight":15,
"name":"(aal) Aalbu00e6k, Arne ",
"userLevel":"3"
 },{
"id":"423",
"parent":"26",
"rowHeight":15,
"periods":[{
    "id":"423_12",
    "stoke":"none",
    "start":"1512370800000",
    "end":"1512401400000",
    "fill":"#DCE4EF",
    "personID":26,
    "id_task":"423"}]
},{
"id":"6",
"collapsed":false,
"rowHeight":15,
"name":"(tc) Clausen, Tom ",
"userLevel":"1"
},{
"id":"436",
"parent":"6",
"rowHeight":15,
"periods":[{
    "id":"436_14",
    "stoke":"none",
    "start":"1512367200000",
    "end":"1512738000000",
    "fill":"#DCE4EF",
    "personID":6,
    "id_task":"436"}],
},{
"id":"508",
"parent":"6",
"rowHeight":15,
"periods":[{
    "id":"508_15",
    "stoke":"none",
    "start":"1512370800000",
    "end":"1512471600000",
    "fill":"#DCE4EF",
    "personID":6,
    "id_task":"508"}]
}]

，我需要确定我的时期ID_TASK。

因此，我重述了我的问题，并要求提供指导，以了解我如何使用"听（）中的数据"，尤其是我如何识别我正在使用的对象并在该对象中获取数据

Answer 1

你几乎在那里！使用您的gantt图表和JSON数据尝试以下侦听器：

            tree.listen("treeItemUpdate", function(e) {
            var periodInfo = e.item.get('periods')[e.path[1]];
            console.log('treeItemUpdate - ' + 'row ID: ' + e.item.get('id') + ', id_task: ' + periodInfo.id_task +
            ', personID: ' + periodInfo.personID + ', ' + e.path[2] + ': ' + e.value);
//next line will show you the unformatted period info which is modified 
           // console.log(periodInfo);
        });

现在您将获得有关您正在修改的时期的信息。