9

私はjqgridが初めてで、jqgridで検索を実装するには4つの方法があることがわかりました:

a toolbar searching
a custom searching
a single field searching
a more complex approach involving many fields and conditions - advanced searching

検索クエリ用のテキスト フィールドが 1 つしかないユニバーサル検索の「Google スタイル」を実装できるかどうかを知りたいです。そのフィールドに何かを書き込むと、グリッド内のすべてのデータから検索しようとします。

編集:すべてのデータを一度フェッチし、そのローカル データ セットの検索を使用したいと思います。

添付の写真を参照してください。

ここに画像の説明を入力

4

2 に答える 2

18

このような要件を実装するには多くの方法があります。可能な解決策から 1 つを示す 2 つのデモを用意しました。最初のデモと次のデモです。ここで説明するのと同じ方法でハイライト jQuery プラグインを使用する最初のデモの拡張バージョンの 2 番目のデモ。

まず、グリッドの上部のツールバーにボタンのある入力ボックスを追加します。toolbar: [true, "top"]グリッドの上部に空のツールバーを追加するために使用します。次に、次のコードを使用します

$('#t_' + $.jgrid.jqID($grid[0].id))
    .append($("<div><label for=\"globalSearchText\">Global search in grid for:&nbsp;" +
        "</label><input id=\"globalSearchText\" type=\"text\"></input>&nbsp;" +
        "<button id=\"globalSearch\" type=\"button\">Search</button></div>"));

ツールバーを HTML フラグメントで埋める

<div>
    <label for="globalSearchText">Global search in grid for:&nbsp;</label>
    <input id="globalSearchText" type="text">&nbsp;
    <button id="globalSearch" type="button">Search</button>
</div>

検索を開始するには、次の JavaScript コードを使用しました

$("#globalSearchText").keypress(function (e) {
    var key = e.charCode || e.keyCode || 0;
    if (key === $.ui.keyCode.ENTER) { // 13
        $("#globalSearch").click();
    }
});
$("#globalSearch").button({
    icons: { primary: "ui-icon-search" },
    text: false
}).click(function () {
    var rules = [], i, cm, postData = $grid.jqGrid("getGridParam", "postData"),
        colModel = $grid.jqGrid("getGridParam", "colModel"),
        searchText = $("#globalSearchText").val(),
        l = colModel.length;
    for (i = 0; i < l; i++) {
        cm = colModel[i];
        if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) {
            rules.push({
                field: cm.name,
                op: "cn",
                data: searchText
            });
        }
    }
    postData.filters = JSON.stringify({
        groupOp: "OR",
        rules: rules
    });
    $grid.jqGrid("setGridParam", { search: true });
    $grid.trigger("reloadGrid", [{page: 1, current: true}]);
    return false;
});

は$grid、検索を開始するグリッドです ( var $grid = $("#list");)。

上部のツールバーの要素の可視性を少し改善するために、このような単純な追加の CSS を使用しました

.ui-jqgrid .ui-userdata { height: auto; }
.ui-jqgrid .ui-userdata div { margin: .1em .5em .2em;}
.ui-jqgrid .ui-userdata div>* { vertical-align: middle; }

結果は下の写真のようになります

ここに画像の説明を入力

2 番目のデモでは、ハイライト プラグインを使用してグリッドの可視性を改善し、検索されたフィールドが行のどこにあるかをユーザーがすぐに確認できるようにします。

ここに画像の説明を入力

検索フィルターの作成中に、search: falseプロパティ ("note"列など) を持つ列と を持つ列をスキップしたことがわかりますstype: "select"。"cn"すべての列でフィルターを使用(含む) しました。

于 2013-11-01T13:59:33.187 に答える
4

はい、これは可能です - そして私が追加するかもしれない非常に簡単です。グリッドの上 (または必要な場所) にテキスト ボックスを配置するだけです。

<input type="text" id="search-string" name="search-string" />

そして検索ボタン：

<a href="#" id="search-button">Search</a>

そして、そのボタンのクリック イベントに必要な jQuery は次のとおりです。

$("#search-button").button().click(function(){
    searchString = $.trim($("#search-string").val());

    // check to see a search term has been entered in the textbox
    if(searchString == ""){
        alert("Please enter a word or phrase before searching!");
        // reset search box value to empty
        $("#search-string").val("").focus();
    }
    else{
        // set your grid's URL parameter to your server-side select file (that queries the DB)
        // we pass one parameter - the search string from the textbox
        $("#your-grid").jqGrid('setGridParam',{url:'crud/full-text-search.php?searchString='+searchString});
        // This line may need to be changed (if you use XML instead of JSON) 
        // It will reload the grid, using the new URL with the search term parameter
        $("#your-grid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');  
    }
});

もちろん、DB にクエリを実行するサーバー側のファイルでは、検索文字列を含む URL パラメータを取得し、正しいWHERE句でクエリを作成する必要があります...

于 2013-10-29T14:48:49.243 に答える