Плагин таблицы данных и дерева jQuery EasyUI -Treegrid

jQuery EasyUI 插件Плагин jQuery EasyUI

Наследуется от $.fn.datagrid.defaults. Переопределите значения по умолчанию через $.fn.treegrid.defaults.

Treegrid используется для отображения иерархических данных в табличном формате. Он основан на datagrid и объединяет treeview и редактируемую таблицу. Treegrid позволяет создавать настраиваемые, асинхронно раскрываемые строки и отображать иерархические данные в нескольких столбцах.

Зависимости

  • datagrid

Использование

Создайте treegrid из HTML-разметки. В большинстве случаев treegrid следует той же структуре и формату, что и datagrid.

<table id="tt" class="easyui-treegrid" style="width:600px;height:400px"
    data-options="url:'get_data.php',idField:'id',treeField:'name'">
    <thead>
        <tr>
            <th data-options="field:'name',width:180">Task Name</th>
            <th data-options="field:'persons',width:60,align:'right'">Persons</th>
            <th data-options="field:'begin',width:80">Begin Date</th>
            <th data-options="field:'end',width:80">End Date</th>
        </tr>
    </thead>
</table>

Создайте treegrid с помощью JavaScript.

<table id="tt" style="width:600px;height:400px"></table>

$('#tt').treegrid({
    url:'get_data.php',
    idField:'id',
    treeField:'name',
    columns:[[
        {title:'Task Name',field:'name',width:180},
        {field:'persons',title:'Persons',width:60,align:'right'},
        {field:'begin',title:'Begin Date',width:80},
        {field:'end',title:'End Date',width:80}
    ]]
});

Свойства

Свойства наследуются от datagrid. Ниже перечислены свойства, добавленные для treegrid.

Name Type Описание Значение по умолчанию
idField string Определяет поле имени ключа, идентифицирующее узел дерева. Обязательно. null
treeField string Определяет поле узла дерева. Обязательно. null
animate логическое значение Определяет, показывать ли анимационный эффект при разворачивании или сворачивании узла. false
loader function(param,success,error) Определяет, как загружать данные с удалённого сервера. Верните false, чтобы отменить действие. Эта функция имеет следующие параметры:
param: Объект параметров, который будет передан удаленному серверу.
success(data): функция обратного вызова, вызываемая при успешном получении данных.
error(): функция обратного вызова, вызываемая при сбое получения данных.
 загрузчик JSON
loadFilter function(data,parentId) Возвращает отфильтрованные данные для отображения.

Events

События наследуются от datagrid. Ниже перечислены события, добавленные для treegrid.

Name Parameters Описание
onClickRow row Срабатывает при щелчке пользователя по узлу.
onDblClickRow row Срабатывает при двойном щелчке пользователя по узлу.
onClickCell field,row Срабатывает, когда пользователь щёлкает по ячейке.
onDblClickCell field,row Срабатывает, когда пользователь дважды щёлкает по ячейке.
onBeforeLoad row, param Срабатывает перед отправкой запроса на загрузку данных. Верните false, чтобы отменить действие загрузки.
onLoadSuccess row, data Срабатывает при успешной загрузке данных.
onLoadError аргументы Срабатывает при сбое загрузки данных. Параметр arguments такой же, как и метод 'error' в jQuery.ajax.
onBeforeExpand row Срабатывает перед развертыванием узла. Верните false, чтобы отменить действие развертывания.
onExpand row Срабатывает при развертывании узла.
onBeforeCollapse row Срабатывает перед сворачиванием узла. Верните false, чтобы отменить действие сворачивания.
onCollapse row Срабатывает при сворачивании узла.
onContextMenu e, row Срабатывает при щелчке правой кнопкой мыши по узлу.
onBeforeEdit row Срабатывает, когда пользователь начинает редактирование узла.
onAfterEdit row,changes Срабатывает, когда пользователь завершает редактирование.
onCancelEdit row Срабатывает, когда пользователь отменяет редактирование узла.

Методы

Многие методы требуют параметр с именем 'id', который представляет значение узла дерева.

Name Parameters Описание
options none Возвращает options для treegrid.
resize options Устанавливает размер treegrid. Параметр options содержит два свойства:
width: Новая ширина treegrid.
height: Новая высота treegrid.
fixRowHeight id Фиксирует высоту указанной строки.
loadData data Загружает данные treegrid.
load param Загружает и отображает первую страницу. Этот метод доступен начиная с версии 1.3.4.
Пример кода:
// load and send some request parameters
$('#tg').treegrid('load', {
    q: 'abc',
    name: 'name1'
});
reload id Перезагружает данные treegrid. Если передан параметр 'id', он перезагружает указанную строку дерева; в противном случае он перезагружает все строки дерева.
Пример кода:
$('#tt').treegrid('reload', 2);    // reload the row which value is equals to 2
$('#tt').treegrid('reload');    // reload the all rows
$('#tt').treegrid('reload', {id:2, q:'abc'});  // reload the specified row with 'q' parameter passing to server
reloadFooter footer Перезагружает данные футера.
getData none Получает загруженные данные.
getFooterRows none Получает данные футера.
getRoot none Возвращает корневой узел и возвращает объект узла.
getRoots none Получает корневые узлы и возвращает массив узлов.
getParent id Получает родительский узел.
getChildren id Получает дочерние узлы.
getSelected none Получает выбранный узел и возвращает его. Возвращает null, если ни один узел не выбран.
getSelections none Получает все выбранные узлы.
getLevel id Получает уровень указанного узла.
найти id Находит указанный узел и возвращает данные узла.
select id Выбирает узел.
unselect id Снимает выделение с узла.
selectAll none Выбирает все узлы.
unselectAll none Снимает выделение со всех узлов.
collapse id Сворачивает узел.
expand id Разворачивает узел.
collapseAll id Сворачивает все узлы.
expandAll id Разворачивает все узлы.
expandTo id Разворачивает указанный узел от корня.
toggle id Переключает состояние узла между развернутым и свернутым.
append param Добавляет несколько дочерних узлов к родительскому узлу. Параметр 'param' включает следующие свойства:
parent: id родительского узла. Если не указан, узел добавляется как корневой.
data: Массив данных узлов.

Пример кода:
// append some nodes to the selected row
var node = $('#tt').treegrid('getSelected');
$('#tt').treegrid('append',{
    parent: node.id,  // the node has a 'id' value that defined through 'idField' property
    data: [{
        id: '073',
        name: 'name73'
    }]
});
insert param Вставляет узел до или после указанного узла. Параметр 'param' включает следующие свойства:
before: Значение id узла, перед которым нужно вставить.
after: Значение id узла, после которого нужно вставить.
data: Данные нового узла.

Пример кода:
// insert a new node before the selected node
var node = $('#tt').treegrid('getSelected');
if (node){
    $('#tt').treegrid('insert', {
        before: node.id,
        data: {
            id: 38,
            name: 'name38'
        }
    });
}
Этот метод доступен начиная с версии 1.3.1.
remove id Удаляет узел и его дочерние узлы.
pop id Извлекает узел и возвращает данные узла, включая его дочерние узлы, после удаления узла. Этот метод доступен начиная с версии 1.3.1.
refresh id Обновляет состояние указанного узла.
update param Обновляет указанный узел. Параметр 'param' включает следующие свойства:
id: Идентификатор обновляемого узла.
row: Данные новой строки.

Пример кода:
$('#tt').treegrid('update',{
    id: 2,
    row: {
        name: 'new name',
        iconCls: 'icon-save'
    }
});
Этот метод доступен начиная с версии 1.3.1.
beginEdit id Начинает редактирование узла.
endEdit id Завершает редактирование узла.
cancelEdit id Отменяет редактирование узла.
getEditors id Возвращает редактор указанной строки. Каждый редактор имеет следующие свойства:
actions: Действия, которые может выполнять редактор.
target: Объект jQuery целевого редактора.
field: Имя поля.
type: Тип редактора.
getEditor param Возвращает указанный редактор. Параметр param содержит два свойства:
id: Идентификатор узла строки.
field: Имя поля.
jQuery EasyUI 插件jQuery EasyUI Plugin Другие расширения