将列设置为在JqGrid中显示0

Question

我有一个jqGrid。 我的功能是 -

$("#grid").jqGrid({ 
     url: "/Log/GetLogs", 
    datatype: 'json', 
    mtype: 'Get', 
    colNames: ['LogID', 'Agency Billing Code', 'License Number', 'Equipement Number', 'Year', 'Make', 'Model', 'Color', 'Begin Miles', 'End Miles'], 
    colModel: [ 
     { key: true, hidden: true, name: 'ID', index: 'ID' }, 
          { key: false, name: 'Year', index: 'Year', editable: false }, 
     { key: false, name: 'Make', index: 'Make', editable: false }, 
     { key: false, name: 'Model', index: 'Model', editable: false }, 
     { key: false, name: 'Color', index: 'Color', editable: false }, 
       { key: false, name: 'Miles', index: 'Miles', editable: true, cellvalue: "" }, 
    ], 
     pager: jQuery('#pager'), 
    rowNum: 10, 
    rowList: [10, 20, 30, 40], 
    height: '100%', 
    viewrecords: true, 
    caption: 'Log List', 
    emptyrecords: 'No Records', 
    jsonReader: { 
     root: "rows", 
     page: "page", 
     total: "total", 
     records: "records", 
     repeatitems: false, 
     id: "0" 
    }, 
    autowidth: true, 
    multiselect: false 

}); 

当电网负载，数据库正在恢复“万里”的价值，但我不想证明。我只想显示0，并且当我编辑里程值时，它应该映射到我的对象中的Miles。 请让我知道我该怎么做到这一点？ 谢谢..

Answer 1

为了完成你所需要的，你需要有一个格式化器和非格式化的英里列。您尚未指定如何编辑网格行（内联，表单编辑，自定义...等），但我创建了内联编辑作为示例。

这是jsfiddle的完整解决方案，如果你想玩它。只需单击该行即可进行编辑，在编辑时，英里将显示其原始值，但在非编辑模式下显示为0。有关如何工作的格式见 Here

var mileformatter= function (cellval, options, rowObject) { 
    return "<span data-val='"+cellval+"'>0</span>"; 
    } 

    var mileUnFormat= function (cellvalue, options, cell) { 
      return $('span', cell).attr('data-val'); 
    } 
      "use strict"; 
      var mydata = [ 
        {ID:"1", Year: "1933", Make: "Nissan",Model:"Model1", Color: "White",Miles:1222}, 
        {ID:"2", Year: "2008", Make: "Toyota",Model:"Model2" , Color: "Gray",Miles:3000}, 
       ]; 
      $("#list").jqGrid({ 
     data: mydata, 
    datatype: "local", 
    mtype: 'Get', 
    colModel: [ 
     { key: true, hidden: true, name: 'ID', index: 'ID' }, 
     { key: false, name: 'Year', index: 'Year', editable: false }, 
     { key: false, name: 'Make', index: 'Make', editable: false }, 
     { key: false, name: 'Model', index: 'Model', editable: false }, 
     { key: false, name: 'Color', index: 'Color', editable: false }, 
     { key: false, formatter:mileformatter,unformat:mileUnFormat, name: 'Miles', index: 'Miles', editable: true, cellvalue: "" }, 
    ], 
     pager: jQuery('#pager'), 
    rowNum: 10, 
    rowList: [10, 20, 30, 40], 
    height: '100%', 
    viewrecords: true, 
    caption: 'Log List', 
    emptyrecords: 'No Records', 
    jsonReader: { 
     root: "rows", 
     page: "page", 
     total: "total", 
     records: "records", 
     repeatitems: false, 
     id: "0" 
    }, 
    autowidth: true, 
    multiselect: false, 
    onSelectRow: function (id) { 

      jQuery('#list').editRow(id, true); 
      } 


}); 

更多的细节这里是你在找什么的编辑答案和新jsfiddle链接与注意，我删除了unformatter也加入beforeSaveRow功能的发挥。

var onEdit=false; 

var mileformatter= function (cellval, options, rowObject) { 
if(onEdit==true) 
{ 
return cellval; 
onEdit=false; 
} 
    return 0; 
    } 

      "use strict"; 
      var mydata = [ 
        {ID:"1", Year: "1933", Make: "Nissan",Model:"Model1", Color: "White",Miles:1222}, 
        {ID:"2", Year: "2008", Make: "Toyota",Model:"Model2" , Color: "Gray",Miles:3000}, 
       ]; 
      $("#list").jqGrid({ 
     data: mydata, 
    datatype: "local", 
    mtype: 'Get', 
    colModel: [ 
     { key: true, hidden: true, name: 'ID', index: 'ID' }, 
     { key: false, name: 'Year', index: 'Year', editable: false }, 
     { key: false, name: 'Make', index: 'Make', editable: false }, 
     { key: false, name: 'Model', index: 'Model', editable: false }, 
     { key: false, name: 'Color', index: 'Color', editable: false }, 
     { key: false, formatter:mileformatter, name: 'Miles', index: 'Miles', editable: true, cellvalue: "" }, 
    ], 
     pager: jQuery('#pager'), 
    rowNum: 10, 
    rowList: [10, 20, 30, 40], 
    height: '100%', 
    viewrecords: true, 
    caption: 'Log List', 
    emptyrecords: 'No Records', 
    jsonReader: { 
     root: "rows", 
     page: "page", 
     total: "total", 
     records: "records", 
     repeatitems: false, 
     id: "0" 
    }, 
    autowidth: true, 
    multiselect: false, 
    onSelectRow: function (id) { 

      jQuery('#list').editRow(id, 
      { 
       "keys": true,   
       oneditfunc: function() { 

       }, 

       "successfunc": function() { 
       alert('successfunc'); 
       }, 
       "url": null, 
       "extraparam": {}, 
       "aftersavefunc": function() { 
       alert('aftersavefunc'); 
       }, 
       "errorfunc": null, 
       "afterrestorefunc": null, 
       "restoreAfterError": true, 
       "beforeSaveRow": function (options, rowid) { 
       onEdit=true; 
       jQuery("#list").saveRow(id, false); 

        return false; 

       } 
       }); 

     } 


}); 

您可以自定义SaveRow，如下所示，并把自己的文章URL。

saveparameters = { 
     "successfunc" : null, 
     "url" : "yoururl", 
      "extraparam" : {}, 
     "aftersavefunc" : null, 
     "errorfunc": null, 
     "afterrestorefunc" : null, 
     "restoreAfterError" : true, 
     "mtype" : "POST" 
    } 

    jQuery("#grid_id").jqGrid('saveRow',rowid, saveparameters);