The subsections are not shown

Maxcorp commented 7 years ago

Hello!

After one of your commits (maybe https://github.com/execut/yii2-widget-bootstraptreeview/commit/c3c2045f552f8a492cd5f103a2cf28cf32343d12) the subsections are no longer displayed like this http://prntscr.com/g0k6sz. For example this item http://prntscr.com/g0k5cy have got many subsection items.

If restore folder in vendor/bower and vendor/execut the old version of your script bootstrap-treeview all be work.

iurijacob commented 7 years ago

Indeed. I've already reported this in the pull request https://github.com/execut/yii2-widget-bootstraptreeview/pull/9 comments.

I ended up having to downgrade to previous version.

Maxcorp commented 7 years ago

@iurijacob what version of "execut/yii2-widget-bootstraptreeview" works now?

iurijacob commented 7 years ago

@Maxcorp I'm using 1.1.2. It's working fine for me.

Maxcorp commented 7 years ago

@iurijacob thank you!

execut commented 7 years ago

In my environment expanding work fine. execut/yii2-widget-bootstraptreeview 1.1.4 and patternfly-bootstrap-treeview 2.1.5. After upgrade to new version in my application code there were bugs with expanding nodes. To resolve them i added this option for client params:

        echo TreeView::widget([
...
            'clientOptions' => [
                'levels' => 1,
...

If this did not help you, is it possible to reproduce this error in a simple example?

execut commented 7 years ago

I tried examples from repository and they also work fine.

Maxcorp commented 7 years ago

My TreeView code which doesn't work with the new version of yii2-widget-bootstraptreeview:

 echo Html::beginTag('div', ['class'=>'categories-tree__container']);
    echo TreeView::widget([
        'data' => $items,
        'size' => TreeView::SIZE_MIDDLE,
        'header' => 'Каталог',
        'searchOptions' => [
            'inputOptions' => [
                'placeholder' => 'Поиск'
            ],
        ],
        'clientOptions' => [
            //'onNodeSelected' => $onSelect,
            'selectedBackColor' => '#00a65a',
            'borderColor' => '#222d32',
            'backColor'=>'#222d32',
            'onhoverColor'=>'#00a65a',
            'showTags'=>true
        ],
    ]);
    echo Html::endTag('div');

It didn't help clientOptions' => ['levels' => 1,]. I don't know where is the error, all clear in the chrome console. I just did composer update and it broke expanding nodes. But version 1.1.2 works fine for me.

execut commented 7 years ago

Странно. Попробовал этот код с items из примера и всё опять отлично работает. Я всё правильно понял: ошибка в том, что при нажатии на плюс не разворачиваются подчиненные элементы? Можно кусок из $items? Возможно в них проблема. Ещё возможно composer и npm plugin не правильно отработали с зависимостями.

Maxcorp commented 7 years ago

@execut в моем примере, плюс вообще не появляется. Вот так при использовании старой версии http://prntscr.com/g1bh0j, в новой http://prntscr.com/g1bhnm.

$items:

execut commented 7 years ago

И опять всё работает.. Значит дело в компонентах. Можно попробовать почистить папку web/assets. Можно вывод консоли в HAR вкладки браузера Net, если не секрет) Нужно нажать правой кнопкой на одном из элементе и "save all as HAR"

execut commented 7 years ago

Нужно сравнить вашу версию patternfly-bootstrap-treeview и bootstrap с моими.

execut commented 7 years ago

Вот так у меня выглядит 2017-07-28-122634_1920x1080_scrot

Maxcorp commented 7 years ago

Я думаю проще будет, если я выложу часть vendor'a. В архиве нерабочий вариант, с последней версией.

bootstrap_tree_view.zip

execut commented 7 years ago

Вставил всё из вашего архива, всё-равно работает. Сделал минимальный вариант слоя на php:

<?php
use yii\helpers\Html;
?>
<?php $this->beginPage() ?>
    <!DOCTYPE html>
    <html lang="<?= Yii::$app->language ?>">
    <head>
        <?php
        $this->head();
        ?>
    </head>
    <body>
    <?php $this->beginBody(); ?>
    <?php
    echo Html::beginTag('div', ['class' => 'categories-tree__container']);
    $data = [
        [
            'text' => '<span class="categories-tree-item tree-item__text" data-id="1">Труба медная</span> &nbsp;<i title="Смотреть товары категории" class="fa fa-cart-arrow-down show-products-categories-tree__item" data-id="1"></i> &nbsp;&nbsp;<i title="Добавить подкатегоию" class="fa fa-plus-square add-categories-tree__item" data-id="1"></i>',
            'href' => '/admin/section/1/update/',
            'icon' => 'glyphicon glyphicon-folder-close',
            'selectedIcon' => 'glyphicon glyphicon-folder-open',
            'nodes' => [
                [
                    'text' => '<span class="categories-tree-item tree-item__text" data-id="7">Труба метрическая</span> &nbsp;<i title="Смотреть товары категории" class="fa fa-cart-arrow-down show-products-categories-tree__item" data-id="7"></i> &nbsp;&nbsp;<i title="Добавить подкатегоию" class="fa fa-plus-square add-categories-tree__item" data-id="7"></i>',
                    'href' => '/admin/section/7/update/',
                    'icon' => 'glyphicon glyphicon-folder-close',
                    'selectedIcon' => 'glyphicon glyphicon-folder-open',
                ],
                [
                    'text' => '<span class="categories-tree-item tree-item__text" data-id="8">Труба алюминиевая</span> &nbsp;<i title="Смотреть товары категории" class="fa fa-cart-arrow-down show-products-categories-tree__item" data-id="8"></i> &nbsp;&nbsp;<i title="Добавить подкатегоию" class="fa fa-plus-square add-categories-tree__item" data-id="8"></i>',
                    'href' => '/admin/section/8/update/',
                    'icon' => 'glyphicon glyphicon-folder-close',
                    'selectedIcon' => 'glyphicon glyphicon-folder-open',
                ]
            ]
        ]
    ];

    echo \execut\widget\TreeView::widget([
        'data' => $data,
        'size' => \execut\widget\TreeView::SIZE_MIDDLE,
        'header' => 'Каталог',
        'searchOptions' => [
            'inputOptions' => ['placeholder' => 'Поиск'],
        ],
        'clientOptions' => [
            'level' => 1,
            //'onNodeSelected' => $onSelect,
            'selectedBackColor' => '#00a65a',
            'borderColor' => '#222d32',
            'backColor'=>'#222d32',
            'onhoverColor'=>'#00a65a',
            'showTags'=>true ],
    ]);
    echo Html::endTag('div');
    $this->endBody();
    ?>
    </body>
</html>

Вот мой html, что отрендерился в хроме:

<html lang="ru"><head>
        <meta name="keywords" content="Автоплюс розничные магазины автозапчастей для автомобилей Фольксваген Шкода Ауди Форд Опель Volkswagen Skoda  Audi Ford Opel интернет-магазин запчастей для иномарок Detalika">
<meta name="description" content="Деталика - это 9 розничных магазинов в СПб и интернет-магазин, в которых вы можете купить оригинальные запчасти для Фольксваген, Шкода, Ауди, Форд, Опель">
<link href="/assets/89f91c75/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link href="/assets/bb76c0b5/TreeFilterInput.css" rel="stylesheet">
<link href="/assets/b14f4eab/css/bootstrap.css" rel="stylesheet">
<link href="/assets/6dfb4bea/bootstrap-treeview.min.css" rel="stylesheet">
<link href="/assets/bb76c0b5/TreeView.css" rel="stylesheet">    <style type="text/css" id="w0-style"> .treeview .list-group-item{cursor:pointer}.treeview span.indent{margin-left:10px;margin-right:10px}.treeview span.icon{width:12px;margin-right:5px}.treeview .node-disabled{color:silver;cursor:not-allowed}.node-w0{background-color:#222d32;border:1px solid #222d32;}.node-w0:not(.node-disabled):hover{background-color:#00a65a;}.node-w0.node-result{color:#D9534F;}.node-w0.node-result:hover{color:#D9534F;}.node-w0.node-selected{color:#FFFFFF;background-color:#00a65a;}.node-w0.node-selected:hover{color:#FFFFFF;background-color:#00a65a;} </style></head>
    <body>
        <div class="categories-tree__container"><div><div class="tree-view-wrapper">
    <div class="row tree-header">
        <div class="col-sm-6">
            <div class="tree-heading-container">Каталог</div>
        </div>
        <div class="col-sm-6">
            <div id="w1" class="execut-tree-filter-input"><input class="form-control" name="search" placeholder="Поиск" autocomplete="off" type="text"><span class="close" title="Clear search results">×</span></div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div id="w0" class="middle treeview"><ul class="list-group"><li class="list-group-item node-w0" data-nodeid="0.0"><span class="icon expand-icon glyphicon glyphicon-minus"></span><span class="icon node-icon glyphicon-folder-close glyphicon"></span><span class="categories-tree-item tree-item__text" data-id="1">Труба медная</span> &nbsp;<i title="Смотреть товары категории" class="fa fa-cart-arrow-down show-products-categories-tree__item" data-id="1"></i> &nbsp;&nbsp;<i title="Добавить подкатегоию" class="fa fa-plus-square add-categories-tree__item" data-id="1"></i></li><li class="list-group-item node-w0" data-nodeid="0.0.0"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon glyphicon-folder-close glyphicon"></span><span class="categories-tree-item tree-item__text" data-id="7">Труба метрическая</span> &nbsp;<i title="Смотреть товары категории" class="fa fa-cart-arrow-down show-products-categories-tree__item" data-id="7"></i> &nbsp;&nbsp;<i title="Добавить подкатегоию" class="fa fa-plus-square add-categories-tree__item" data-id="7"></i></li><li class="list-group-item node-w0" data-nodeid="0.0.1"><span class="indent"></span><span class="icon glyphicon"></span><span class="icon node-icon glyphicon-folder-close glyphicon"></span><span class="categories-tree-item tree-item__text" data-id="8">Труба алюминиевая</span> &nbsp;<i title="Смотреть товары категории" class="fa fa-cart-arrow-down show-products-categories-tree__item" data-id="8"></i> &nbsp;&nbsp;<i title="Добавить подкатегоию" class="fa fa-plus-square add-categories-tree__item" data-id="8"></i></li></ul></div>
        </div>
    </div>
</div></div></div><script src="/assets/4c79a5f8/jquery.js"></script>
<script src="/assets/89f91c75/jquery-ui.js"></script>
<script src="/assets/bb76c0b5/TreeFilterInput.js"></script>
<script src="/assets/6dfb4bea/bootstrap-treeview.min.js"></script>
<script type="text/javascript">jQuery(document).ready(function () {
jQuery('#w1').TreeFilterInput({"treeViewId":"w0"});
jQuery('#w0').treeview({"level":1,"selectedBackColor":"#00a65a","borderColor":"#222d32","backColor":"#222d32","onhoverColor":"#00a65a","showTags":true,"data":[{"text":"\u003Cspan class=\u0022categories-tree-item tree-item__text\u0022 data-id=\u00221\u0022\u003EТруба медная\u003C\/span\u003E \u0026nbsp;\u003Ci title=\u0022Смотреть товары категории\u0022 class=\u0022fa fa-cart-arrow-down show-products-categories-tree__item\u0022 data-id=\u00221\u0022\u003E\u003C\/i\u003E \u0026nbsp;\u0026nbsp;\u003Ci title=\u0022Добавить подкатегоию\u0022 class=\u0022fa fa-plus-square add-categories-tree__item\u0022 data-id=\u00221\u0022\u003E\u003C\/i\u003E","href":"\/admin\/section\/1\/update\/","icon":"glyphicon glyphicon-folder-close","selectedIcon":"glyphicon glyphicon-folder-open","nodes":[{"text":"\u003Cspan class=\u0022categories-tree-item tree-item__text\u0022 data-id=\u00227\u0022\u003EТруба метрическая\u003C\/span\u003E \u0026nbsp;\u003Ci title=\u0022Смотреть товары категории\u0022 class=\u0022fa fa-cart-arrow-down show-products-categories-tree__item\u0022 data-id=\u00227\u0022\u003E\u003C\/i\u003E \u0026nbsp;\u0026nbsp;\u003Ci title=\u0022Добавить подкатегоию\u0022 class=\u0022fa fa-plus-square add-categories-tree__item\u0022 data-id=\u00227\u0022\u003E\u003C\/i\u003E","href":"\/admin\/section\/7\/update\/","icon":"glyphicon glyphicon-folder-close","selectedIcon":"glyphicon glyphicon-folder-open"},{"text":"\u003Cspan class=\u0022categories-tree-item tree-item__text\u0022 data-id=\u00228\u0022\u003EТруба алюминиевая\u003C\/span\u003E \u0026nbsp;\u003Ci title=\u0022Смотреть товары категории\u0022 class=\u0022fa fa-cart-arrow-down show-products-categories-tree__item\u0022 data-id=\u00228\u0022\u003E\u003C\/i\u003E \u0026nbsp;\u0026nbsp;\u003Ci title=\u0022Добавить подкатегоию\u0022 class=\u0022fa fa-plus-square add-categories-tree__item\u0022 data-id=\u00228\u0022\u003E\u003C\/i\u003E","href":"\/admin\/section\/8\/update\/","icon":"glyphicon glyphicon-folder-close","selectedIcon":"glyphicon glyphicon-folder-open"}]}]});
});</script>    

</body></html>

execut commented 7 years ago

Подозрительно, что у вас плюсы не показываются. Может в этом зацепка. Вот css, который хром показывает для моей кнопки плюса (icon expand-icon glyphicon glyphicon-plus):

.treeview span.icon {
    width: 12px;
    margin-right: 5px;
}
.treeview span.icon, .treeview span.image {
    width: 12px;
    margin-right: 5px;
}
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.treeview .list-group-item {
    cursor: pointer;
}
.treeview .list-group-item {
    cursor: pointer;
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
html {
    font-size: 10px;
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
}

Maxcorp commented 7 years ago

У меня вообще не ставятся классы, необходимые для плюса. Вот так выглядят элементы в баженой версии http://prntscr.com/g1dfzi Вот так в рабочей http://prntscr.com/g1dgoi при не нажатом плюсе.

Если span задать классы: icon expand-icon glyphicon glyphicon-plus, то плюс появится, но раскрытие не будет работать. Проблема именно в js.

execut commented 7 years ago

Не удалось у меня это воспроизвести. Вам нужно попробовать мой упрощенный вариант. Возможно дело в других виджетах. Например, не правильно автоматом проставляется id виджета и он не может проинициализироваться. Идентификатор можно указать напрямую в настройках виджета. Он должен быть уникальным

Maxcorp commented 7 years ago

Вам нужно попробовать мой упрощенный вариант.

Какой упрощенный вариант? Сейчас, я пользуюсь версией 1.1.2.

Возможно дело в других виджетах.

Ошибка, появилась после смены на patternfly-bootstrap. Установка уникального id тоже не помогает http://prntscr.com/g1e8aq. Как, я понял, подобная проблема проявляется еще у @iurijacob.

execut commented 7 years ago

Скиньте, пожалуйста, html нерабочего варианта. Возможно слетает всё в ваших условиях. Упрощенный я имел ввиду как в сообщении выше. Нужно просто в слой на время воткнуть этот код:

<?php
use yii\helpers\Html;
?>
<?php $this->beginPage() ?>
    <!DOCTYPE html>
    <html lang="<?= Yii::$app->language ?>">
    <head>
        <?php
        $this->head();
        ?>
    </head>
    <body>
    <?php $this->beginBody(); ?>
    <?php
    echo Html::beginTag('div', ['class' => 'categories-tree__container']);
    $data = [
        [
            'text' => '<span class="categories-tree-item tree-item__text" data-id="1">Труба медная</span> &nbsp;<i title="Смотреть товары категории" class="fa fa-cart-arrow-down show-products-categories-tree__item" data-id="1"></i> &nbsp;&nbsp;<i title="Добавить подкатегоию" class="fa fa-plus-square add-categories-tree__item" data-id="1"></i>',
            'href' => '/admin/section/1/update/',
            'icon' => 'glyphicon glyphicon-folder-close',
            'selectedIcon' => 'glyphicon glyphicon-folder-open',
            'nodes' => [
                [
                    'text' => '<span class="categories-tree-item tree-item__text" data-id="7">Труба метрическая</span> &nbsp;<i title="Смотреть товары категории" class="fa fa-cart-arrow-down show-products-categories-tree__item" data-id="7"></i> &nbsp;&nbsp;<i title="Добавить подкатегоию" class="fa fa-plus-square add-categories-tree__item" data-id="7"></i>',
                    'href' => '/admin/section/7/update/',
                    'icon' => 'glyphicon glyphicon-folder-close',
                    'selectedIcon' => 'glyphicon glyphicon-folder-open',
                ],
                [
                    'text' => '<span class="categories-tree-item tree-item__text" data-id="8">Труба алюминиевая</span> &nbsp;<i title="Смотреть товары категории" class="fa fa-cart-arrow-down show-products-categories-tree__item" data-id="8"></i> &nbsp;&nbsp;<i title="Добавить подкатегоию" class="fa fa-plus-square add-categories-tree__item" data-id="8"></i>',
                    'href' => '/admin/section/8/update/',
                    'icon' => 'glyphicon glyphicon-folder-close',
                    'selectedIcon' => 'glyphicon glyphicon-folder-open',
                ]
            ]
        ]
    ];

    echo \execut\widget\TreeView::widget([
        'data' => $data,
        'size' => \execut\widget\TreeView::SIZE_MIDDLE,
        'header' => 'Каталог',
        'searchOptions' => [
            'inputOptions' => ['placeholder' => 'Поиск'],
        ],
        'clientOptions' => [
            'level' => 1,
            //'onNodeSelected' => $onSelect,
            'selectedBackColor' => '#00a65a',
            'borderColor' => '#222d32',
            'backColor'=>'#222d32',
            'onhoverColor'=>'#00a65a',
            'showTags'=>true ],
    ]);
    echo Html::endTag('div');
    $this->endBody();
    ?>
    </body>
</html>

Maxcorp commented 7 years ago

В примере выше, раскрытие элементов работает. В моем нерабочем примере, этот блок выводится в табах и изначально не виден http://prntscr.com/g1ehmv, может это как-то влияет на его работоспособность.

execut commented 7 years ago

А табы и само дерево рендерятся каким способом?

при открытии самой страницы
через ajax\pjax по js-событию
через js после открытия страницы Нужен рабочий пример бага и оформить как задачу в форке этого jquery-виджета. В своём коде я за эти версии ничего не менял, 100% трабла в форке.

execut commented 7 years ago

Если у меня будет рабочий пример, то сам эту ошибку исправлю.

Maxcorp commented 7 years ago

Табы рендерятся, как здесь https://adminlte.io/themes/AdminLTE/index2.html http://prntscr.com/g1enu4. Дерево уже изначально в табах. Это только предположение, что проблема в табах, возможно что-то еще, другие варианты смогу чуть позже проверить.

execut commented 7 years ago

@iurijacob, hello! You can give a minimal source to reproduce this error? In my cases, everything works fine. This is a bug in the fork of the jquery plugin.

elmys commented 5 years ago

Indeed, problem in the count of nested elements... If i include more 19 items, then tree not show subs...

execut commented 5 years ago

Try report to the creators of the widget https://github.com/patternfly/patternfly-bootstrap-treeview/issues

elmys commented 5 years ago

Try report to the creators of the widget https://github.com/patternfly/patternfly-bootstrap-treeview/issues

Guys wrote about changing library https://github.com/patternfly/patternfly-bootstrap-treeview/issues/24#issuecomment-411675068

execut / yii2-widget-bootstraptreeview

The subsections are not shown #11