无法在 jqGrid 中设置日期格式和下拉文本

Question

我正在使用 jqGrid 来显示数据。数据采用 xml 格式。我无法格式化日期列（源格式：yyyyMMdd，目标格式：dd-mm-yyy）。我的网格无法显示来自 select 的文本值，它显示的是值而不是文本。

奇怪的是它在其他屏幕上工作。

    <SalesOpportunitiesLines>
        <row>
            <LineNum>0</LineNum>
            <SalesPerson>1</SalesPerson>
            <StartDate>20131126</StartDate>
            <ClosingDate>20131126</ClosingDate>
            <StageKey>1</StageKey>
            <PercentageRate>0.000000</PercentageRate>
            <MaxLocalTotal>1000000.000000</MaxLocalTotal>
            <DocumentType>bodt_MinusOne</DocumentType>
            <BPChanelName>ACCM Services</BPChanelName>
            <BPChanelCode>CLINAC0709</BPChanelCode>
            <SequenceNo>366</SequenceNo>
            <DataOwnershipfield>1</DataOwnershipfield>
            <BPChannelContact>1212</BPChannelContact>
        </row>
    </SalesOpportunities>

 $("#uxStages").jqGrid({
   datatype: 'xmlstring',
   datastr: xmlstring,
   mtype: 'GET',
   ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
   xmlReader: { repeatitems: false, root: "BO>SalesOpportunitiesLines", row: 'row' },
   colNames: ['LineNum', 'Star tDate', 'Clos Date', 'Sales Employee', 'Stage', 'Percentage', 'Potential Amount', 'Document Type', 'Doc. No.', 'Owner'],
   colModel: [
    { name: 'LineNum', key: true, index: 'LineNum', hidden: true, sortable: false, width: 60 },
    { name: 'StartDate', key: false, index: 'StartDate', sortable: false, align: "left", width: 90,
     editable: true,
     formatter: 'date',
     formatoptions: { srcformat: 'yyyyMMdd', newformat: 'd-M-y' },
     editoptions: {
      dataInit: function (elem) {
       $(elem).datepicker({ dateFormat: 'dd-M-yy' });
      }

     }
    },
    { name: 'ClosingDate', key: false, index: 'ClosingDate', sortable: false, align: "left", width: 90,
     editable: true,
     formatter: 'date',
     formatoptions: { srcformat: 'yyyyMMdd', newformat: 'd-M-y' },
     editoptions: {
      dataInit: function (elem) {
       $(elem).datepicker({ dateFormat: 'dd-M-yy' });
      }
     }
    },
    { name: 'SalesPerson', key: false, index: 'SalesPerson', sortable: false, width: 80,
     editable: true,
     edittype: "select"
    },
    { name: 'StageKey', key: false, index: 'StageKey', hidden: false, sortable: false, width:80,
     editable: true,
     edittype: "select"
    },
    { name: 'PercentageRate', key: false, index: 'PercentageRate', sortable: false, width: 60 },
    { name: 'MaxLocalTotal', key: false, index: 'MaxLocalTotal', sortable: false, width: 100,
     editable: true,
     edittype: "text",
     formatter: 'currency',
     formatoptions: { thousandsSeparator: ',' }
    },
    { name: 'DocumentType', key: false, index: 'DocumentType', sortable: false, width: 90,
     editable: true,
     edittype: 'select',
     formatter: 'select',
     editoptions: { value: "bodt_MinusOne:;bodt_Quotation:Sales Quotations;bodt_Order:Sales Orders;bodt_DeliveryNote:Deliveries;bodt_Invoice:A/R Invoice" }
    },
    { name: 'DocumentNumber', key: false, index: 'DocumentNumber', sortable: false, width: 40 },
    { name: 'DataOwnershipfield', key: false, index: 'DataOwnershipfield', hidden: false, sortable: false, width: 60,
     editable: true,
     edittype: "select"
    }
   ],
   rowNum: 100,
   viewrecords: true,
   gridview: true,
   rownumbers: true,
   height: 150,
   loadonce: true,
   width: 1120,
   scrollOffset: 0,
   ondblClickRow: function (rowid) {
    var grid = $("#uxStages");
    var selectedRowId = grid.jqGrid('getGridParam', 'selrow');
    lastSelection = selectedRowId;
    grid.jqGrid('editRow', selectedRowId, true, null, null, null, null, OnSuccessEdit_Stages);
    $('#' + selectedRowId + "_StageKey").css('width', '100%');
    $('#' + selectedRowId + "_SalesPerson").css('width', '100%');
    $('#' + selectedRowId + "_DataOwnershipfield").css('width', '100%');
   },
   loadComplete: function () {
    var ids = $("#uxStages").jqGrid('getDataIDs');
    for (var i = 0; i < ids.length; i++) {
     var id = ids[i];
     if (i < ids.length - 1) {
      $('#' + $.jgrid.jqID(id)).addClass('not-editable-row');
      $('#' + $.jgrid.jqID(id)).addClass('ui-state-error');
     }
    }
   },
   onSelectRow: function (id) {
    if (id && id !== lastSelection) {
     var grid = $("#uxStages");
     $('#uxStages').saveRow(lastSelection);
    }
   }
  }).jqGrid('navGrid', { edit: true, edit: true, add: true, del: true, searchOnEnter: false, search: false }, {}, {}, {}, { multipleSearch: false }).trigger('reloadGrid');

  $("#uxStages").setColProp('SalesPerson', { edittype: "select", editoptions: { value: GetSalesValues()} }); //Here i m fetching values in namedvalue pairs
  $("#uxStages").setColProp('StageKey', { edittype: "select", editoptions: { value: GetStagesValues()} }); //Here i m fetching values in namedvalue pairs
  $("#uxStages").setColProp('DataOwnershipfield', { edittype: "select", editoptions: { value: GetDataOwnershipValues()} }); //Here i m fetching values in namedvalue pairs

有人可以帮我吗？

Answer 1

jqGrid 的预定义 formatter: "date" 不支持没有分隔符的输入字段。所以你必须使用custom formatter。实现可能类似于以下内容

formatter: function (cellValue, opts, rawdata, action) {
    if (action === "edit") {
        // input data have format "dd-mm-yy" format - "20-03-2015"
        var input = cellValue.split("-");
        if (input.length === 3) {
            return input[0] + "-" + input[1] + "-" + input[2];
        }
    } else if (cellValue.length === 8) {
        // input data have format "yymmdd" format - "20150320"
        var year = cellValue.substr(0,4), month = cellValue.substr(4,2),
            day = cellValue.substr(6,2);
        return day + "-" + month + "-" + year;
    }
    return cellValue; // for empty input for example
}

取决于其他选项（如 loadonce: true 的用法）并取决于您使用的 jqGrid 的确切版本，您可能需要在列中实现其他回调。例如，如果您使用 loadonce: true，则编辑数据将保存在本地。要以与输入数据相同的格式保存数据，可以使用免费 jqGrid 的 saveLocally 回调（参见 here）。在这种情况下，您可以在列中实现 saveLocally 回调，如下所示

saveLocally: function (options) {
    var input = String(options.newValue).split("-");
    options.newItem[options.cmName] = input.length === 3 ?
        input[2] + input[1] + input[0] :
        options.newValue;
}

参见the corresponding demo使用上面的代码。它使用相同格式的 local 输入数据。日期将以所需格式显示，但编辑后的数据将以与原始日期相同的格式保存在本地。

无法在 jqGrid 中设置日期格式和下拉文本

Unable to set date format & dropdown text in jqGrid

javascript

jquery

jqgrid