2

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

ありがとうございました

4

1 に答える 1

4

toolbarfilterのオプションstringResult: trueを使用します。この場合、完全なフィルターがオプションでエンコードされます (こちらを参照)。さらに、メソッドのオプションはありません。jqGrid のオプションがありますが、ローカル検索の場合にのみ機能します。filtersignoreCasetoolbarfilterignoreCase

filtersそのため、パラメーターを使用するか、オプションを削除するようにサーバー コードを変更する必要がありstringResult: trueます。stringResult: true検索可能な列が1つしかないため、おそらくあなたのケースではの削除が最良の方法かもしれません。この場合、サーバー側で 1 つの追加パラメータを取得します: 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 メソッドが多数あります。たとえば、要素の DOM には、すべての (非常に古い) Web ブラウザーでサポートされている<table>非常に役立つ行プロパティが含まれています。同様に、DOM には、直接使用できる<tr>プロパティセルが含まれています。このテーマの詳細については、こちらをご覧ください. あなたの場合、知っておく必要がある唯一のことは、グリッド列の幅を固定するためだけに、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");
    }
}
于 2012-05-30T07:35:22.953 に答える