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，当我编辑里程值时，它应该映射到我对象中的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链接。请注意，我删除了非格式化程序并添加了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，并将您自己的帖子设为。

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

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

将列设置为在JqGrid中显示0

1 个答案: