2

在尝试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没有价值

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

谢谢你

4

1 回答 1

4

您使用工具栏过滤器stringResult: true的选项。在这种情况下，完整的过滤器将在filters选项中编码（请参见此处）。此外，没有方法ignoreCase选项toolbarfilter。有ignoreCasejqGrid 的选项，但它仅适用于本地搜索的情况。

So you have to change the server code to use filters parameter or to remove stringResult: true option. The removing of stringResult: true could be probably the best way in your case because you have only one searchable column. In the case you will get one additional parameter on the server side: examen. For example if the user would type physic in the only searching field the parameter examen=physic will be send without of any information about the searching operation. If you would need to implement filter searching in more as one column and if you would use different searching operation in different columns you will have to implement searching by filters parameter.

UPDATED: I wanted to include some general remarks to the code which you posted. You will have bad performance because of the usage

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

The problem is that the web browser create internally index of elements by id. So the code $("#"+id+ " td:eq(1)") can use the id index and will work quickly. On the other side if you use grid[0] as the context of jQuery operation the web browser will be unable to use the index in the case and the finding of the corresponding <td> element will be much more slowly in case of large number rows.

To write the most effective code you should remind, that jQuery is the wrapper of the DOM which represent the page elements. jQuery is designed to support common DOM interface. On the other side there are many helpful specific DOM method for different HTML elements. For example DOM of the <table> element contain very helpful rows property which is supported by all (even very old) web browsers. In the same way DOM of <tr> contains property cells which you can use directly. You can find more information about the subject here. In your case the only thing which you need to know is that jqGrid create additional hidden row as the first row only to have fixed width of the grid columns. So you can either just start the enumeration of the rows from the index 1 (skipping the index 0) or verify whether the class of every row is jqgrow. If you don't use subgrids or grouping you can use the following simple code which is equivalent your original code

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");
    }
}
于 2012-05-30T07:35:22.953 回答