2016-08-19 2 views
1

У меня есть ListView, который я сам создаю. И у меня есть GridView, используя kartik\grid\GridView.Yii2 - swap ListView для GridView на jQuery.click()

Оба работают нормально на своих соответствующих страницах. Они используют те же параметры, как $dataProvider и $searchModel.

<div id="grid"> 
    <?= GridView::widget([....]); ?> 
</div> 

И

<div id="list"> 
    <?= ListView::widget([....]); ?> 
</div> 

Проблема заключается в том, когда я положил их на той же странице, вторая теряет свою интерактивность - такие вещи, как пагинацией, например. У меня есть кнопка jQuery.click() для замены GridView для ListView, но она не работает.

$("#presentation-switcher").click(function() { 
    $("#data-view").load("_list.php"); 
}); 

Я экспериментировал с различными идентификаторами, разными данными и т. Д., Но безрезультатно. Возможно, я ошибаюсь? Есть идеи?

ответ

1

Установите новую страницу обзора элемента как _list_item:

<?= 
ListView::widget([ 
    'dataProvider' => $listDataProvider, 
    'options' => [ 
     'tag' => 'div', 
     'class' => 'list-wrapper', 
     'id' => 'list-wrapper', 
    ], 
    'layout' => "{pager}\n{items}\n{summary}", 
    'itemView' => '_list_item', 
]); 
?> 

More Detail

+1

Очевидно, из этого следует, что мне нужно было использовать '$ gridDataProvider' для' GridView'. –

1

Вы можете попробовать поставить GridView и ListView виджеты внутри Pjax, такие как:

\yii\widgets\Pjax::begin(); 
     echo GridView::widget([ 
     ]); 
\yii\widgets\Pjax::end(); 

и

\yii\widgets\Pjax::begin(); 
     echo ListView::widget([ 
     ]); 
\yii\widgets\Pjax::end(); 
+0

Да. Уже сделано, что жаль. –

+0

Проверьте консоль firebug, чтобы поймать ошибку javascript –

+0

Используя инструменты Chrome Developers, я получаю совершенно пустую консоль - никаких ошибок вообще. –

0

Попробуйте следующее:

В GridView установлен showFooter в false:

'panel' => [ 
    'showFooter' => false, 
    //Other settings you may wan 

    'heading' => '<h3 class="panel-title"><i class="iconLeft fa fa-th-list"></i> '.Yii::t('app/buttons', 'list').' '.$title.'</h3>', 
    'type' => 'success', 
    //'before' => Html::a('<i class="iconLeft fa fa-plus"></i> '.Yii::t('app/buttons', 'create'), ['create'], ['class' => 'btn btn-success']), 
    //'after' => Html::a('<i class="iconLeft fa fa-repeat"></i> '.Yii::t('app/buttons', 'reset_grid'), ['index'], ['class' => 'btn btn-info']), 
], 

А затем добавить параметры пейджера в явном виде:

'pager' => [ 
    'options' => ['class' => 'pagination'], // set class name used in ui list of pagination 
    'prevPageLabel' => '<i class="fa fa-angle-left"></i>', // Set the label for the "previous" page button 
    'nextPageLabel' => '<i class="fa fa-angle-right"></i>', // Set the label for the "next" page button 
    'firstPageLabel' => '<i class="fa fa-angle-double-left"></i>', // Set the label for the "first" page button 
    'lastPageLabel' => '<i class="fa fa-angle-double-right"></i>', // Set the label for the "last" page button 
    'nextPageCssClass' => 'next', // Set CSS class for the "next" page button 
    'prevPageCssClass' => 'prev', // Set CSS class for the "previous" page button 
    'firstPageCssClass' => 'first', // Set CSS class for the "first" page button 
    'lastPageCssClass' => 'last', // Set CSS class for the "last" page button 
    'maxButtonCount' => 10, // Set maximum number of page buttons that can be displayed 
], 

Также вы не должны установить \yii\widgets\Pjax::begin(); и \yii\widgets\Pjax::end();, потому что kartik\grid\GridView использует Pjax по умолчанию.

Смежные вопросы