Yii2: Обновление Grid-view с использованием Pjax
После этой вики Yii 2.0: Pjax в ActiveForm и GridView — Yii2
Я пытался использовать мой gridview для обновления на Ajax без перезагрузки страницы, но не смог.
код моего _form.php
<?php
$this->registerJs(
'$("document").ready(function(){
$("#new_medicine").on("pjax:end", function() {
$.pjax.reload({container:"#medicine"}); //Reload GridView
});
});'
);
?><?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use kartik\grid\GridView;
//use yii\grid\Gridview;
use yii\data\ActiveDataProvider;
/* @var $this yii\web\View */
/* @var $model app\models\Medicine */
/* @var $form yii\widgets\ActiveForm */
?>
<!-- <div class="row">
<div class="col-lg-6 col-lg-offset-3"> -->
<div class="medicine-form">
<?php yii\widgets\Pjax::begin(['id' => 'new_medicine']) ?>
<?php $form = ActiveForm::begin(['options' => ['data-pjax' => true ]]); ?>
<?= $form->field($model, 'medicine_id')->textInput(['maxlength' => 10]) ?>
<?= $form->field($model, 'medicine_name')->textInput(['maxlength' => 50]) ?>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
<?= Html::submitButton($model->isNewRecord ? 'Save & New' : '',$option=['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary','name'=>'save_and_new']) ?>
</div>
<?php ActiveForm::end(); ?>
<?php yii\widgets\Pjax::end() ?>
</div>
Код в моем контроллере
public function actionIndex()
{
$model = new Medicine();
if ($model->load(Yii::$app->request->post()) && $model->save())
{
$model = new Medicine(); //reset model
}
$searchModel = new MedicineSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
'model' => $model,
]);
}
код в index.php
<?php
use yii\helpers\Html;
use yii\grid\GridView;
/* @var $this yii\web\View */
/* @var $searchModel app\models\MedicineSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */
$this->title = 'Medicines';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="medicine-index">
<h1><?= Html::encode($this->title) ?></h1>
<?php // echo $this->render('_search', ['model' => $searchModel]); ?>
<p>
<?= Html::a('Create Medicine', ['create'], ['class' => 'btn btn-success']) ?>
</p>
<?php \yii\widgets\Pjax::begin(['id' => 'medicine']); ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'id',
'medicine_id',
'medicine_name',
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
<?php \yii\widgets\Pjax::end(); ?>
</div>
Я думаю, что я очень тщательно следовал инструкциям, но, конечно, я что-то упустил, так как в виде сетки не отображаются новые записи, добавленные без перезагрузки страницы.
Любая помощь будет оценена.
Благодарю.
Решение
попробуйте объяснить, как сделать это как виджет; это универсальное решение, поэтому в случае возникновения проблем свяжитесь со мной:
Контроллер (@ your-alias / controllers / yourController):
...
public function actionManage($param=''){
$model = new YourModel();
if (Yii::$app->request->isPjax && $model->load(Yii::$app->request->post()) && $model->save())
{
$model = new YourModel(); //reset model
}
$model->paramId = $param;
$queryParams = Yii::$app->request->getQueryParams();
$queryParams['YourModelSearch']['param'] = $param;
$searchModel = new YourModelSearch();
$dataProvider = $searchModel->search($queryParams);
return $this->renderAjax('@your-alias/widgets/views/index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
'model' => $model,
]);
}...
widgets (@ your-alias / widgets /) [форма, вид]:
_form:
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\widgets\Pjax;
/**
* @var yii\web\View $this
* @var yourModule/models/YourModel $model
* @var yii\widgets\ActiveForm $form
*/
?>
<?php
$js = <<<JS
// get the form id and set the event
$('form#{$model->formName()}').on('beforeSubmit', function(e) {
var \$form = $(this);
// do whatever here, see the parameter \$form? is a jQuery Element to your form
console.log(\$form);
console.log("MODEL CODE = " + $("#yourmodel-code").val());
}).on('submit', function(e){
e.preventDefault();
});
JS;
//$this->registerJs($js);
$this->registerJs(
'$("#new-your-model").on("pjax:end", function() {
commonLib.divAction("#div_new_model", "hide"); //hide form
$.pjax.reload({container:"#models"}); //Reload GridView
});', \yii\web\View::POS_READY
);
?>
<div class="model-form">
<?php Pjax::begin(['id' => 'new-model', 'timeout' => false, 'enablePushState' => false]) ?>
<?php $form = ActiveForm::begin([
'id' => $model->formName(),
//'method' => 'post',
'action' => ['/module/controller/manage?param='.$model->code],
'options' => ['data-pjax' => true ],
//'layout' => 'default',
]); ?>
<?= $form->field($model, 'code')->textInput(['maxlength' => 255]) ?>
...<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
<?php yii\widgets\Pjax::end() ?>
</div>
индексный вид (вид сетки):
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
/**
* @var yii\web\View $this
* @var yii\data\ActiveDataProvider $dataProvider
* @var yourModule\models\search\YourModelSearch $searchModel
*/
?>
<div class="model-index">
<!--h1><!--?= Html::encode($this->title) ?></h1-->
<?php // echo $this->render('_search', ['model' => $searchModel]); ?>
<p><?= Html::button(Yii::t('bp', 'Add ...'), [
'class' => 'btn btn-success',
'onclick'=>'js:commonLib.divAction("#div_new_model", "show")'
])?>
</p>
<div id="div_new_model" style="display:none">
<?= Html::button(Yii::t('common', 'Cancel'), [
'class' => 'btn btn-success',
'onclick'=>'js:commonLib.divAction("#div_new_model", "hide")'
])?>
<!-- Render create form -->
<?= $this->render('_formModel', [
'model' => $model,
]) ?>
</div>
<?php Pjax::begin(['id' => 'models', 'timeout' => false, 'enablePushState' => false]) ?>
<?= GridView::widget([
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'columns' => [
['class' => 'yii\grid\SerialColumn'],
...
['class' => 'yii\grid\ActionColumn'],
],
]); ?>
<?php Pjax::end() ?>
</div>
вызов виджета (в поле зрения):
echo @your-alias\widgets\YourWidget::widget([
'param' => $model->param,]);
Другие решения
$.pjax.reload('#my-grid-pjax' , {timeout : false});
Я не смог найти подходящего решения для обновления виджета в виде сетки с помощью pjax.
Я решил с помощью метода автоматического обновления для страницы просмотра сетки. Я понимаю, что это не лучшее решение, и я все еще ищу подходящее решение.
Метод, который я использовал, выглядит следующим образом:
<script>
function autoRefresh()
{
window.location.reload();
}
setInterval('autoRefresh()', 60000); // this will reload page after every 1 minute.
</script>
То, что вы ищете, это
<script type="text/javascript">
$.pjax.defaults.timeout = false;
</script>
Настройка времени ожидания pjax по умолчанию не дает странице времени на выполнение каких-либо действий, поэтому она перезагружается.
Обновлять GridView таблица без перезагрузки страницы с использованием pjax:
use yii\grid\GridView;
use yii\widgets\Pjax;
Pjax::begin(['id' => 'todaysactivity', 'timeout' => false, 'enablePushState' => false])
Используйте jQuery / JavaScript следующим образом:
var url = baseurl + '/activity/logging'; // url where the gridview table need to update
$.pjax.reload({container: "#todaysactivity", url: url}); // refresh the grid