簡體   English   中英

通過AJAX進行JQGRID內聯下拉綁定

[英]JQGRID inline dropdown binding via AJAX

在此處輸入圖片說明 jQuery(document).ready(function () {

var grid = $("#list");

    var AllCategory={"1":"Computing","2":"Cooking","10":"Fiction","3":"Finance","6":"Language","4":"Medical","11":"News","8":"Philosophy","9":"Religion","7":"Sport","5":"Travel"};


    grid.jqGrid({
        url: '/SupplierOrder/Select_SupplierOrderDetailByX/',
        editurl: "clientArray",
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Category', 'Qty'],
        colModel: [
                      {
                          name: 'Category', index: 'CategoryID', align: 'left', editable: true, edittype: "select", formatter: 'select',
                          editoptions: { value: AllCategory }, editrules: { required: true }
                      },
                      { name: 'Qty', index: 'Qty', width: 40, align: 'left', editable: true, edittype: "text", editoptions: { size: "35", maxlength: "50"} }
                 ],
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: '',
        sortorder: '',
        viewrecords: true,
        autowidth: true,
        autoheight: true,
        imgpath: '/scripts/themes/black-tie/images',
        caption: 'Supplier Order Detail'
    })
    grid.jqGrid('navGrid', '#pager', { edit: false, add: false, del: true, refresh: false, search: false }, {}, {}, {}, {});
    grid.jqGrid('inlineNav', '#pager', {
        addtext: "Add",
        edittext: "Edit",
        savetext: "Save",
        canceltext: "Cancel"
    });

}); 

這是我的JQGrid。

然后,我刪除下面的代碼...

var AllCategory={"1":"Computing","2":"Cooking","10":"Fiction","3":"Finance","6":"Language","4":"Medical","11":"News","8":"Philosophy","9":"Religion","7":"Sport","5":"Travel"};

替換為以下代碼,以便我可以獲取動態數據...

var AllCategory = (function () {
var list = null;

$.ajax({
async: false,
global: false,
type: "POST",
url: 'Category_Lookup',
dataType: 'json',
data: {},
success: function (response, textStatus, jqXHR) {
    list = response;
},
error: function (jqXHR, textStatus, errorThrown) {
    alert("jqXHR.responseText --> " + jqXHR.responseText + "\njqXHR --> " + jqXHR + "\ntextStatus --> " + textStatus + " \nerrorThrown --> " + errorThrown);
}
});
alert(list);

return list;
})();

首先,我得到以下消息框...

在此處輸入圖片說明

然后我得到錯誤

在此處輸入圖片說明

有人可以告訴我如何使其正確嗎? 每個建議將不勝感激。

格式錯誤。 它應該是:

<select><option value=“1”>One</option> <option value=“2”>Two</option></select>

檢查http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config(dataUrl )。

這是一個工作示例。 該信息從數據庫中獲取,然后在相應的Controller操作中格式化。

<th role="columnheader" class="ui-state-default ui-th-column ui-th-ltr">
 <div style="width:100%;position:relative;height:100%;padding-right:0.3em;">
  <select name="TypeCode" id="gs_TypeCode" style="width: 100%; ">
   <option></option>
   <option value="1">cosas!</option>
   <option value="2">mascosas</option>
   <option value="3">yast</option>
   <option value="4">tiparraco</option>
  </select>
 </div>
</th>

對不起,格式糟糕,但我無法發布圖片...希望對您有所幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM