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. Чтобы разрешить перетаскивание в пределах целой группы, вам понадобятся две функции:

Функция, которая заполнит 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".

Функция, которая заполнит дерево перетаскиваемыми элементами выглядит следующим образом:

function grid2tree(data, id){
    data.value = data.value || data.title;
    return data;
}

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

Related sample: Basic Drag-and-Drop

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

Наверх