2014-02-12 32 views
0

我们有一个带有自定义选择格式化程序的JqGrid。关于select的更改,我们将更改保存到全局变量globalGridChanges中。 globalGridChanges被发送保存。我们正在研究json数据类型,没有服务器端发布。也可以通过自定义格式化程序更新JqGrid数据,例如JqGrid内联编辑

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创造有按钮,选项,搜索事件招标,这是非常simlar到Windows版Excel筛选核实。

在上面的方法中,我们正在维护数据更改为单独变量globalGridChanges和网格数据(.p)保持不变。 我们的搜索将不会考虑更改的数据,并将在jqGrid中逐步加载数据。我们可以使用合并方法(jqgrid数据+ globalGridChanges),但这将是特定于此方法的。

为了解决这个问题,我们正在寻找通过自定义格式化程序来更新JqGrid数据,例如JqGrid内联编辑。试图避免更新UpSaveData函数中的JqGrid数据。

回答

0

格式器本身应该用于显示格式化和用于编辑目的,我们也应该使用JqGrid editoptions。这解决了我们的问题。

1

我认为没有必要为此自定义组件,jqGrid有“filterToolbar”。见exmaples herehere 你的情况,它应该看起来像这样

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

而且不要忘了添加搜索:真正到了列这样

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

希望它能帮助。

+0

Tomcat感谢您的时间,filterToolbar没有全面满足我们的UI要求,因此我们编写了一个它的工作。我们的问题不是过滤我们的问题;如何通过自定义格式化程序更新JqGrid数据,例如JqGrid内联编辑。现在我意识到只有Formatter应该用于显示格式化和用于编辑目的,我们也应该使用JqGrid editoptions。这解决了我们的问题。 – Anil