Для выполнения примера в теге HEAD подключите ссылки на библиотеку компонентов PP.js и таблицы визуальных стилей PP.css. В теге BODY добавьте элемент DIV с идентификатором «smpl». На одном уровне с html-страницей должен содержаться файл с наименованием «treeImagesIcons.png».
var treeListSett = new PP.Ui.TreeList( { //html-контейнер для компонента ParentNode: document.getElementById('smpl'), //отображаются заголовки столбцов CaptionVisible: true, //Отключаем выделение области дерева AreaSelect: false, //Включен перенос по словам WordWrap: true,
//Возможно изменение ширины столбцов EnableResizeColumn: true, //Отображаются заголовки столбцов ShowColumns: true, //Можно редактировать значения в ячейках таблицы: EnableEdit: true, //редактируемый текст будет выделен SelectEditorText: true, //Отключен множественный выбор
MultiSelect: false, // Включаем множественное перемещение для режима Drag&Drop DragAndDropMode: "MultiDrag", // Устанавливаем видимость пиктограммы меню для возможности редактирования видимости столбцов EnableColumnsMenu: true, // Отключаем учет регистра при фильтрации FilterCaseSensitive: false, // Устанавливаем сброс выделения при фильтрации FilterDeSelect: true,
// Отключаем режим, при котором первое нажатие с зажатой кнопкой SHIFT снимает выделение со всех выделенных элементов, кроме текущего FirstShiftSelectClearing: false, // Устанавливаем игнорирование правого отступа внутри объекта IgnoreRightPadding: true, // Устанавливаем изменение отображения дерева и изменение свойства hasChild у вершин во время работы режима Drag&Drop KeepHasChild: true, // Устанавливаем промежуток времени перед загрузкой дерева LoadingTimeout: 1000, //Набор изображений ImageList: new PP.ImageList(
{ Source: "treeImagesIcons.png", IconHeight: 20, IconWidth: 18 }), //Отображается соединительная линия между вершиной и дочерними элементами ShowLines: true, Height: 150, Width: 400, //Отображаются флажки CheckBoxes: true,
//при двойном клике вершина не раскрывается DblClickExpand: false, //включаем возможность перетаскивания вершин EnableDragAndDrop: true, //задержка перед активацией режима перетаскивания - 1 секунда DragAndDropDelay: 1000, //включаем возможность поиска элементов дерева EnableSearch: true, //доступна множественная отметка с удержанием SHIFT или CTRL IsCSMultiSelect: true, //при клике правой клавишей мыши будет выделяться элемент RightButtonSelect: true, SortSequence: [2,1,0],//порядок сортировки: по убыванию - по возрастанию - без сортировки //Столбцы
Columns: [ { Caption: "Country", Width: 200, MinWidth: 50, Visible: true }, {
Caption: "Population, total", Width: 100, MinWidth: 50, Visible: true }, { Caption: "GDP, PPP", Width: 100, MinWidth: 50, Visible: false }, {
Caption: "GPD per capita, PPP", Width: 100, MinWidth: 10, Visible: false }], //Вершины: Nodes: [ { Text: "World",
Columns: ["", "", ""], ImageIndex: 1, Selected: false, CanSelect: true, Value: "TestValue", Expanded: true, Checked: true, Nodes: [
{ Text: "Africa", Columns: [], Selected: false, CanSelect: true, Value: "TestValue", Expanded: true,
Checked: false, Nodes: [ { Text: "South Africa", Columns: ["460297895012,55", "9332,86", "49320150,00"], ImageUrl: null,
ImageIndex: 0, Selected: false, CanSelect: true, Value: "TestValue", Expanded: true, Checked: false },
{ Text: "Egypt", Columns: ["427532757687,93", "5151,03", "82999393,00"], ImageUrl: null, ImageIndex: 1, Selected: false,
CanSelect: true, Value: "TestValue", Expanded: true, Checked: false },
{ Text: "Algeria", Columns: ["258963578613,94", "7421,12", "34895470,00"], ImageUrl: null,
ImageIndex: 2, Selected: false, CanSelect: true,
Value: "TestValue", Expanded: true, Checked: false }] }] }] });
После выполнения примера на HTML-странице будет размещен компонент TreeList, имеющий следующий вид:
См. также: