jqgrid - 在 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

});

加载网格时，数据库返回“Miles”的值，但我不想显示它。我只想显示 0，当我编辑英里值时，它应该映射到我的对象中的英里。请让我知道我怎样才能做到这一点？谢谢..

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如下，放上你自己的post url。

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

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