javascript - ajax gridview过滤器重新加载yii2后Javascript不起作用

问题描述

我在 yii2 上做了一个带有过滤器的简单 gridview 表，似乎工作得很好，但我注意到在 gridview 表上应用任何过滤器后 javascript 函数不起作用，我认为它刷新整个页面而不是只刷新表。

我做了 $.pjax.reload 方法，但它不起作用，这就是我应用 pjax reload 方法的方式：

//inventariosearch-amb_id is the ID of one of my filterselects on the gridview

$("#inventariosearch-amb_id").on("pjax:end", function() {
                $.pjax.reload({container:"#inventario_lista"});  //Reload GridView
            });

让我知道我是否应用了错误的方法。

好吧，正如我所说，我认为 pjax 正在刷新整个页面，因为它改变了我的页面标题：

对此：

这就是我注意到变化的方式，并且 javascript 不再正常工作。

我能做些什么？。

我的观点 index.php：

<?php

use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use yii\helpers\Url;
use yii\grid\GridView;
use yii\grid\ActionColumn;
use yii\widgets\Pjax;
use yii\bootstrap4\Modal;
use app\models\Ambiente;
use app\models\TipoServicio;
use app\models\Empresa;
/* @var $this yii\web\View */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->registerJsFile("@web/js/inventario.js",[
    'depends' => [
        \yii\web\JqueryAsset::className()
    ]
]);

$this->title = 'Servidores';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="inventario-index">

    <?php $this->beginBlock('bloque_titulo'); ?>

        <div class="page-title-icon">
            <i class="fa fa-archive icon-gradient bg-arielle-smile">
            </i>
        </div>
        <div>
            <?= Html::encode($this->title) ?>
            <div class="page-title-subheading">
                Lista de servidores
            </div>
        </div>

    <?php $this->endBlock(); ?>

    <p>
        <?= Html::a('<i class="fa fa-plus"></i> Añadir nuevo', ['create'], ['class' => 'btn btn-success']) ?>
    </p>

    <?php Pjax::begin(['id'=>'inventario_lista','timeout'=> false,'clientOptions' => ['method' => 'POST','registerClientScript' => 'alert("lol")']]); ?>

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $model,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            [
                'attribute' => 'amb_id',
                'value' => 'amb.amb_desc',
                'filter' => Html::activeDropDownList($model, 'amb_id', ArrayHelper::map(Ambiente::find()->asArray()->all(), 'amb_id', 'amb_desc'), [
                              'class' => 'form-control',
                              'prompt' => '--- Seleccione ---'
                        ]) 
            ],
            'inv_plataforma',
            'inv_host_computername',
            [
                'attribute' => 'tise_id',
                'value' => 'tise.tise_desc',
                'filter' => Html::activeDropDownList($model, 'tise_id',ArrayHelper::map(TipoServicio::find()->orderby(['tise_desc'=>SORT_ASC])->asArray()->all(), 'tise_id', 'tise_desc'), [
                              'class' => 'form-control',
                              'prompt' => '--- Seleccione ---'
                        ]) 
            ],
            [
                'attribute' => 'emp_id',
                'value' => 'emp.emp_desc',
                'filter' => Html::activeDropDownList($model, 'emp_id',ArrayHelper::map(Empresa::find()->orderby(['emp_desc'=>SORT_ASC])->asArray()->all(), 'emp_id', 'emp_desc'), [
                              'class' => 'form-control',
                              'prompt' => '--- Seleccione ---'
                        ]) 
            ],
            //'inv_servicio',
            //'inv_ip_admin',
            //'inv_ip_servicio',
            //'inv_ip_nfs',
            //'sad_id',
            //'usu_id_responsable_sistema',
            //'usu_id_2doresponsable_sistema',
            //'inv_modelo_servidor',
            //'prov_id',
            //'inv_serial_equipo',
            //'inv_codigo_remedy',
            //'inv_serial_dispositivo',
            //'sop_id',
            //'inv_version_so',
            //'inv_alta_disponibilidad',
            //'inv_ubicacion',
            //'inv_ala',
            //'inv_fila',
            //'inv_rack',
            //'inv_cpu_core',
            //'inv_cpu_modelo',
            //'inv_cpu_velocidad',
            //'inv_gb_memoria',
            //'hat_id',
            //'inv_tipo_contrato_proveedor',
            //'inv_responsable_funcional',
            //'spa_id',
            //'fv_id',
            //'pr_id',
            //'inv_observaciones',
            //'inv_performance_review',
            //'inv_performance_management',
            //'inv_obsoleto',
            //'inv_motivo_obsoleto',
            //'inv_arbol',
            //'inv_arbol_1er_nivel',
            //'inv_fin_venta',
            //'inv_fin_partes',
            //'inv_fin_soporte',
            //'inv_fecha_cons_obsoleto',

            ['class' => 'yii\grid\ActionColumn',
                'buttons'=>[
                    'view'=>
                        function($url,$model,$key){
                        $btn = Html::button("<i class='fa fa-eye'></i>",[
                            'value'=>Yii::$app->urlManager->createUrl('inventario/view/'.$key),
                            'class'=>'serverview grid-action btn btn-info',
                            'title'=>'Ver datos del servidor',
                             'data-toggle'=> 'modal',
                             'data-target'=> '#modalviewserver',
                        ]);
                        return $btn;

                        },
                    'update'=>function ($url,$model,$key) {
                        return Html::a('<i class="fa fa-edit"></i>', ['/inventario/update/'.$key], ['class'=>'btn btn-success grid-button']);
                    },
                ],
            ],

        ],
    ]); ?>

    <?php Pjax::end(); ?>
</div>

    <?php

        Modal::begin([
                'title' => '<h4>Ver servidor</h4>',
                'id'     => 'modalviewserver',
                'size'   => 'modal-lg',

        ]);

        echo "<div id='viewservercontent'></div>";

        Modal::end();

    ?>

我的动作控制器：

public function actionIndex()
    {
        $model = new InventarioSearch();
        $dataProvider = $model->search(Yii::$app->request->post());
        
        return $this->render('index', [
            'dataProvider' => $dataProvider,
            'model' => $model
        ]);
    }

还有我的 JS（以防万一）：

$(document).ready(function ()
{
    // $("#inventariosearch-amb_id").on("pjax:end", function() {
    //      $.pjax.reload({container:"#inventario_lista"});  //Reload GridView
    //  });
    
    $('.serverview').click(function()
    {
         $('#modalviewserver').appendTo("body").modal('show')
            .find('#viewservercontent')
             .load($(this).attr('value'));
    });

});

标签： javascriptgridviewyii2pjax

javascript - ajax gridview过滤器重新加载yii2后Javascript不起作用

问题描述

解决方案

推荐阅读