Чтобы обновить данные JqGrid с помощью специального форматирования, как и в случае встроенного редактирования JqGrid

Question

У нас есть JqGrid с Custom Select Formatter. При изменении выбора мы сохраняем изменения в глобальном 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); 
} 

Это прекрасно работает, теперь нам нужно реализовать пользовательский поиск (Excel Like Filter) на jQGrid. Мы планируем создать для этого функцию 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, имеющий кнопки, опции, выжидать поиск событий, которые очень simlar в фильтр окна Excel.

В приведенном выше подходе мы являемся основными данными. Изменения в отдельной переменной globalGridChanges и данные сетки (.p) остаются неизменными. Наш поиск не будет рассматривать измененные данные и будет работать с данными, загружаемыми в jqGrid. Мы можем использовать метод слияния (jqgrid data + globalGridChanges), но это будет специфично для этого подхода.

Для решения этого вопроса мы также хотим обновить данные JqGrid пользовательским форматированием, как в случае встроенного редактирования JqGrid. Попытка избежать обновления данных JqGrid в функции UpSaveData.

Answer 1

Только форматер должен использоваться для форматирования отображения для целей редактирования и для редактирования, мы также должны использовать редактирование JqGrid. Это решило нашу проблему.

Answer 2

Я думаю, что для этого не нужно создавать настраиваемый компонент, 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 
    }); 

И не забудьте добавить поиск: правда столбцов, как это

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

Надеется, что это помогает.