dev-master
9999999-dev https://github.com/delikates-nsk/yii2-tree-dropdownA dropdown widget containing expandable treeview
BSD-3-Clause
The Requires
by Constantin G. Nekhoroshkov
extension yii2 widget dropdown checkbox tree
Wallogit.com
2017 © Pedro Peláez
yii2-extension yii2-tree-dropdown
A dropdown widget containing expandable treeview
delikates-nsk/yii2-tree-dropdown
A dropdown widget containing expandable treeview
- Friday, June 29, 2018
- by delikates-nsk
- Repository
- 1 Watchers
- 0 Stars
- 20 Installations
- PHP
- 0 Dependents
- 0 Suggesters
- 0 Forks
- 0 Open issues
- 1 Versions
- 0 % Grown
The README.md
Tree Dropdown
English:, (*1)
Dropdown with tree. This is extension for Yii2 framework., (*2)
Russian:, (*3)
Выпадающий список с деревом. Расширение для фреймворка Yii2., (*4)
Sreenshots / Скриншоты
English:, (*5)
, (*6)
Russian:, (*7)
, (*8)
Installation / Установка
English:, (*9)
The preferred way to install this extension is through composer., (*10)
Either run, (*11)
$ php composer.phar require delikates-nsk/yii2-shadowed-tabs "@dev"
or add, (*12)
"delikates-nsk/yii2-shadowed-tabs": "@dev"
to the require section of your composer.json file and run, (*13)
$ php composer.phar update
Russian:, (*14)
Быстрее всего установить расширение можно с помощью composer., (*15)
Выполните следующую команду, (*16)
$ php composer.phar require delikates-nsk/yii2-tree-dropdown "@dev"
или добавьте строчку, (*17)
"delikates-nsk/yii2-yii2-tree-dropdown": "@dev"
в раздел require в файле composer.json вашего проекта и выполните следующую команду, (*18)
$ php composer.phar update
Usage / Использование
English:, (*19)
'organizationsList', // $form, // $model, // 'org_id', // \Yii::t('app', 'Organization'), //Label of dropdown
'multiSelect' => true, //multiple select dropdown items (true, false, 'auto')
'searchPanel' => [
'visible' => true, //show or hide search panel
'label' => \Yii::t('app', 'Choose Organization'), //title for search panel
'placeholder' => '', //search input placeholder text
'searchCaseSensivity' => false //searching text inside dropdown
//with caseSensivity or No
],
'rootNode' => [
'visible' => true, //show tree root node or not
'label' => \Yii::t('app', 'Root Node') //label for root node
],
'expand' => false, //expand dropdown tree after show
'items' => [
[
'id' => 1,
'label' => ' Apple Inc.',
'items' => [
[
'id' => 2,
'label' => 'Sale Department',
'items' => [
[
'id' => 3,
'label' => 'Supervisors'
],
[
'id' => 4,
'label' => 'Managers'
],
[
'id' => 5,
'label' => 'Assistants'
],
]
],
[
'id' => 6,
'label' => 'Contracts Department',
'items' => [
[
'id' => 7,
'label' => 'Coordinators'
],
[
'id' => 8,
'label' => 'Managers'
],
[
'id' => 9,
'label' => 'Clerks'
],
]
],
[
'id' => 10,
'label' => 'IT Department',
'items' => [
[
'id' => 11,
'label' => 'Engineers'
],
[
'id' => 12,
'label' => 'Programmers'
],
]
]
]
],
]
]);
?>
Russian:, (*20)
'organizationsList', // $form, // $model, // 'org_id', // \Yii::t('app', 'Organization'), //Заголовок выпадающего списка
'multiSelect' => true, //Если true, то из списка можно будет выбрать более одного значения
'searchPanel' => [
'visible' => true, //Если true, то будет отображена панели с полем для поиска по дереву
'label' => \Yii::t('app', 'Choose Organization'), //Заголовок для панели
'placeholder' => '', //Текст-подсказка внутри поля для поиска
'searchCaseSensivity' => false //Если True, то поиск по дереву будет регистрозависимый
],
'rootNode' => [
'visible' => true, //Отображать корневой узел или нет
'label' => \Yii::t('app', 'Root Node') //Название корневого узла
],
'expand' => false, //Распахнуть выпадающий список сразу после отображения
//Список узлов дерева с под-узлами
'items' => [
[
'id' => 1, //ID узла, который будет подставлен в скрытый input при выборе данного узла
'label' => ' Apple Inc.', //название узла, внутри можно использовать html-теги
//список дочерних узлов (заполняется аналогично родительскому, обратите внимание, что это массив массивов!)
'items' => [
[
'id' => 2,
'label' => 'Sale Department',
'items' => [
[
'id' => 3,
'label' => 'Supervisors'
],
[
'id' => 4,
'label' => 'Managers'
],
[
'id' => 5,
'label' => 'Assistants'
],
]
],
[
'id' => 6,
'label' => 'Contracts Department',
'items' => [
[
'id' => 7,
'label' => 'Coordinators'
],
[
'id' => 8,
'label' => 'Managers'
],
[
'id' => 9,
'label' => 'Clerks'
],
]
],
[
'id' => 10,
'label' => 'IT Department',
'items' => [
[
'id' => 11,
'label' => 'Engineers'
],
[
'id' => 12,
'label' => 'Programmers'
],
]
]
]
],
]
]);
?>
Loading of child nodes through Ajax / Загрузка дочерних узлов с помощью Ajax
English:, (*21)
'organizationsList',
'form' => $form,
'model' => $model,
'attribute' => 'org_id',
'label' => \Yii::t('app', 'Organization'),
'multiSelect' => true,
'searchPanel' => [
'visible' => true,
'label' => \Yii::t('app', 'Choose Organization'),
'placeholder' => '',
'searchCaseSensivity' => false
],
'rootNode' => [
'visible' => true,
'label' => \Yii::t('app', 'Root Node')
],
'expand' => false,
'items' => [],
'ajax' => [
//when node expand event triggered, you can send ajax request with specified params,
//returned data must be json_encoded array as `items` at previous sample
'onNodeExpand' => [
'url' => '/getchilds/', //URL for ajax request when node expanded
'method' => 'post', //post or get, default post
'params' => [
'param1' => 'value1', // 'value1',
'param3' => 'value1',
'node_id' => '%nodeId' // [
'url' => '/setchilds/', //URL for ajax request
'method' => 'get', //post or get
'params' => [
'param1' => 'value1', // '%nodeId' //
...
Controller
public function actionGetchilds() {
$node_id = \Yii::$app->request->post('node_id');
if ( !is_numeric( $node_id ) ) {
$model = OrganizationsTableModel::find()
->andWhere(['is', 'parent_id', NULL])
->orderBy(['parent_id' => SORT_ASC, 'name' => SORT_ASC])->all();
} else {
$model = OrganizationsTableModel::find()
->where(['parent_id' => $node_id ])
->orderBy(['parent_id' => SORT_ASC, 'name' => SORT_ASC])->all();
}
$childsList = [];
if ( $model !== null && is_array( $model ) && count( $model ) > 0 ) {
foreach( $model as $item ) {
$childsList[] = [ 'id' => $item->id, 'label' => $item->name, 'items' => [] ];
//You can run an additional query here
//to see if the node has children or not.
//Depending on this, you can set or not set parameter 'items'
}
}
return json_encode( $childsList );
}
public function actionSetchilds($collapsed_node_id) {
//... Your some code here
return json_encode( [ 'id' => $collapsed_node_id ] );
}
Russian:, (*22)
'organizationsList',
'form' => $form,
'model' => $model,
'attribute' => 'org_id',
'label' => \Yii::t('app', 'Organization'),
'multiSelect' => true,
'searchPanel' => [
'visible' => true,
'label' => \Yii::t('app', 'Choose Organization'),
'placeholder' => '',
'searchCaseSensivity' => false
],
'rootNode' => [
'visible' => true,
'label' => \Yii::t('app', 'Root Node')
],
'expand' => false,
'items' => [],
'ajax' => [
//в момент когда узел распахнется будет отправлен ajax-запрос с указанными ниже параметрами
//обратите внимание, возвращаемые данные должны быть в формате json как параметр `items` из примера выше
'onNodeExpand' => [
'url' => '/getchilds/', //Тут укажите URL куда будет отправлен ajax-запрос
'method' => 'post', //Метод (POST или GET), по-умолчанию POST
//отправляемые параметры
'params' => [
'param1' => 'value1', // 'value1',
'param3' => 'value1',
'node_id' => '%nodeId' // [
'url' => '/setchilds/', //Тут укажите URL куда будет отправлен ajax-запрос
'method' => 'get', //Метод (POST или GET), по-умолчанию POST
'params' => [
'param1' => 'value1', // // '%nodeId' //
...
Пример обработки в контроллере
//Обработка события `распахивания` узла
public function actionGetchilds() {
$node_id = \Yii::$app->request->post('node_id');
if ( !is_numeric( $node_id ) ) {
$model = OrganizationsTableModel::find()
->andWhere(['is', 'parent_id', NULL])
->orderBy(['parent_id' => SORT_ASC, 'name' => SORT_ASC])->all();
} else {
$model = OrganizationsTableModel::find()
->where(['parent_id' => $node_id ])
->orderBy(['parent_id' => SORT_ASC, 'name' => SORT_ASC])->all();
}
$childsList = [];
if ( $model !== null && is_array( $model ) && count( $model ) > 0 ) {
foreach( $model as $item ) {
$childsList[] = [ 'id' => $item->id, 'label' => $item->name, 'items' => [] ];
//Тут можно выполнить доп. запрос к БД и узнать если ли у узла дети
//И если есть, вернуть параметр `items`, иначе его не возвращать
//Тогда при построении дерева, у узла либо будет выведена иконка `распахнуть`, либо нет
//Но все зависит от Вашей реализации древовидной структуры таблиц к которой вы обращаетесь
}
}
return json_encode( $childsList );
}
//Обработка события `сворачивания` узла
public function actionSetchilds($collapsed_node_id) {
//... Какой-от Ваш код здесь
}
The Versions
29/06
2018