2017-02-21 9 views
0

그리드보기의 페이지 당 행 기능을 개발했습니다. 5,10,25,50,100과 같은 옵션이있는 드롭 다운 메뉴가 있습니다. 변경시 그리드보기에 선택된 행 수를 표시하는 데 필요한 드롭 다운 옵션을 변경하십시오. 그 동안 나는처럼 내 그리드 뷰를 갖는 Pjax 컨테이너를 만들었습니다Yii2 pjax.reload가 gridview 레코드 업데이트에 작동하지 않습니다.

public function actionIndex() 
{ 

    if (Yii::$app->request->get('pageSize')) { 
     Yii::$app->session->set('pageSize', (int) Yii::$app->request->get('pageSize')); 
    } 

    // to set the selected page number of the grid 
    if (Yii::$app->request->get('page')) { 
     Yii::$app->session->set('page',(int)Yii::$app->request->get('page')); 
    } else { 
     Yii::$app->session->set('page',1); 
    } 

    $searchModel = new TestCardSearch(); 
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams); 

    return $this->render('index', [ 
     'searchModel' => $searchModel, 
     'dataProvider' => $dataProvider, 
    ]); 
} 

기능 reloadGrid :

<?php 
use yii\helpers\Html; 
use yii\widgets\ActiveForm; 
?> 

<div class="test-card-search"> 

    <?php $form = ActiveForm::begin([ 
    'action' => ['index'], 
    'method' => 'get', 
    'options' => ['data-pjax' => true , 'class'=>'search_form form-horizontal' ] 

]); ?> 

<div class="form-group"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <?= Html::activeLabel($model, 'cc_number',['class'=>'control-label col-sm-5']); ?> 
      <div class="col-sm-6"> 
       <?= Html::activeTextInput($model, 'cc_number', ['class'=>'form-control col-sm-5','autofocus'=>true]); ?>         
      </div> 
     </div> 
    </div> 
</div> 

<div class="form-group"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <?= Html::activeLabel($model, 'cc_type',['class'=>'control-label col-sm-5']); ?> 
      <div class="col-sm-6">         
       <?= Html::activeDropDownList($model, 'cc_type',[ "RESTRICTED" => Yii::t('app','RESTRICTED'), "UNRESTRICTED" => Yii::t('app','UNRESTRICTED')],['prompt' => Yii::t('app','All Types'), 'class'=>'form-control col-sm-5']); ?>         
      </div> 
     </div> 
    </div> 
</div> 

<div class="form-group"> 
    <div class="col-md-5"></div> 

    <div class="col-md-3"> 
     <div class="form-group"> 
      <?= Html::submitButton('Search', ['class' => 'btn btn-blue']) ?> 
      &nbsp;&nbsp;&nbsp; 
      <?= Html::resetButton('Reset', ['class' => 'btn btn-primary','id'=>'resetButton','onclick'=>"location.href = '".Yii::$app->urlManager->createUrl('testcard/index')."';"]) ?> 
     </div> 
    </div> 
</div> 

<?php ActiveForm::end(); ?> 

</div> 

컨트롤러의 동작은 다음과 같습니다처럼

<?php 

use yii\helpers\Html; 
use yii\grid\GridView; 
use yii\widgets\Pjax; 

$this->title = 'Test Cards'; 
$this->params['breadcrumbs'][] = $this->title; 
?> 

<div class="row"> 
    <div class="test-card-index"> 
     <?= $this->render('_search', [ 'model' => $searchModel ]) ?> 
    </div> 
</div> 

<?php Pjax::begin(['id' => 'test_grid_pjax', 'enablePushState' => false, 'timeout' => 1000000]); ?> 

<div class="row"> 
<?= GridView::widget([ 
    'dataProvider' => $dataProvider, 
    'class' => 'table table-bordered responsive', 
    'id' => 'test_grid', 
    'summary' => "<div class='summary'><label>Showing {begin} - {end} of {totalCount} items.</label></div> <div class='col-sm-6 pageDropdown'> <label>Records per page</label> ".Html::dropDownList('pageSize', (int) Yii::$app->session->get('pageSize', Yii::$app->params['defaultPageSize']), Yii::$app->params['rowPerPage'], ['id' => 'pageSize', 'class' => 'form-control', 'onchange' => 'return reloadGrid("test_grid_pjax",this.value)']) . "</div>", 
    'layout' => '{summary}{items}<div class="pager">{pager}</div>', 
    'options' => ['class' => 'main-grid grid-view full-table'], 
    'columns' => [ 
     'cc_amount', 
     'cc_number',      
     'cc_type', 
     'cc_status' 
     ], 
    ]); 
?> 
</div> 

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

_search.php 보인다()은 다음과 같습니다 :

<script type='text/javascript'> 
function reloadGrid(id, value, url) { 
$.pjax.reload({ 
    container: "#" + id, 
    data: $('#search_form').serialize() + "&pageSize=" + value, 
    url: url, 
    push: false, 
    replace: false, 
    timeout: 1000000 
}); 
} 
</script> 

필드를 검색하면 전체 페이지가 다시로드되고 url에 검색 매개 변수가 설정됩니다. 또 다른 문제는 변화에 'pageSize가'드롭 다운은 그것이 같은 콘솔에 오류가 표시됩니다 다른 모든 시도에 불과 처음으로 잘 작동한다는 것입니다 :

Uncaught TypeError: Cannot read property 'reload' of undefined 
at reloadGrid (index:53) 
at HTMLSelectElement.onchange (index:1) 

는 JS 충돌의 문제인가? 나는 그것을 검색하여 많은 솔루션을 시도했지만 효과가 없습니다.

답변

0

pjax가 그리드 필터의 모든 검색 필드를 구문 분석하지 않는 것과 비슷한 문제가 발생했습니다. 내 솔루션/해결 방법/해킹은 pjax reload를 직접 호출하는 대신 그리드 필터 필드의 변경 이벤트를 트리거하는 것이 었습니다.

 $('.date-range-filter').trigger('change'); // this works 

     /* // this didn't parse all the values from my form 
     $.pjax.reload({ 
      container: "#grid-pjax" 
     }); 
     */ 

그리드 뷰가 제출할 양식 값을 수집하는 방식과 관련이 있습니다. 귀하의 경우 gridview에

의 헤더 필터 당신은 또한 소스를 검사하고 확인해야합니다에 대한 실제 형태가 없기 때문에 실제로 그리드 열 필터를위한 새로운 더미 양식을 구축해야합니다 양식

제대로 지목된다
<?php $form = ActiveForm::begin([ 
    'action' => ['index'], 
    'method' => 'get', 
    'id'=> 'myFormId' // <---- try giving the form an id 
    'options' => ['data-pjax' => true , 'class'=>'search_form form-horizontal' ] 

]); ?> 

pjax begin 및 end 대신 pjax 위젯 양식 선택기 속성 - 을 사용해 볼 수도 있습니다. 이렇게하면 pjax가 자동으로 해당 양식의 모든 입력 필드를 가져옵니다.

<?php 
Pjax::widget([ 
    'id' => 'search-form', 
    'enablePushState' => false, 
    'enableReplaceState' => false, 
    'formSelector' => '#myFormId', // <-- the form to submit with pjax 
    // 'submitEvent' => 'change', /// whatever you want 
    ]); 
?>