Перетаскивание и изменение продолжительности в любой диаграмме Диаграмма Ганта

Я не могу понять, что слушать после использования перетаскивания или изменения длительности в любой диаграмме Ганта

Я получаю данные из вызова 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");  
            });

Но предупреждение не показывает. РЕДАКТИРОВАТЬ: я получаю предупреждение, кажется, у меня была опечатка в моем коде.

Перетаскивание и изменение продолжительности работает нормально, но мне нужно сохранить изменения в БД, но, как я уже писал, я не вижу, что с этим связано.

РЕДАКТИРОВАТЬ2:

Я изменил предупреждение, чтобы показать информацию, указанную в документации, поэтому я

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

В то время как consolelog показывает

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) Aalb\u00e6k, 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, который у меня есть во время месячных.

Поэтому я перефразирую свой вопрос и прошу совета, как использовать данные, которые я получаю в своем listen(), особенно как я идентифицирую объект, над которым работаю, и получаю данные в этом объекте.


person Anja R    schedule 04.12.2017    source источник


Ответы (1)


Вы были почти там! Попробуйте использовать следующий прослушиватель с диаграммой Ганта и данными 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);
        });

Теперь вы получите информацию о периоде, который вы изменяете.

person AnyChart Support    schedule 05.12.2017
comment
Спасибо, это мне очень помогло, но позволило мне задать другой вопрос: есть ли способ сказать, что изменение продолжительности может быть только в конечное время, или чтобы диаграмма редактировалась, но не позволяла изменять длительность. Или как мне в treeItemUpdate увидеть, является ли это изменением продолжительности или событием DragDrop? - person Anja R; 05.12.2017
comment
К сожалению, нет способа запретить события определенного типа. Но с помощью некоторых трюков с кодом можно идентифицировать изменение длительности или событие DragDrop. Я подготовил для вас пример: jsfiddle.net/1hbfbszc Запустите эту скрипту, откройте консоль браузера и попробуйте перемещать периоды и изменять их продолжительность. Всю необходимую информацию вы найдете в комментариях. - person AnyChart Support; 06.12.2017
comment
Я упростил дополнительный код в моем предыдущем примере, новый пример здесь - jsfiddle.net/fp3j016g - person AnyChart Support; 06.12.2017