javascript - 在 jqGrid 内联编辑中获取选择的文本部分而不是值

Question

在我的 jqGrid 中有 4 个选择，其中两个工作正常，两个不工作。

问题:当我使用下面的代码片段时:

	var stagevalues = GetStagesValues();
		var salesvalues = GetSalesValues();
		var owners = GetDataOwnershipValues();
		xmlstring = Stages; //.XmlToString();
		$("#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 Date', 'Close Date', 'Sales Employee', 'Stage', 'Percentage', 'Potential Amount', 'Document Type', 'Doc. No.', 'Owner'],
			colModel: [
				{ name: 'LineNum', key: true, index: 'LineNum', hidden: false, sortable: false, width: 60 },
				{ name: 'StartDate', key: false, index: 'StartDate', sortable: false, align: "left", width: 90,
					editable: true,
					formatter: 'date',
					formatoptions: { srcformat: 'Ymd', newformat: 'd-M-y' },
					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
					},
					editoptions: {
						dataInit: function (elem) {
							$(elem).datepicker({ dateFormat: 'dd-M-y' });
						}
					}
				},
				{ name: 'ClosingDate', key: false, index: 'ClosingDate', sortable: false, align: "left", width: 90,
					editable: true,
					formatter: 'date',
					formatoptions: { srcformat: 'Ymd', newformat: 'd-m-Y' },
					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
					},
					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",
					unformat: function (cellValue, opts, rawdata, action) {
						$('#uxOwner').each(function () {
							$('option', this).each(function () {
								//								if (opts.rowId == 4)
								//									debugger;
								var code = $(this).val();
								var name = $(this).text();
								if (name == cellValue)
									return code;
							});
						});
					}
				}
			],
			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%');
				$('#' + selectedRowId + "_DocumentType").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) {
						$("#uxStages").jqGrid('editRow', id);
						$("#uxStages").setColProp('SalesPerson', { edittype: "select", editoptions: { value: salesvalues} }); //Here i m fetching values in namedvalue pairs
						$("#uxStages").setColProp('StageKey', { edittype: "select", editoptions: { value: stagevalues} }); //Here i m fetching values in namedvalue pairs
						$("#uxStages").setColProp('DataOwnershipfield', { edittype: "select", editoptions: { value: owners} }); //Here i m fetching values in namedvalue pairs
						$("#uxStages").saveRow(id);
					}
				}
				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');




function OnSuccessEdit_Stages(id, response, options) {

	var LineNum = $('#uxStages').jqGrid('getCell', id, 'LineNum');
	var StartDate = $('#uxStages').jqGrid('getCell', id, 'StartDate');
	var ClosingDate = $('#uxStages').jqGrid('getCell', id, 'ClosingDate');
	var SalesPerson = $('#uxStages').jqGrid('getCell', id, 'SalesPerson'); //getting text part of select and expected to get value
	var StageKey = $('#uxStages').jqGrid('getCell', id, 'StageKey'); //getting text part of select and expected to get value
	var PercentageRate = $('#uxStages').jqGrid('getCell', id, 'PercentageRate');
	var MaxLocalTotal = $('#uxStages').jqGrid('getCell', id, 'MaxLocalTotal');
	var DocumentType = $('#uxStages').jqGrid('getCell', id, 'DocumentType'); //getting value which is correct
	var DocumentNumber = $('#uxStages').jqGrid('getCell', id, 'DocumentNumber');
	var DataOwnershipfield = $('#uxStages').jqGrid('getCell', id, 'DataOwnershipfield'); //getting value which is correct

	$oppor.find('Response Data BOM BO SalesOpportunitiesLines row').each(function (index) {
		if ($(this).find('LineNum').text() == LineNum) {
			if (LineNum == 4)
			//			$(this).find('StartDate').text(StartDate);
			//			$(this).find('ClosingDate').text(ClosingDate);
				$(this).find('SalesPerson').text(SalesPerson);
			$(this).find('StageKey').text(StageKey);
			$(this).find('PercentageRate').text(PercentageRate);
			$(this).find('MaxLocalTotal').text(MaxLocalTotal);
			$(this).find('DocumentType').text(DocumentType);
			$(this).find('DocumentNumber').text(DocumentNumber);
			$(this).find('DataOwnershipfield').text(DataOwnershipfield);

		}
	});
	return true;
}

我在前 2 个选择中获取文本部分而不是值，而在最后 2 个选择中，它为我提供值而不是预期的文本。

我也使用 unformat 函数来获取值部分，但不起作用。

我希望有人向我指出这个问题，我不知道如何处理此类问题。

感谢期待。

Answer 1

问题的原因可能是 loadComplete 内的 for 循环中调用 editRow 和 setColProp 的顺序错误。如果您需要更改将在编辑期间使用的editoptions.value，则应在开始编辑之前使用它。因此，应在 editRow 之前调用 setColProp。

在调用 editRow 之后直接调用 saveRow 似乎我非常怀疑。您在创建网格之前设置salesvalues、stagevalues 和owners(请参阅行var salesvalues = GetSalesValues(); 等)。所以看来你可以使用

{ name: 'SalesPerson', width: 80, editable: true, edittype: "select", 
    editoptions: { value: salesvalues} }

直接在colModel中。 loadComplete 内部似乎不需要循环。