web-dev-qa-db-ja.com

jqGridフィルターツールバーの初期デフォルト値

フィルタツールバーでjqGridを使用しています。デフォルトでステータスが「オープン」の行のみが表示されるように、フィールドの1つに初期のデフォルトのフィルタ値を設定する必要がありますが、ユーザーは必要に応じて閉じた行を表示できます。

現時点では、このような回避策があります

setTimeout(function() {$('#gs_Status').val('Open');$("#eventsGrid")[0].triggerToolbar()},500);

しかし、それは2番目の要求になり、実際にはかなり悪いです。

誰かがこれを行う方法を知っていますか？

編集：もう少し調査すると、これはおそらく不可能であることがわかりました:(

jqueryjqgrid
12
Paul Creasey

JqGridドキュメントwikiで ツールバー検索 および アドオングリッドメソッド を見たことがありますか？ filterToolbarを使用してフィルターを設定し、triggerToolbarを使用してフィルターを設定できるようです。私はこれを自分で試したことはありませんが、グリッドにデータがロードされたら、おそらくloadCompleteでこれを行うことができます。

これは役に立ちますか？

1
Justin Ethier

これを行うには、いくつかの手順があります。

  1. 列モデルの検索オプションにデフォルト値を渡す
  2. デフォルトのフォームデータロードプロセスを防止します
  3. テーブルの準備ができたら、フィルターツールバーのデータロードをトリガーします

もう少し詳しく：

グリッドデータ型をローカルに設定し（これにより、初期データの読み込みが防止されます）、検索オプションのデフォルト値を設定します。

  $("#mytable").jqGrid({
    datatype: "local",
    colNames:['Keyword','Selected'], 
    colModel:[
     {name:'keyword',
      sortable:true,
      searchoptions: { defaultValue:'golf' }
    },
    {name:'selected',
      sortable:false,
      searchoptions: { }
    },
    ....
    ....

次に、フィルターツールバーを追加し、データ型とURLを設定して、ロードをトリガーします。

  $('#mytable').jqGrid('filterToolbar', {autosearch: true});
  $('#mytable').setGridParam({datatype: 'json', url:'/get_data.php'});
  $('#mytable')[0].triggerToolbar();
38
Mark B

私が読んだすべてのヒントは私にはうまくいきませんでした。そこで、私は多くのことを試み、jqGridソースコードでいくつかの調査を行いました。 beforeRequestイベントを使用すると、「デフォルト値」または「保存された検索値」機能を統合する方がはるかに簡単です。

私はいくつかの問題を解決しなければなりませんでした：

  1. これはbeforeRequestイベントですが、そこで設定した検索パラメーターは、triggerToolbarを呼び出すまで使用されません。
  2. triggerToolbarは、新しい検索パラメータで新しいリクエストを設定するだけでなく、テーブルデータのリロードもトリガーしますが、前のリクエストはまだ実行されているため、同じリクエストを2回実行します（両方とも新しい検索で）パラメーター）。
  3. デフォルト値を設定しますが、ユーザーがそれらをクリア/上書きできるようにします。
  4. 無限ループを避け、古い検索機能を維持します。

コードは次のとおりです。

beforeRequest: function ()
{
    // Activate filter toolbar and define "beforeSearch" callback
    // to avoid a second search request on page load, triggered 
    // by "triggerToolbar()" when not set.
    //
    // Important: 
    // "beforeSearch" has to return true to avoid the second
    // request on page load, but it has to return false for all
    // following searches (otherwise it wouldn't be possible to
    // submit new searches by pressing Enter in search input fields).
    $("#myTable").jqGrid('filterToolbar', {
        beforeSearch: function(){
            if ($(this).data('firstSearchAbortedFlag') != '1')
            {
                $(this).data('firstSearchAbortedFlag', '1');
                return true;
            }

            // Return false or add your customizations here...
            return false;
        }
    });

    if ($(this).data('defaultValuesSetFlag') != '1')
    {
        // Set flag to set default only the first time when
        // the page is loaded.
        $(this).data('defaultValuesSetFlag', '1');

        // Set default values...
        // (id = 'gs_' + fieldname)
        $('#gs_field_a').val('value a');
        $('#gs_field_b').val('value b');

        // Call "triggerToolbar" to use the previously set
        // parameters for the current search.
        // 
        // Important: 
        // Set "beforeSearch" callback for "filterToolbar" to avoid
        // a second search request, triggered by "triggerToolbar".
        $("#myTable")[0].triggerToolbar();
    }
}

これがお役に立てば幸いです。

3
Ziege

上記の回答とは異なる方法で修正し、beforeRequest関数を悪用して初期のデフォルト値を投稿データに追加しました。

JqGridの作成者と連絡を取り合っていた場合、デフォルト値のオプションは高度な検索専用です。

OnBeforeRequest関数に設定できる関数を作成しました。この関数は、検索オプションのすべてのデフォルト値を取得して、投稿データに追加します。したがって、デフォルト値が最初のリクエストに追加されます。

OnbeforeRequestイベントを引き続き使用できるようにするために、コードの最後でonBeforeRequestを変更します（this.p.beforeRequest = function（）{}）。あなたはそれをあなたが望むものに変えてそれを呼ぶことができます。次回リクエストを行うと、その関数が使用され、この関数は（オーバーライドのために）閉じられます。

function() {

    var defaultSearchOptions = [];
    var colModel = this.p.colModel;

    // loop trough each column and check if they have an default value in search options
    // and add them to the array
    $.each(colModel, function (index, column) {

        if (column.hasOwnProperty('searchoptions')) {

            var searchOptions = column.searchoptions;

            if (searchOptions.hasOwnProperty('defaultValue')) {

                defaultSearchOptions[defaultSearchOptions.length++] =
                {
                    ""field"": column.index,
                    ""op"": ""bw"",
                    ""data"": searchOptions.defaultValue
                };
            }
        }
    });


    // if there are any default search options retrieve the post data
    if (defaultSearchOptions.length > 0) {

        var postData = this.p.postData;

        var filters = {};

        // check if post data already has filters
        if (postData.hasOwnProperty('filters')) {
            filters = JSON.parse(postData.filters);
        }

        var rules = [];

        // check if filtes already has rules
        if (filters.hasOwnProperty('rules')) {
            rules = filters.rules;
        }

        // loop trough each default search option and add the search option if the filter rule doesnt exists
        $.each(defaultSearchOptions, function (defaultSearchOptionindex, defaultSearchOption) {

            var ruleExists = false;

            $.each(rules, function (index, rule) {

                if (defaultSearchOption.field == rule.field) {
                    ruleExists = true;
                    return;
                }
            });

            if (ruleExists == false) {
                rules.Push(defaultSearchOption);
            }
        });

        filters.groupOp = 'AND';
        filters.rules = rules;

        // set search = true
        postData._search = true;
        postData.filters = JSON.stringify(filters);
    }

    this.p.beforeRequest = function() { // your before request function here };
    this.p.beforeRequest.call(this);
}

お役に立てれば

1
daanl

Ziegeの答え を読んだ後、そこで何が起こっているのか考えました。最初のリクエストがサーバーに送信される前にデフォルト値を初期化する、はるかに簡単な方法を思いつきました。

これが完全に機能する例です。アイデアは、ステータスのドロップダウンが「アクティブ」と「クローズ」の列フィルターがあるということです。ここで、デフォルトを「アクティブ」にします。コードには、何が起こっているのかを説明するコメントがあります。

$('#deals').jqGrid({
    colNames: ['...','Status','...'],
    colModel: [
        { ... },
        // Use the defaultValue attribute to set your defaults in the searchOptions object
        { name: 'Status', stype: 'select', searchoptions: { defaultValue: 'Active', value: {"":"All","Active":"Active","Closed":"Closed",}, sopt: [ 'eq'] }, width: 60 },
        { ... }
    ],
    // Here's where we intercept each server request to cancel it if it's the first one. 
    // Returning false from this method causes the request to the server to be aborted.
    beforeRequest: function () {
        // Define a local reference to the grid
        var $requestGrid = $(this);
        // Check a data value for whether we've completed the setup. 
        // This should only resolve to true once, on the first run.
        if ($requestGrid.data('areFiltersDefaulted') !== true) {
            // Flip the status so this part never runs again
            $requestGrid.data('areFiltersDefaulted', true);
            // After a short timeout (after this function returns false!), now
            // you can trigger the search
            setTimeout(function () { $requestGrid[0].triggerToolbar(); }, 50);
            // Abort the first request
            return false;
        }
        // Subsequent runs are always allowed
        return true;
    },
    url: 'Url/to/your/action',
    datatype: 'json',
    mtype: 'POST',
    pager: '#deals-pager',
    rowNum: 15,
    sortname: 'Status',
    sortorder: 'desc',
    viewrecords: true,
    height: '100%'
}).jqGrid('filterToolbar', { stringResult: true });

これは、localデータ型をサポートしないLib.Web.Mvcライブラリ（.NET）でも機能します。

複数のグリッドがある場合、またはbeforeRequestロジックをライブラリに移動して共有する場合は、スタンドアロン関数として定義し、グリッド設定で名前で参照します。

function jqGridFilterSetupRequestHandler = function () {
    var $requestGrid = $(this);
    if ($requestGrid.data('areFiltersDefaulted') !== true) {
        $requestGrid.data('areFiltersDefaulted', true);
        setTimeout(function () { $requestGrid[0].triggerToolbar(); }, 50);
        return false;
    }
    return true;
}

$('#deals').jqGrid({
    colNames: ['...','Status','...'],
    colModel: [
        { ... },
        // Use the defaultValue attribute to set your defaults in the searchOptions object
        { name: 'Status', stype: 'select', searchoptions: { defaultValue: 'Active', value: {"":"All","Active":"Active","Closed":"Closed",}, sopt: [ 'eq'] }, width: 60 },
        { ... }
    ],
    beforeRequest: jqGridFilterSetupRequestHandler,
    url: 'Url/to/your/action',
    datatype: 'json',
    mtype: 'POST',
    pager: '#deals-pager',
    rowNum: 15,
    sortname: 'Status',
    sortorder: 'desc',
    viewrecords: true,
    height: '100%'
}).jqGrid('filterToolbar', { stringResult: true });
0
Cᴏʀʏ