jqGrid filter工具栏搜索

Question

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

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）。此外，toolbarfilter 方法没有 ignoreCase 选项。 jqGrid 有ignoreCase 选项，但它只适用于本地搜索。

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

已更新：我想对您发布的代码添加一些一般性说明。你会因为使用而表现不佳

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

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

要编写最有效的代码，您应该提醒一下，jQuery 是代表页面元素的 DOM 的包装器。 jQuery 旨在支持 common 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");
    }
}