jqGrid 中的 dataUrl 每次调用

Question

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

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

我观察到两件事我不明白。

为什么下拉框的宽度大于列宽。我想根据列固定它的宽度。如果列的大小增加，下拉菜单的宽度也应该增加。

请看下面的截图

2. 每当我单击网格行进行编辑时，它都会调用 Web 服务，我不明白为什么每次当特定列的每一行的数据都是固定的时候它都会调用。

任何人都可以在这两个主题上指导我吗？

Answer 1

your first question

为什么下拉框的宽度大于列宽。我想根据列固定它的宽度。如果列的大小增加，下拉菜单的宽度也应该增加。

由于选项列表的原因，下拉菜单的宽度更大。选项的文本部分太宽，无法显示在 TaxCode 列下。您可以执行以下任一操作：-

1)-增加 TaxCode 列宽度。

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

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

您根据下拉菜单更改 TaxCode 列宽 width.Then 它会解决您的这个问题 "If size of the column get increased, width of dropdown should also increase."

your second question

每当我单击网格行进行编辑时，它都会调用 Web 服务，我不明白为什么每次当特定列的每一行的数据都是固定的时候它都会调用。

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

One more

下拉列表的宽度高于列

减小数量列的宽度，就像您将对 TaxCode 列所做的那样。

希望对您有所帮助！

jqGrid 中的 dataUrl 每次调用

dataUrl in jqGrid calls every time

jquery

jqgrid