2017 © Pedro Peláez
 

yii2-extension yii2-tree-dropdown

A dropdown widget containing expandable treeview

image

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)

Screenshot Screenshot, (*6)

Russian:, (*7)

Screenshot Screenshot, (*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

dev-master

9999999-dev https://github.com/delikates-nsk/yii2-tree-dropdown

A dropdown widget containing expandable treeview

  Sources   Download

BSD-3-Clause

The Requires

 

by Constantin G. Nekhoroshkov

extension yii2 widget dropdown checkbox tree