Слияние кода завершено, страница обновится автоматически
import, layui и CDNgit clone https://github.com/hsiangleev/eleTree.git
cd eleTree
npm install
# Откройте браузер и перейдите по адресу http://localhost:3000
npm run start
# Создание билда
npm run build
# Для просмотра документации VuePress онлайн (откройте браузер и перейдите по адресу http://localhost:3001)
npm run docs:start
npm install eletree -D
<!-- JS файл -->
<script src="//unpkg.com/eletree/dist/eleTree.js"></script>
<!-- Загрузка CSS файла -->
<link rel="stylesheet" href="//unpkg.com/eletree/dist/css/icon.css">
<!-- Использование пути к изображению -->
<!-- imgUrl: "//unpkg.com/eletree/dist/images/" -->
<div class="eletree"></div>
var el = eleTree({
el: '.eletree',
url: '/eleTree/json/1.json',
highlightCurrent: true,
showCheckbox: true
})
el.getChecked()
el.on("checkbox", function(data) {
console.log(data)
})
|------------|-----------------------|-----------|---------------------------------------------|------------------------| | el | DOM-селектор | string | — | — | | data | Статические данные | array | — | — | | emptyText | Текст при отсутствии данных | string | — | Нет данных | | highlightCurrent | Выделение текущего выбранного узла | boolean | — | false | | defaultExpandAll | Раскрытие всех узлов по умолчанию | boolean | — | false | | autoExpandParent | Автоматическое раскрытие родительского узла при раскрытии дочернего | boolean | — | false | | expandOnClickNode | Раскрытие или сворачивание узла при клике по тексту | boolean | — | true | | checkOnClickNode | Выбор узла при клике по тексту с помощью чекбокса | boolean | — | false | | radioOnClickNode | Выбор узла при клике по тексту с помощью радиобатона | boolean | — | false | | defaultExpandedKeys | Узлы, раскрытые по умолчанию | array | — | — | | showCheckbox | Отображение чекбоксов | boolean | — | false || checkStrictly | В случае отображения чекбоксов, строгое следование правилу "родитель не связан с детьми" | boolean | — | false | | isDefaultChangePstatus | При отображении чекбоксов и связи между родителем и детьми, начальные данные влияют только на детей | boolean | — | false | | defaultCheckedKeys | Узлы, выбранные по умолчанию | array | — | — | | accordion | Отображение только одного открытого узла в каждом уровне (эффект аккордеона) | boolean | — | false | | indent | Горизонтальное отступление между уровнями узлов, пиксели | number | — | 16 | | showLine | Отображение пунктирной линии | boolean | — | true | | imgUrl | Путь к папке с изображениями | string | — | ./images/ | | icon | Использование пользовательских значков или изображений | object | fold, leaf, checkFull, checkHalf, checkNone, dropdownOff, dropdownOn, loading, radioCheck, radioCheckNone | Каждое свойство имеет значение "" по умолчанию | | done | Коллбэк после завершения рендера дерева, аргумент - данные | function | — | — | | lazy | Включение ленивой загрузки | boolean | — | false | | rightMenuList | Включение контекстного меню | array | "copy", "paste", "paste_before", "paste_after", "cut_paste", "edit", "remove", "add_child", "add_before", "add_after" | [] || showRadio | Отображение радиобаттонов | boolean | — | false || | radioType | Тип радио-кнопок (является ли это одним уровнем или всего лишь одна выборка возможна) | string | level/all | level | | defaultRadioCheckedKeys | По умолчанию выбранные ключи радио-кнопок | array | — | — | | defaultPid | При использовании данных в формате pid, значение первого уровня по умолчанию | string/number | — | '' | | draggable | Включено ли перемещение узлов | boolean | — | false | | customText | Функция для кастомизации текста узлов | function | — | — |
|------------|-----------------------|-----------|---------------------------------------------|----------------------| | url | Адрес асинхронного интерфейса | string | — | — | | method | Тип HTTP-запроса к интерфейсу | string | get, post | get | | where | Другие параметры интерфейса | object | — | — | | headers | Заголовки запроса к интерфейсу | object | — | — | | response | Выборка DOM | string | — | — | | request | Выборка DOM | string | — | — |### Методы| Название метода | Описание | Аргументы | | ---------- | -------------- | ---------- | | on | Обработчики событий | (type, callback)1. Название события, 2. Функция обратного вызова при срабатывании события; | | getChecked | Получение информации о выбранных узлах в чекбоксе | (leafOnly, includeHalfChecked)1. Только лиственные узлы, по умолчанию false, 2. Включает ли половинчато выбранные узлы, по умолчанию false | | setChecked | Установка выбранных узлов в чекбоксе | (checkArr, isUnCheckAll)1. Массив выбранных элементов, 2. Удалить ли все ранее выбранные узлы перед установкой, по умолчанию true | | unChecked | Отмена выбора узлов в чекбоксе | (unCheckArr)1. Массив отмеченных для удаления узлов; Без аргументов - очистить все выбранные узлы по умолчанию; | | setAllChecked | Выбор всех узлов в чекбоксе, кроме заблокированных | — | | reverseChecked | Отмена выбора всех узлов в чекбоксе, кроме заблокированных | — | | getRadioChecked | Получение информации о выбранном узле в радиобаттоне | — | | setRadioChecked | Установка выбранного узла в радиобаттоне | (checkArr, isUnCheckAll)1. Массив выбранных элементов, 2. Удалить ли все ранее выбранные узлы перед установкой, по умолчанию true | | unRadioChecked | Отмена выбора узлов в радиобаттоне | (unCheckArr)1. Массив отмеченных для удаления узлов; Без аргументов - очистить все выбранные узлы по умолчанию | | expandAll | Раскрытие всех узлов | — | | unExpandAll | Сворчивание всех узлов | — | | append | Добавление дочерних узлов (два формата) | A. (id, array/object)1.Поиск узла по ID для добавления, 2. Массив данных для добавляемых узлов; если ID равен null или пустой строке, то узел будет добавлен к корневому узлу B. (array/object) если передается один массив/объект, то это pid формат данных, то есть добавление узла к родителю по PID | | updateKeySelf | Обновление данных текущего узла или перемещение некоторых узлов (два формата) | A. (id, object)1. Поиск узла по ID для изменения, 2. Данные для изменения B. (array/object) если передается один массив/объект, то это pid формат данных, то есть изменение данных узла по ID, если PID изменится, то это перемещение узла | | remove | Удаление данных узла | (removeArr)1. Массив ID узлов для удаления (можно удалить несколько узлов) | | edit | Редактирование узла | (id, nodeType)1. ID узла для редактирования, 2. Тип редактируемого узла, соответствует названию триггерного события, возможные значения (edit/add_child/add_before/add_after) | | insert | Вставка данных до или после определенного узла | (id, array/object, type)1. Поиск узла по ID для вставки, 2. Массив данных для добавляемых узлов, 3. Тип, вставка перед текущим узлом или после него, допустимые параметры ('before', 'after'), по умолчанию перед узлом | | reload | Перезагрузка узлов дерева | (options) 1. Объект с начальными параметрами | | search | Поиск узлов дерева | (value, callback) 1. Текст для поиска, 2. Условие поиска, если функция возвращает true, то узел отображается | | getAllNodeData | Получение данных всех узлов | ('c'/'p') Введите строку 'c', чтобы получить данные в виде родительско-детской структуры; введите строку 'p', чтобы получить данные в формате PID, по умолчанию 'c' | | copy | Копирование узла | (id) 1. ID узла для копирования | | cutPaste | Вырезание и вставка узла | (id) 1. ID узла для вырезания | | paste | Вставка узла | (id, nodeType) 1. ID узла для вставки, 2. Положение вставляемого узла, допустимые параметры ('before', 'after', 'children'), по умолчанию 'children' | | getClipboardData | Получение данных из буфера обмена | При перемещении, копировании или вырезании узла он копируется в буфер обмена, если в буфере нет данных, возвращается null |
|---------------|--------------------|---------------------------| | checkbox | Выбор чекбокса | (type, data)1. Название события, 2. Данные текущего узла | | radio | Выбор радиокнопки | (type, data)1. Название события, 2. Данные текущего узла | | click | Клик по узлу | (type, data)1. Название события, 2. Данные текущего узла | | copy | Копирование узла | (type, data, load, stop)1. Название события, 2. Данные текущего узла, 3. Выполнение операции, 4. Отмена выполнения операции | | paste | Вставка в подузел | Аналогично copy | | paste_before | Вставка перед узлом | Аналогично copy | | paste_after | Вставка после узла | Аналогично copy | | cut_paste | Вырезание и вставка узла | Аналогично copy | | edit | Редактирование узла | Аналогично copy | | remove | Удаление узла | Аналогично copy | | add_child | Добавление подузла | Аналогично copy | | add_before | Добавление перед узлом | Аналогично copy | | add_after | Добавление после узла | Аналогично copy | | custom_ | Пользовательское событие | Аналогично copy | | drag | Событие перетаскивания | (type, data, load, stop, endData, range)1. Название события, 2. Данные начального перемещаемого узла, 3. Выполнение операции, 4. Отмена выполнения операции, 5. Данные узла, куда переместился, 6. Диапазон перемещения (outer: перемещение до корневого узла / inner: перемещение до подузла) |```markdown (type, data, load, stop, endData, range)
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )