Question

我在Yii2中有一个gridview，我想在顶部和底部添加一个滚动条。我下载了jquery.doubleScroll，如果我在div上的页面上有一个表为“ double-scroll”类的表，则在顶部和底部会看到一个滚动条。但是，当我添加gridview时，也在类为“ double-scroll”的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

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

1 个答案: