Question

我们有一个带有Custom Select Formatter的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 Like Filter）。我们计划为此创建一个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 Filter非常相似。

在上述方法中，我们维护数据更改为单独的变量globalGridChanges和网格数据（.p）保持不变。我们的搜索不会考虑更改的数据，并且会将数据加载到jqGrid中。我们可以使用合并方法（jqgrid data + globalGridChanges），但这将特定于这种方法。

为了解决这个问题，我们还希望通过自定义格式化程序更新JqGrid数据，就像JqGrid内联编辑一样。试图避免在UpSaveData函数中更新JqGrid数据。

Answer 1

我认为没有必要为此制作自定义组件，jqGrid有“filterToolbar”。请参阅exmaples here和here 在你的情况下它应该看起来像这样

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 });

希望它有所帮助。

Answer 2

单独使用Formatter进行显示格式化以及编辑时我们也应该使用JqGrid editoptions。这解决了我们的问题。

通过自定义格式化程序更新JqGrid数据，就像JqGrid内联编辑一样

2 个答案: