Question

尝试在jquery中实现filterToolbar搜索，但是当我在文本框中写入时，它不会发送值，搜索字段或运算符：我使用了一个示例，这里是html文件中的代码< / p>

jQuery(document).ready(function () {
    var grid = $("#list");
    $("#list").jqGrid({
        url:'grid.php',
        datatype: 'xml',
        mtype: 'GET',
        deepempty:true ,
        colNames:['Id','Buscar','Desccripcion'],
        colModel:[
            {name:'id',index:'id', width:65, sorttype: 'int', hidden:true, search:false},
            {name:'examen',index:'nombre', width:500, align:'left', search:true},
            {name:'descripcion',index:'descripcion', width:100, sortable:false, hidden:true, search:false}
        ],
        pager: jQuery('#pager'),
        rowNum:25,
        sortname: 'nombre',
        sortorder: 'asc',
        viewrecords: true,
        gridview: true,
        height: 'auto',
        caption: 'Examenes',
        height: "100%", 
        loadComplete: function() {
            var ids = grid.jqGrid('getDataIDs');

            for (var i=0;i<ids.length;i++) {
                var id=ids[i];
                $("#"+id+ " td:eq(1)", grid[0]).tooltip({
                    content: function(response) {
                        var rowData = grid.jqGrid('getRowData',this.parentNode.id);
                        return rowData.descripcion;
                    },
                    open: function() {
                        $(this).tooltip("widget").stop(false, true).hide().slideDown("fast");
                    },
                    close: function() {
                        $(this).tooltip("widget").stop(false, true).show().slideUp("fast");
                    }
                }).tooltip("widget").addClass("ui-state-highlight");
            }
        }
    });
    $("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
    $("#list").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false,
        defaultSearch: 'cn', ignoreCase: true});
});

并在php文件中

$ops = array(
    'eq'=>'=', //equal
    'ne'=>'<>',//not equal
    'lt'=>'<', //less than
    'le'=>'<=',//less than or equal
    'gt'=>'>', //greater than
    'ge'=>'>=',//greater than or equal
    'bw'=>'LIKE', //begins with
    'bn'=>'NOT LIKE', //doesn't begin with
    'in'=>'LIKE', //is in
    'ni'=>'NOT LIKE', //is not in
    'ew'=>'LIKE', //ends with
    'en'=>'NOT LIKE', //doesn't end with
    'cn'=>'LIKE', // contains
    'nc'=>'NOT LIKE'  //doesn't contain
);
function getWhereClause($col, $oper, $val){
    global $ops;
    if($oper == 'bw' || $oper == 'bn') $val .= '%';
    if($oper == 'ew' || $oper == 'en' ) $val = '%'.$val;
    if($oper == 'cn' || $oper == 'nc' || $oper == 'in' || $oper == 'ni') $val = '%'.$val.'%';
    return " WHERE $col {$ops[$oper]} '$val' ";

}
$where = ""; //if there is no search request sent by jqgrid, $where should be empty
$searchField = isset($_GET['searchField']) ? $_GET['searchField'] : false;
$searchOper = isset($_GET['searchOper']) ? $_GET['searchOper']: false;
$searchString = isset($_GET['searchString']) ? $_GET['searchString'] : false;
if ($_GET['_search'] == 'true') {
    $where = getWhereClause($searchField,$searchOper,$searchString);
}

我看到了该查询，$searchField，$searchOper，$searchString没有价值

但是当我在导航栏上使用按钮搜索时，它可以工作！我不知道toolbarfilter

发生了什么

谢谢

Answer 1

您使用toolbarfilter的stringResult: true选项。如果完整过滤器将以filters选项进行编码（请参阅here）。此外，ignoreCase方法没有toolbarfilter选项。 jqGrid有ignoreCase个选项，但仅在本地搜索的情况下才有效。

因此，您必须更改服务器代码以使用filters参数或删除stringResult: true选项。删除stringResult: true可能是您案例中最好的方法，因为您只有一个可搜索的列。如果您在服务器端获得一个额外参数：examen。例如，如果用户在唯一的搜索字段中键入physic，则将发送参数examen=physic，而不会显示有关搜索操作的任何信息。如果您需要在一个列中实现过滤器搜索，并且如果要在不同的列中使用不同的搜索操作，则必须通过filters参数实现搜索。

更新：我想在您发布的代码中添加一些常规备注。由于使用

，您的性能会有不佳

$("#"+id+ " td:eq(1)", grid[0])

问题是Web浏览器通过id在内部创建元素索引。因此代码$("#"+id+ " td:eq(1)")可以使用id索引并且可以快速工作。另一方面，如果使用grid[0]作为jQuery操作的上下文，Web浏览器将无法使用该情况下的索引，并且相应的<td>元素的查找将会慢得多大量的行。

要编写最有效的代码，您应该提醒，jQuery是DOM的包装器，它代表页面元素。 jQuery旨在支持通用 DOM接口。另一方面，对于不同的HTML元素，有许多有用的特定 DOM方法。例如，<table>元素的DOM包含非常有用的rows属性，所有（甚至非常旧的）Web浏览器都支持该属性。同样，<tr>的DOM包含您可以直接使用的属性cells。您可以找到有关主题here的更多信息。在您的情况下，您唯一需要知道的是jqGrid创建额外的隐藏行作为第一行只有固定宽度的网格列。因此，您可以从索引1（跳过索引0）开始枚举行，也可以验证每行的类是否为jqgrow。如果您不使用子网格或分组，则可以使用以下与原始代码等效的简单代码

loadComplete: function() {
    var i, rows = this.rows, l = rows.length;

    for (i = 1; i < l; i++) { // we skip the first dummy hidden row
        $(rows[i].cells(1)).tooltip({
            content: function(response) {
                var rowData = grid.jqGrid('getRowData',this.parentNode.id);
                return rowData.descripcion;
            },
            open: function() {
                $(this).tooltip("widget").stop(false, true).hide().slideDown("fast");
            },
            close: function() {
                $(this).tooltip("widget").stop(false, true).show().slideUp("fast");
            }
        }).tooltip("widget").addClass("ui-state-highlight");
    }
}

jqGrid filterToolbar搜索

1 个答案: