1

現在、Yii cGridview で自動フィルタリングを実装しようとしています。デフォルトでは、「onclick」または「enter」キーの押下をフィルタリングしますが、そのイベントを「onkeyup」に変更する必要があります|

私のコードはこのようなものです 

Yii::app()->clientScript->registerScript('search',"   
    $('.filters > td >input').keyup(function(){    
        $('#grid-id').yiiGridView('update', {
            data: $(this).serialize()  
        });
        return false; 
    });
"); 
?>

最初の文字を入力するとフィルタリングが発生しましたが、フィルタリングとレンダリングの後にコードが失敗しました..解決策を教えてください.onkeyupをフィルタリングするphp yii gridview拡張機能はありますか

4

2 に答える 2

5

keyupリスナーの接続方法を変更する必要があります。グリッドビューが AJAX によって更新された後、グリッド内のすべての要素が置き換えられます。なのでkeyupもう付属はありません。次のようなものを試すことができます：

$('body').on('keyup','.filters > td > input', function() {
    $('#grid-id').yiiGridView('update', {
        data: $(this).serialize()  
    });
    return false; 
});
于 2013-09-17T08:15:41.837 に答える
1

@Michael Härtlの答えは正しいです。ただし、このコードを使用すると 2 つの問題が発生します。

1) その時にフィルターでユーザーを検索すると、そのたびにグリッドが更新されるため、入力ボックスのフォーカスが失われます。

2) 1 つのフィルター入力で検索し、その時点で 2 番目の入力フィールド フィールドに移動すると、最初の入力ボックスが失われます。

だから今、私はその解決策を手に入れました。

この Java スクリプト コードをグリッド ビューに設定します。

Yii::app()->clientScript->registerScript('search', "
$('body').on('keyup','.filters > td > input', function() {
    $(document).data('GridId-lastFocused',this.name);
    data = $('#GridId input').serialize();
    $('#GridId').yiiGridView('update', {
        data: data 
    });
    return false; 
});

// Configure all GridViews in the page
$(function(){
    setupGridView();
});

// Setup the filter(s) controls
function setupGridView(grid)
{
    if(grid==null)
        grid = '.grid-view tr.filters';
    // Default handler for filter change event
    $('input,select', grid).change(function() {
        var grid = $(this).closest('.grid-view');
        $(document).data(grid.attr('id')+'-lastFocused', this.name);
    });
}

// Default handler for beforeAjaxUpdate event
function afterAjaxUpdate(id, options)
{
    var grid = $('#'+id);
    var lf = $(document).data(grid.attr('id')+'-lastFocused');
    // If the function was not activated
    if(lf == null) return;
    // Get the control
    fe = $('[name=\"'+lf+'\"]', grid);
    // If the control exists..
    if(fe!=null)
    {
        if(fe.get(0).tagName == 'INPUT' && fe.attr('type') == 'text')
            // Focus and place the cursor at the end
            fe.cursorEnd();
        else
            // Just focus
            fe.focus();
    }
    // Setup the new filter controls
    setupGridView(grid);
}

// Place the cursor at the end of the text field
jQuery.fn.cursorEnd = function()
{
    return this.each(function(){
        if(this.setSelectionRange)
        {
            this.focus();
            this.setSelectionRange(this.value.length,this.value.length);
        }
        else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', this.value.length);
            range.moveStart('character', this.value.length);
            range.select();
        }
        return false;
    });
}");

この行を gridview ウィジェット コードに追加します。

'afterAjaxUpdate'=>'afterAjaxUpdate',

例えば：

$this->widget('zii.widgets.grid.CGridView', array(
                'id' => 'GridId',
                'afterAjaxUpdate'=>'afterAjaxUpdate',
));
于 2015-10-15T12:20:24.210 に答える