jQgrid下拉菜單不填充表格中的數據編輯

Question

所以我浪費了一整天的時間追蹤數據，但無法找到解決方案，因此張貼在這裏。 以下是我的js的代碼。

<script type="text/javascript"> 
jq(function() { 
     jq("#Grid").jqGrid({ 
      url:'/indyaah/crud.htm', 
      datatype: 'json', 
      mtype: 'GET', 
      colNames:['User Id','User Name','Book Id','Book Name'], 
      colModel:[ 
       {name:'userId',index:'userId', formatter: 'select', stype: 'select',edittype: 'select',editoptions:{value:Users()},editable:true, editrules:{required:true,edithidden:true},searchoptions:{sopt: ['eq','ne','le','ge']},hidden:true}, 
       {name:'userName',index:'userName', width:100,editable:false}, 
       {name:'bookId',index:'bookId', formatter: 'select', stype: 'select',edittype: 'select',editoptions:{value:Books()},editable:true, editrules:{required:true,edithidden:true},searchoptions:{sopt: ['eq','ne','le','ge']},hidden:true}, 
       {name:'BookName',index:'BookName', width:100}, 
       ], 
      postData: { 
      }, 
      rowNum:5, 
      altRows:true, 
      hiddengrid:true, 
      rowList:[5,10], 
      height: "100%", 
      autowidth: true, 
      rownumbers: true, 
      pager: '#pager', 
      sortname: 'userId', 
      viewrecords: true, 
      sortorder: "asc", 
      caption:"Details", 
      emptyrecords: "Empty records", 
      loadonce: false, 
      autowidth:true, 
      loadComplete: function() { 
      }, 
      jsonReader : { 
       root: "rows", 
       page: "page", 
       total: "total", 
       records: "records", 
       repeatitems: false, 
       cell: "cell", 
       id: "id" 
      } 
     }); 
     function Users() 
     { 
      jq.getJSON('/indyaah/readUsers.htm', function(data) { 
      var len = data.rows.length; 
      for (var i = 0; i < len; i++) { 
       if(i===0) html += '' + data.rows[i].userId + ' : \'' + data.rows[i].userName + '\',' ; 
       else if(i===len-1) html += data.rows[i].userId + ' : \'' + data.rows[i].userName + '\'' ; 
       else html += data.rows[i].userId + ' : \'' + data.rows[i].userName + '\',' ; 
      } 
      }); 
      return html; 
     } 
     function Books() 
     { 
      jq.getJSON('/indyaah/readBooks.htm', function(data) { 
      var len = data.rows.length; 
      for (var i = 0; i < len; i++) { 
       if(i===0) html += '{\'' + data.rows[i].bookId + '\':\'' + data.rows[i].name + '\',\n' ; 
       else if(i===len-1) html += '\''+ data.rows[i].bookId + '\':\'' + data.rows[i].name + '\'}' ; 
       else html += '\''+ data.rows[i].bookId + '\':\'' + data.rows[i].name + '\',\n' ; 
      } 
      }); 
      return html; 
     } 
     jq("#Grid").jqGrid('navGrid','#pager', 
       {edit:false,add:false,del:false,search:true}, 
       { }, 
       { }, 
       { }, 
       { 
        sopt:['eq', 'ne', 'le', 'ge', 'cn', 'bw', 'ew'], 
        closeOnEscape: true, 
         multipleSearch: true, 
         closeAfterSearch: true }, 
       {width:500} 
     );  
     jq("#Grid").navButtonAdd('#pager', 
       { caption:"Add", 
        buttonicon:"ui-icon-plus", 
        onClickButton: add, 
        position: "last", 
        title:"", 
        cursor: "pointer" 
       } 
     ); 

     jq("#Grid").navButtonAdd('#pager', 
       { caption:"Edit", 
        buttonicon:"ui-icon-pencil", 
        onClickButton: edit, 
        position: "last", 
        title:"", 
        cursor: "pointer" 
       } 
     ); 

     jq("#Grid").navButtonAdd('#pager', 
      { caption:"Delete", 
       buttonicon:"ui-icon-trash", 
       onClickButton: delete, 
       position: "last", 
       title:"", 
       cursor: "pointer" 
      } 
     ); 

     jq("#btnFilter").click(function(){ 
      jq("#Grid").jqGrid('searchGrid', 
        {multipleSearch: true, 
         sopt:['eq']} 
      ); 
     }); 


     jq("#Grid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true, defaultSearch:"cn"}); 

    }); 
</script> 

兩個Jsons具有以下格式（我已經表明只有3-4列，但分別有8和10），

{ 
page: 1 
records: 5 
rows: [ 
     0: {displayName:ABC, password:null, userName:123, userId:1,…} 
     1: {displayName:DEF, password:null, userName:456, userId:2,…} 
     2: {displayName:GHI, password:null, userName:789, userId:3,…} 
     3: {displayName:JKL, password:null, userName:234, userId:4,…} 
     4: {displayName:MNO, password:null, userName:548, userId:5,…} 
     5: {displayName:PQR, password:null, userName:968, userId:6,…} 
] 
} 

和

{ 
page: 1 
records: 5 
rows: [ 
     0: {displayName:ABC, bookName:123, bookId:1,…} 
     1: {displayName:DEF, bookName:456, bookId:2,…} 
     2: {displayName:GHI, bookName:789, bookId:3,…} 
     3: {displayName:JKL, bookName:234, bookId:4,…} 
     4: {displayName:MNO, bookName:548, bookId:5,…} 
     5: {displayName:PQR, bookName:968, bookId:6,…} 
] 
} 

我的編輯/添加表單看起來像 請注意，在編輯/添加中，我只使用服務器在Json中發送的一些值。

所以基本上問題是，網格加載完美，但只要我嘗試添加或編輯， 選擇框是空的。 當我在firebug中調試時，控制器發送數據，但它沒有加載到網格中。

那麼，我在這裏失蹤？

Answer 1

問題的原因很清楚，但解決方案並不容易，因爲從服務器加載的formatter: 'select'和editoptions.value的使用並不真正支持jqGrid。我試圖描述你的問題的起源，並描述解決方法。

第一個問題是$.getJSON工程異步。所以如果Users()或Books()將被調用undefined值將從函數返回。順便說一下，html變量在代碼中確實是未定義的。

我可以建議一些方法來解決您目前的問題。

您可以從列定義中刪除edittype: 'select', editoptions: {value: Users()}, editable: true和edittype: 'select' ,editoptions: {value: Books()}, editable: true。您可以設置內部success處理相應$.getJSON通話的設置：

jq("#Grid").jqGrid({ 
    ... 
}); 
jq.getJSON('/indyaah/readUsers.htm', function (data) { 
    var len = data.rows.length, i, html = '', item; 
    for (i = 0; i < len; i++) { 
     item = data.rows[i]; 
     if (i !== 0) { 
      html += ','; 
     } 
     html += item.userId + ":'" + item.userName + "'"; 
    } 
    jq("#Grid").jqGrid('setColProp', 'userId', { 
     edittype: 'select', 
     editoptions: {value: html}, 
     editable: true 
    }); 
}); 
jq.getJSON('/indyaah/readBooks.htm', function (data) { 
    ... 
    jq("#Grid").jqGrid('setColProp', 'bookId', { 
     edittype: 'select', 
     editoptions: {value: html}, 
     editable: true 
    }); 
}); 

在當添加或編輯表格將被打開的瞬間，爲editoptions.value正確的值將是已經在colModel和選擇應正確顯示。

您仍然會遇到的問題是使用formatter: 'select'，需要在填充柵格體之前填充editoptions.value。你寫道網格填寫正確。我認爲這意味着對'/indyaah/readUsers.htm'和'/indyaah/readBooks.htm'的請求在'/indyaah/crud.htm'之前由服務器回答。我覺得它很危險。

所以我建議你在jqGrid中使用第一個datatype: 'local'選項。它會阻止網格加載。您應該設置datatype: 'json'並在之後colModel的所有選擇（均選擇）加載後調用jq("#Grid").trigger("reloadGrid")。相應的實現很容易。例如：

var filledSelects = 0, 
    $grid = jq("#Grid"); 
    fillSelectWithData = function (data, colName, idProp, nameProp) { 
     var len = data.rows.length, i, html = '', item; 
     for (i = 0; i < len; i++) { 
      item = data.rows[i]; 
      if (i !== 0) { 
       html += ','; 
      } 
      html += item[idProp] + ":'" + item[nameProp] + "'"; 
     } 
     $grid.jqGrid('setColProp', colName, { 
      edittype: 'select', 
      editoptions: {value: html}, 
      editable: true 
     }); 
    }, 
    loadGridIfRequired = function() { 
     filledSelects++; 
     if (filledSelects > 1) { 
      $grid.jqGrid('setGridParam', { 
       datatype: 'json' 
      }).trigger('reloadGrid'); 
     } 
    }; 

$grid.jqGrid({ 
    url:'/indyaah/crud.htm', 
    datatype: 'local' 
    ... 
}); 
jq.getJSON('/indyaah/readUsers.htm', function (data) { 
    fillSelectWithData(data, 'userId', 'userId', 'userName'); 
    loadGridIfRequired(); 
}); 
jq.ajax('/indyaah/readBooks.htm', function (data) { 
    fillSelectWithData(data, 'bookId', 'bookId', 'user'); 
    loadGridIfRequired(); 
}); 

所有上面的代碼是未經測試，但我希望它會成功