Question

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

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

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

＆＃13;

	$("#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

＆＃13;

enter image description here 任何人都可以帮助我吗？

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使用上述代码。它以相同的格式使用本地输入数据。日期将以所需格式显示，但编辑后的数据将以与原始日期相同的格式保存在本地。

无法设置日期格式＆amp; jqGrid中的下拉文本

1 个答案: