每次jqGrid调用dataUrl

Question

我正在使用jqGrid进行内联编辑。在一列中有下拉列表并从Web服务中提取数据。

$("#Freight").jqGrid({
		datatype: 'xmlstring',
		datastr: xmlString,
		mtype: 'GET',
		ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
		xmlReader: { repeatitems: false, root: "DocumentsAdditionalExpenses", row: 'row' },
		colNames: ['ExpenseCode', 'Feight Name', 'Remarks', 'Tax Code', 'Total Tax Amount', 'Distribution Method', 'Amount'],
		colModel: [
                    { name: 'ExpenseCode', index: 'ExpenseCode', hidden: true, key: true },
                    { name: 'FreightName', index: 'FreightName', width: 100 },
                    { name: 'Remarks', index: 'Remarks', editable: true, edittype: 'text', width: 150 },
                    { name: 'TaxCode', index: 'TaxCode', editable: true,
                    	width: 100,
                    	edittype: 'select',
                    	formatter: 'select',
                    	editoptions: { aysnc: false, dataUrl: clientURL,
                    		buildSelect: function (data) {
                    			var v = data.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
                    			response = $.parseXML(v);
                    			$response = $(response);
                    			var s = '<select>';
                    			$response.find('FreightExpense row').each(function (index) {
                    				var code = $(this).find('Code').text();
                    				var name = $(this).find('Name').text();
                    				s += '<option value="' + code + '">' + name + '</option>';
                    			});
                    			return s + "</select>";
                    		}
                    	},
                    	formoptions: { elmsuffix: ' *', label: 'Name' }
                    },
                    { name: 'TaxSum', index: 'TaxSum', width: 120 },
                    { name: 'DistributionMethod', index: 'DistributionMethod', editable: true,
                    	width: 150,
                    	edittype: "select",
                    	formatter: 'select',
                    	editoptions: {
                    		value: "aedm_Equally:Equally;aedm_None:None;aedm_Quantity:Quantity;aedm_RowTotal:RowTotal;aedm_Volume:Volume;aedm_Weight:Weight"
                    	}
                    },
                    { name: 'LineTotal', index: 'LineTotal', editable: true, edittype: 'text' }
               ],
		viewrecords: true,
		gridview: true,
		onSelectRow: function (id) {
			if (id && id !== lastSelection) {
				var grid = $("#Freight");
				grid.jqGrid('restoreRow', lastSelection);
				grid.jqGrid('editRow', id, true);
				lastSelection = id;
			}
		},
		height: 150,
		width: 650,
		viewrecords: true,
		gridview: true,
		rownumbers: true,
		loadonce: true,
		scrollOffset: 0
	});

我发现了两件我不理解的事情。

1. 为什么下拉列表的宽度大于列宽。我想根据列修复其宽度。如果列的大小增加，下拉的宽度也应该增加。

请参阅下面的截图

2.每当我点击网格行进行编辑它调用web服务时，我都不明白这一点，为什么每次为特定列的每一行修复数据时都会调用它。

任何机构都能指导我这两个主题吗？

Answer 1

  

你的第一个问题

为什么下拉列表的宽度大于列宽。我想根据列修复其宽度。如果列的大小增加，下拉的宽度也应该增加。

由于选项列表，下拉列表的宽度更大。选项的文本部分太宽，无法进入 TaxCode 列。您可以执行以下任一操作： -

1） - 增加 TaxCode 列宽。

  { name: 'TaxCode', index: 'TaxCode', editable: true,
                    width: 100,   //change this as per requirement

2） - 在选项列表中获取水平滚动（我不认为这是一个好主意，因为jqGrid为您提供了增加列宽的方法。）

您可以根据下拉宽度更改 TaxCode 列宽。然后它将解决您的问题“如果列的大小增加，下拉的宽度也应该增加。”

  

你的第二个问题

每当我点击网格行进行编辑它调用web服务时，我都不明白这一点，为什么每次修复该特定列的每一行数据时都会调用它。

这是因为您必须在jqGrid行点击事件上调用 WebService 。检查一次，如果是，那么将那段代码（我猜你是通过 Ajax 这样做）直接移到document-ready下（如果你想加载这个网格）。

  

再一次

下拉列表的宽度高于列

减少数量列的宽度，就像您将对 TaxCode 列一样。

希望有所帮助！