Я хочу добавить верхнюю и нижнюю полосу прокрутки к сетке в yii2

Question

У меня есть вид сетки в Yii2, и я хочу добавить полосу прокрутки вверху и внизу. Я скачал jquery.doubleScroll и, если у меня есть таблица на странице в div с классом «двойная прокрутка», я вижу полосу прокрутки вверху и внизу. Однако, когда я добавил gridview, также в div с классом «двойная прокрутка», я вижу только полосу прокрутки, которая появляется по умолчанию с gridview. Я также попытался добавить класс "grid-view" в скрипт, но безрезультатно

мой javascript и стиль

            $(document).ready(function() {
                $('.double-scroll').doubleScroll();
                $('.grid-view').doubleScroll();
                $('#sample2').doubleScroll({resetOnWindowResize: true});
            });
        </script>

       <style>
           .double-scroll {
               width: 400px;
           }

       </style>

мой стол с полосой прокрутки сверху и снизу

<div class="double-scroll">
    <table border="1">
        <tbody>
        <tr>
            <td>AAAAAAAAA</td>
            <td>BBBBBBBBB</td>
            <td>CCCCCCCCC</td>
            <td>DDDDDDDDD</td>
            <td>EEEEEEEEE</td>
            <td>FFFFFFFFF</td>
            <td>GGGGGGGGG</td>
            <td>HHHHHHHHH</td>
        </tr>
        <tr>
            <td>AAAAAAAAA</td>
            <td>BBBBBBBBB</td>
            <td>CCCCCCCCC</td>
            <td>DDDDDDDDD</td>
            <td>EEEEEEEEE</td>
            <td>FFFFFFFFF</td>
            <td>GGGGGGGGG</td>
            <td>HHHHHHHHH</td>
        </tr>
        <tr>
            <td>AAAAAAAAA</td>
            <td>BBBBBBBBB</td>
            <td>CCCCCCCCC</td>
            <td>DDDDDDDDD</td>
            <td>EEEEEEEEE</td>
            <td>FFFFFFFFF</td>
            <td>GGGGGGGGG</td>
            <td>HHHHHHHHH</td>
        </tr>
        </tbody>
    </table>
</div>

мой вид сетки, который имеет только один вид сетки по умолчанию

<div class="double-scroll">
<?php
    $gridColumns = '';

    echo DGridView::widget([

        'id' => 'task-template-grid',
        'dataProvider' => $dataProvider,
        'class' => 'double-scroll',
        'pager' => [
            'firstPageLabel' => 'First',
            'lastPageLabel' => 'Last',
            'maxButtonCount' => 20,
        ],
        'filterModel' => $searchModel,
        'columns' => $gridColumns,
    ]);
?>
</div>

это можно сделать?

Answer 1

У меня это работает, я использовал это в качестве примера http://jsfiddle.net/simo/67xSL/ это прекрасно работает

    <script>
    $(function () {
        $('.wrapper1').on('scroll', function (e) {
            $('.wrapper2').scrollLeft($('.wrapper1').scrollLeft());
        }); 
        $('.wrapper2').on('scroll', function (e) {
            $('.wrapper1').scrollLeft($('.wrapper2').scrollLeft());
        });
    });
    $(window).on('load', function (e) {

        $('.div1').width($('table').width());
        $('.div2').width($('table').width());
    });
    </script>

    <style>
    .wrapper1, .wrapper2 { width: 100%; overflow-x: scroll; overflow-y: hidden; }
    .wrapper1 { height: 20px; }
    .wrapper2 {}
    .div1 { height: 20px; }
    .div2 { overflow: none; }
    </style>

~~

page 

 <div class="wrapper1">
    <div class="div1"></div>
    </div>
    <div class="wrapper2">
    <div class="div2">

    <?php
    $export_str = '';
    $panel_legend = '';
    $gridColumns = '';

    echo DGridView::widget([

        'id' => 'task-template-grid',
        'dataProvider' => $dataProvider,
        'class' => 'double-scroll',
        'pager' => [
            'firstPageLabel' => 'First',
            'lastPageLabel' => 'Last',
            'maxButtonCount' => 20,
        ],
        'filterModel' => $searchModel,
        'columns' => $gridColumns,
    ]);
    ?>

    </div>
    </div>

I've lost the page with the name of the person who posted this, so sorry not to mention you by name, but thanks for your help