Advanced

Перетаскивание элементов между разными компонентами

Свойство externalData

Когда вы перетаскиваете элементы между разными компонентами или экземплярами компонента, необходимо обеспечить корректное отображение данных в целевом компоненте.

Свойство externalData принимает функцию, ответственную за перетаскивание (если перетаскиваете в другой компонент).

{   
    view:"tree", 
    drag:true, 
    select:true,
    data:[],
    externalData:grid2tree
};

Функция принимает два параметра - data и id:

  • data (object) - перемещаемый элемент данных;
  • id (string) - ID элемента в компоненте-источнике.

Когда элемент перемещается в другой компонент, он сохраняет своё ID, если только в целевом компоненте такое ID не занято. Если же какой-либо элемент целевого компонента уже занял ID, то для перетаскиваемого элемента будет сгенерирован новый, а изначальный останется в функции.

Давайте представим приложение с двумя деревьями: DataView и DataTable. Набор данных дерева включает в себя элементы с data.value, в то время, как у DataView и DataTable есть поля data.title и data.rank. Чтобы разрешить перетаскивание в пределах целой группы, вам понадобятся две функции:

  1. Функция, которая заполнит DataView и DataTable.
function tree2grid(data, id){
    data.rank = data.rank || -1;
    data.title = data.title || data.value;
    return data;
}

Обратите внимание на оператор "или":

  • если вы перетаскиваете элементы из DataTable в DataView и наоборот, исходные данные и внешние данные имеют одинаковые параметры, так что значение data.title из таблицы становится data.title из DataView. То же самое касается data.rank.
  • если вы перетаскиваете данные из любого дерева в DataTable или DataView, вам необходимо переопределить параметр data.title и задаеть его значение параметру дерева data.value. Т.к. в примере ни у одного из деревьев нет параметра data.rank, его значение отобразится как "-1".
  1. Функция, которая заполнит дерево перетаскиваемыми элементами выглядит следующим образом:
function grid2tree(data, id){
    data.value = data.value || data.title;
    return data;
}

В этом случае имеет значение только data.value. Дерево возмёт значение data.value у другого дерева или значение data.title у какой-либо из таблиц.

Related sample:  Basic Drag-and-Drop

Статьи по теме

Наверх