dataUrl（editoptions用于选择）是不工作/将数据填充到DROPDOWNLIST中的jqGrid

Question

我使用的jqGrid和代码如下

$("#jqGridDel").jqGrid({ 
      url: "Data.aspx/BindInfo", 
      datatype: 'json', 
      mtype: 'POST', 
      serializeGridData: function (postData) { 
       return JSON.stringify(postData); 
      }, 
      ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }, 
      ajaxSelectOptions: { type: 'POST', 
       contentType: 'application/json; charset=utf-8', 
       success: function (result) { 
        alert("hello"); 
       } 
      },, 
      colName: ['DelId', 'Name', 'DeliveryName', 'Status'], 
      colModel: [ 
       { 
        label: 'Del No', 
        name: 'DelId', 
        width: 35 
       }, 
       { 
        label: 'Gate', 
        name: 'Name', 
        width: 200, 
        editable: true, 
        edittype: "select", 
        foramtter: "Select", 
        editoptions: { 
         dataUrl: "Data.aspx/BindDDInfo", 
         buildSelect: function (data) 
         { 
          alert(data); 
         } 
        } 
       }, 
       { 
        label: 'Delivery', 
        name: 'DeliveryName', 
        width: 150, 
        editable: true 
       }, 
       { 
        label: 'Active', 
        name: 'Status', 
        width: 40, 
        editable: true, 
        align: "center", 
        formatter: "checkbox", 
        edittype: "checkbox", 
        editoptions: { value: '1:0' } 
       } 
      ], 
      loadonce: true, 
      width: 1050, 
      height: "100%", 
      pager: "#jqGridDelPager", 
      caption: "Configuration", 
      rowNum: 15, 
          jsonReader: { 
           page: function (obj) { return 1; }, 
           total: function (obj) { return 1; }, 
           records: function (obj) { return obj.d.length; }, 
           root: function (obj) { return obj.d; }, 
           repeatitems: false, 
           id: "QGDelId" 
          }, 
      onSelectRow: function (id) { 
       if (id && id !== lastSelQGDel) { 
        lastSelQGDel = id; 
       } 

      }, 
      ajaxRowOptions: { contentType: 'application/json; charset=utf-8' }, 
      serializeRowData: function (postData) { 
       return JSON.stringify({ editQGData: postData }); 
      }, 
      editurl: "Data.aspx/SaveData" 
     }); 

     $('#jqGridDel').navGrid("#jqGridDelPager", { edit: false, add: false, del: false, refresh: false, search: false, view: false }); 
     $('#jqGridDel').inlineNav('#jqGridDelPager', 
     // the buttons to appear on the toolbar of the grid 
      { 
      edit: true, 
      add: true, 
      del: true, 
      refresh: true, 
      cancel: true, 
      editParams: { 
       keys: true, 
       rowid: lastSelQGDel, 
       restoreAfterError: true, 
       reloadAfterSubmit: true, 
       successfunc: function (result) { 
        if (result.responseJSON.d == "Success") 
         alert("Data saved successfully!!"); 
        else 
         alert("There is some error in data processing"); 
        setTimeout(function() { 
         $("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); 
        }, 50); 
       } 
      }, 
      addParams: { 
       keys: true, 
       addRowParams: { 
        successfunc: function (result) { 
         if (result.responseJSON.d == "Success") 
          alert("Data saved successfully!!"); 
         else 
          alert("There is some error in data processing"); 
         setTimeout(function() { 
          $("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); 
         }, 50); 
        } 
       } 
      } 

使用以下参考文件..

<script src=”Scripts/jquery-1.11.0.min.js” type=”text/javascript”></script> 
<script src=”Scripts/grid.locale-en.js” type=”text/javascript”></script> 
<script src=”Scripts/jquery.jqGrid.min.js” type=”text/javascript”></script> 
<script src=”Scripts/jquery-ui.min.js” type=”text/javascript”></script> 

I”能够加载数据并将其从JQGRID保存到SQL数据库，反之亦然。 但是，选择选项（列：门）没有加载任何数据..我试图调试代码，并了解dataUrl在编辑行时通过inline-nav不会触发。

函数BindDDInfo（返回类型为'string'并提到了Webmethod和static）后面的代码返回<Select><Option>……</Option></Select>格式的字符串。

<select> 
<option value='1'>Text1</option> 
<option value='2'>Test2</option> 
<option value='3'>Test3</option> 
<option value='4'>TEst5</option> 
<option value='5'>TEst6</option> 
<option value='6'>Test7</option> 
<option value='7'>Test8</option> 
<option value='8'>Test9</option> 
</select> 

通过F12（在IE9），检查可以看到响应头如下

Response   HTTP/1.1 200 OK 
Server   ASP.NET Development Server/10.0.0.0 
Date    Wed, 24 Feb 2016 15:07:16 GMT 
X-AspNet-Version 4.0.30319 
Cache-Control no-cache, no-store 
Pragma   no-cache 
Expires   -1 
Content-Type  text/html; charset=utf-8 
Content-Length 69186 
Connection  Close 

响应主体返回data.aspx HTML页面和不知道哪里出了问题。

然后，我已经添加了HTTP处理程序在web.config文件

 <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> 

现在，dataUrl是打的WebMethod BindDdInfo和警报（“你好”），弹出（这是从ajaxSelectOptions），但它不是将在build选项中进行编辑选项。

的下面返回为responsebody { “d”： “\ u003cselect \ u003e \ u003coption值= \ u00271 \ u0027 \ u003eTest1 \ u003c /选项\ u003e \ u003c /选择\ u003e”}

---

的建议后，得到BindDDInfo JSON数据，我如下修改后的代码，

我已经改变了我的webmethod返回List<Dictionary<string, object>>和下面的代码

ajaxSelectOptions: { type: ‘POST’, 
contentType: ‘application/json; charset=utf-8’, 
datatype: ‘json’, 
success: function (result) { 
alert(JSON.stringify(result)); 
} 
} 

警报正显示出如下

{“d”:[{“ID”:1,”Name”:”Test1″},{“ID”:2,”Name”:”Test2″}]} 

但是，buildSelect没有击中，

dataUrl: “Data.aspx/BindDDInfo”, 
buildSelect: function (response) { 
var data = typeof response === “string” ? JSON.stringify(response) :  response, 
s = “<select>”; 
s += ‘<option value=”0″>–Select–</option>’; 
$.each(data, function() { 
s += ‘<option value=”‘ + this.ID + ‘”>’ + this.Name + ‘</option>’; 
}); 
return s + “</select>”; 
} 

试图buildSelect的执行console.log（响应）和警报（反应），但它并没有给任何弹出。

任何人都可以帮助我将数据从数据库中获取到JQGRID的下拉列表中。

Answer 1

您的主要问题接缝“dataUrl未在通过inlineNav编辑行时触发”。我在代码中看到很多可以改进的小东西。我想主要的问题是Name（Gate列）中的输入错误。您应该使用的

formatter: "select" 

代替

foramtter: "Select" 

（两个错误：formatter应该用来代替foramtter和​​代替"Select"）。

此外，我会建议你其他的一些小技巧：

• 删除<div id="jqGridDelPager"></div>从网页的HTML标记和使用pager: true代替pager: "#jqGridDelPager"。您可以跳过navGrid和inlineNav"#jqGridDelPager"参数。免费jqGrid自动为寻呼机创建了div，navGrid和inlineNav将使用寻呼机。
• 您使用中的所有列label财产和其他textes为colName。该选项的正确名称是colNames而不是colName。您可以将文本从label移动到colNames阵列或移除不需要的colName阵列。
• inlineNav免费的jqGrid方法自动创建导航栏它不存在。因此您可以删除不需要的navGrid。
• 您不需要使用ajaxSelectOptions: { cache: false, type: 'POST' }。您可以改用ajaxSelectOptions: { type: 'POST' }。
• ，如果你想，在该行的第二次点击不能取消选择它
• 您可以使用forceClientSorting: true选项强制数据的排序，从客户端大小的服务器返回的您可以使用singleSelectClickMode: "selectonly"。您只需添加例如sortname: "Name"选项，通知jqGrid应该按哪个列排序数据。
• 的jsonReader的值可减小到jsonReader: {root: "d", repeatitems: false, id: "QGDelId"}。设置id: "QGDelId"意味着每个数据项都包含具有唯一值的QGDelId属性，这应该用作rowid，这一点很重要。
• 我不明白的onSelectRow您使用的意义和lastSelQGDel变量的目标。我建议你删除collback。
• 免费jqGrid提供了更加舒适的方式来指定底层方法的选项。例如，jqGrid的inlineEditing选项允许指定内联编辑方法使用的常用选项。您正确的代码，例如，在addParams.addRowParams和editParams中指定相同的选项（请参阅inlineNav的选项）。顺便说一下，key: true里面addParams而不是addParams.addRowParams的位置是错误的。指定jqGrid的inlineEditing选项中的通用选项要好得多。有关更多信息，请参阅the wiki article。
• 我建议你使用的

$("#jqGridDel").trigger('reloadGrid', [{fromServer: true}]); 

代替

$("#jqGridDel").jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');