在yii中更新cgridview后,Jquery UI排序不起作用


Jquery UI Sortable not working after updating cgridview in yii

我正在处理一个基于AJAX请求(无重载)的项目。在我们更新cgridview之前,Jquery sortable运行良好,之后它就不工作了。

此外,如果我多次排序,它就会停止工作。这个页面有很多图片列表。

我有一个代码如下:|

index.php

//Get image details
foreach($arrContent as $key => $value) {
    ob_start();
        $this->widget('ImageWidget',array('imageModel'=>new Images(),'entityType'=>$key,'entityTypeId'=>$specModel->spec_id,'type'=>'View'));
        $arrContent[$key] = ob_get_contents();
    ob_end_clean();
    ob_start();
        $this->widget('ImageWidget',array('imageModel'=>new Images(),'entityType'=>$key,'entityTypeId'=>$specModel->spec_id,'type'=>'Form'));
        $arrContent[$key] .= ob_get_contents();
    ob_end_clean();
}
ob_start();
    $this->widget('BrochureWidget',array('brochureModel'=>new Brochure(),'entityType'=>"SPEC", 'entityTypeId'=>$specModel->spec_id,'type'=>'Form'));
    $brochureContent .= ob_get_contents();
ob_end_clean();
$this->widget('zii.widgets.jui.CJuiTabs',array(
    'tabs'=>array(
        "Brochure({$countBrochure})"=>array(
            'content'=>$brochureContent,
        ),
        "Elevation Images({$countElevationImages})"=>array(
            'content'=>$arrContent['SPEC_ELEVATION']
        ),
    ),
)
.............................
............................

ImageViewWidget

<?php   
..........................  
........................   
             Yii::app()->clientScript-> registerScript("draggable-$this->entityType-$value", false);
$draggable = "sortGrid('image-grid-$this->entityType-$value', '{$sortUrl}')";
Yii::app()->clientScript->registerScript("draggable-$this->entityType-$value", $draggable);
$this->widget('zii.widgets.grid.CGridView', array(
            'id'=>"image-grid-$this->entityType-$value",
            'ajaxUrl'=>Yii::app()->createAbsoluteUrl('bdxFeed/images',array('entityType'=>$this->entityType,'entityTypeId'=>$this->entityTypeId)),
            //'rowCssClassExpression'=>'"items[]_{$data->image_id }"',
            'rowHtmlOptionsExpression'=>'array("rel"=>"items[]_{$data->image_id}")',
            'dataProvider'=>$dataProvider,
            'afterAjaxUpdate' => 'sortGrid',
            'htmlOptions'=> array(
                'style'=>'padding:0px',
            ),
            'columns'=>array(
            ........................
            ........................

ImageFormwidget

<?php
........................
........................
$submitForm = <<< EOJ
$('#image-form-{$this->entityType}').on('submit',function() {
    var URL = '{$url}';
        $.ajax({
            type:'post',
            url : URL,
            data:new FormData(this),
            dataType:'json',
            contentType:false,
            processData:false,
            cache:false,
            success:function(response){
                if(response.status == 1) {
                    if(imageType != "" && response.new)
                        $('#images #gridViews').html(response.html);
                    $('#imageFail').hide();
                    $('#imageSucc').html(response.message);
                    $('#imageSucc').show();
                    updateCount();
                    $('#communityLoader').hide();
                    gridId = "image-grid-$this->entityType";
                    if(imageType != '') {
                        gridId += "-" + imageType;
                    }
                    //Update gridviwe for newly inserted record
                    if(!response.new || imageType == '')
                    {
                        $.fn.yiiGridView.update(gridId);
                    }
                    document.getElementById('image-form-{$this->entityType}').reset();
                    //add sorting functionality to updated grid view
                    if(imageType != "" ) {
                        $('input[name="Images[image_type]"]').each(function() {
                            gridId = "image-grid-$this->entityType-" + $(this).val();
                            if($('#' + gridId).length) {
                                setTimeout(function() { sortGrid(gridId, '{$sortUrl}'); }, 300);
                            }
                        });
                   }
                   else {
                         setTimeout(function() { sortGrid(gridId, '{$sortUrl}'); }, 300);
                   }
                }
                else {
                    $('#imageSucc').hide();
                    $('#imageFail').html(response.message);
                    $('#imageFail').show();
                    $('#communityLoader').hide();
                }
            },
            error:function() {
                $('#communityLoader').hide();
            }
        })
    });

JS-

function sortGrid(id, URL) {    
    $('#' + id + ' table.items tbody').sortable({
        forcePlaceholderSize: true,
        forceHelperSize: true,
        items: 'tr',
        update : function() {
                $('#communityLoader').css({
                    height:$('#communityLoader').parent().height(),
                    width:$('#communityLoader').parent().width()
                });
                $('#communityLoader').show();
                serial = $('#' + id + ' table.items tbody').sortable('serialize', {key: 'items[]', attribute: 'rel'});
                $.ajax({
                    type : 'POST',
                    url : URL,
                    data : serial,
                    success : function(data) {
                       $('#communityLoader').hide();
                       $.fn.yiiGridView.update(id);
                       setTimeout(function() {sortGrid(id, URL)}, 2000);
                    },
                    error : function(request, status, error) {
                        $('#communityLoader').hide();
                    }
                });
            },
        helper: fixHelper
    }).disableSelection();
}

通过以下更改解决了上述问题:

ImageViewWidget:
注意:我已经删除了afterAjaxUpdate

 <?php   
 ..........................  
........................   
$this->widget('zii.widgets.grid.CGridView', array(
        'id'=>"image-grid-$this->entityType-$value",
        'ajaxUrl'=>Yii::app()->createAbsoluteUrl('bdxFeed/images',array('entityType'=>$this->entityType,'entityTypeId'=>$this->entityTypeId)),
        //'rowCssClassExpression'=>'"items[]_{$data->image_id }"',
        'rowHtmlOptionsExpression'=>'array("rel"=>"items[]_{$data->image_id}")',
        'dataProvider'=>$dataProvider,
         //'afterAjaxUpdate' => 'sortGrid',
        'htmlOptions'=> array(
            'style'=>'padding:0px',
        ),
        'columns'=>array(
        ........................
        ........................

和js:

我更改了以下内容:

 $.fn.yiiGridView.update(id);
 setTimeout(function() {sortGrid(id, URL)}, 2000);

带有

$.fn.yiiGridView.update(gridId,{
                            complete: function(jqXHR, status) {
                                if (status=='success'){
                                    sortGrid(gridId, '{$sortUrl}');
                                }
                            }
                        });

就是这样,它是通过做上述改变来解决的。