0

我们有一个带有自定义选择格式化程序的 JqGrid。在选择更改时，我们将更改保存到全局变量 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 过滤器非常相似。

在上述方法中，我们将数据更改为单独的变量 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 回答
0

Formatter 应该单独用于显示格式和编辑目的，我们还应该使用 JqGrid 编辑选项。这解决了我们的问题。

于 2014-02-20T10:02:54.517 回答