將列設置爲在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);