0

カスタム選択フォーマッターを備えた JqGrid があります。選択を変更すると、変更がグローバル var globalGridChanges に保存されます。globalGridChanges は保存のために送信されます。私たちはjsonデータ型に取り組んでおり、サーバー側の投稿はありません。

jQuery("#jQGrid").jqGrid({
    datatype: "jsonstring",
    datastr: Data,
    height: 400,
    scroll: 0,
    rowNum: 18,
    rowList: [100, 120, 140, 150],
    colNames: ['id', 'Issue Name', 'Indicator']

colModel: [ { name: 'id', index: 'id', hidden: true }, 
    { name: 'SIN', index: 'SIN', width: 200, sortable: true }, 
    {name: 'DI', index: 'DI', width: 125, fixed: true, title: false, formatter: BuildDI }],ignoreCase: true });


// Fortmatter Function 
function BuildDI(cellvalue, options, rowObject) {
    var s = '<select  class="DI" idAttr="+options["rowId"]+" width="100%"><option value=""></option>' <option value="1">A</option>'<option value="2">B</option></select>';
    return s;
    }


// Biding event to class DI

jQuery(document).on("change", ".DI", function () {
    UpSaveData(this);
});


var globalGridChanges= Enumerable.Empty().ToDictionary();

function UpSaveData(obj) {
value = new oData();
id=obj.idAttr;
value.DI=obj.val();
globalGridChanges.Add(id, value);
}

これは問題なく機能しています。jQGrid にカスタム検索 (Excel のようなフィルター) を実装する必要があります。このための HeaderSeach 関数を作成する予定です。サンプル コードが提供されています。

jQuery.extend({ HeaderSeach: function (_this) {
    var $grid = _this;
    var col = $grid.getGridParam('colModel');
    var cn = $grid.getGridParam('colNames');
    var colL = col.length;
    var gridP = ''
    var gridId =jQuery(_this).attr('id');
    jQuery(col).each(function (x) {
        var c = this;
        //gridP = $grid.jqGrid('getGridParam', c['name'])
        if (!(c.hidden) && !(c['name'] == 'subgrid')) {
            $grid.jqGrid('setLabel', c['name'], createSearchSpan(cn[x], c['name'], gridId));

        }
    });

}
});

私たちの createSearchSpan は、ボタン、オプション、検索イベント ビディングを含む DIV を作成しています。これは、Windows Excel フィルターと非常によく似ています。

上記のアプローチでは、データの変更を別の変数 globalGridChanges に維持しており、グリッド データ (.p) は変更されません。検索は変更されたデータを考慮せず、最初に jqGrid にロードされたデータに対して機能します。マージ アプローチ (jqgrid データ + globalGridChanges) を使用できますが、これはこのアプローチに固有のものです。

これを解決するために、JqGrid インライン編集の場合のように、カスタム フォーマッタによっても JqGrid データを更新しようとしています。UpSaveData 関数で JqGrid データを更新することを回避しようとしています。

4

2 に答える 2

1

jqGridには「filterToolbar」があり、カスタムコンポーネントを作成する必要はないと思います。こことここの例を参照し てください。あなたの場合、次のようになります

jQuery("#jQGrid").jqGrid('filterToolbar', {
        searchOnEnter: true,
        searchOperators: true,
        multipleSearch: true,
        stringResult: true,
        groupOps: [{ op: "AND", text: "all" }, { op: "OR", text: "any" }],
        defaultSearch: 'cn', ignoreCase: true
    });

このような列に search: true を追加することを忘れないでください

colModel: [ { name: 'id', index: 'id', hidden: true }, 
    { name: 'SIN', index: 'SIN', width: 200, sortable: true, search: true }, 
    {name: 'DI', index: 'DI', width: 125, fixed: true, title: false,search: true, formatter: BuildDI        }],ignoreCase: true });

それが役に立てば幸い。

于 2014-02-18T16:13:29.137 に答える