Question

我目前正在尝试在Yii cGridview中实现自动过滤，默认情况下会过滤'onclick'或'enter'按键，但我需要将该事件更改为“onkeyup”|

我的代码就像这样

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

当我输入第一个字母过滤发生时，但过滤后渲染代码失败..请给我一个解决方案..是否有任何php yii gridview扩展，其中有过滤onkeyup

Answer 1

您需要更改keyup侦听器的附加方式。通过AJAX刷新gridview后，网格中的所有元素都将被替换。所以不再有keyup了。您可以尝试以下方式：

$('body').on('keyup','.filters > td > input', function() {
    $('#grid-id').yiiGridView('update', {
        data: $(this).serialize()  
    });
    return false; 
});

Answer 2

@MichaelHärtl的回答是正确的。但是当您使用此代码时会出现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',
));

我们可以在Yii的cGridview中实现On key up过滤器选项吗？

2 个答案: