search - jqGrid filter工具栏搜索

Question

在尝试实现 filterToolbar在 jquery 中搜索，但是当我在文本框中写入时，它不会发送值、搜索字段或运算符:我使用了一个示例，这是 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没有值(value)

但是当我使用导航栏上的按钮搜索时，它可以工作!我不知道 toolbarfilter 发生了什么

谢谢你

Answer 1

您使用选项 stringResult: true的toolbarfilter .在这种情况下，完整的过滤器将被编码为 filters选项(见 here)。另外没有ignoreCase toolbarfilter 的选项方法。有ignoreCase jqGrid 的选项，但它仅适用于本地搜索。

所以你必须更改服务器代码才能使用 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操作的上下文，网页浏览器会出现无法使用索引的情况，并找到对应的 <td>在大量行的情况下，元素会慢得多。

要编写最有效的代码，您应该提醒一下，jQuery 是代表页面元素的 DOM 的包装器。 jQuery 旨在支持常见的 DOM 接口(interface)。另一方面，对于不同的 HTML 元素，有许多有用的特定 DOM 方法。例如 <table> 的 DOM元素包含非常有用 rows所有(甚至是非常旧的)网络浏览器都支持的属性。同理 <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");
    }
}