我想在 yii2 的 gridview 中添加顶部和底部滚动条答案

【问题标题】：I want to add a top and bottom scrollbar to a gridview in yii2我想在 yii2 的 gridview 中添加顶部和底部滚动条
【发布时间】：2019-04-03 15:32:31
【问题描述】：

我在 Yii2 中有一个 gridview，我想在顶部和底部添加一个滚动条。我下载了 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>

我的 gridview 只有一个默认的 gridview

<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>

可以吗？

【问题讨论】：

它非常简单，但是您需要解释 gridview 产生什么输出，而且您使用的不是默认的DGridView，您是否通过扩展使用自定义Gridview默认？或其他一些插件请提及
另外，如果您可以为gridview提供输出源，这将有助于解决问题

标签： jquery gridview yii2

【解决方案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

【讨论】：

这个答案没有解决原始问题或使用的插件。