JQGrid：編集後にドロップダウンリストを更新するにはどうすればよいですか？

Question

私のアプリケーションでは、一部の連絡先データを読み込むためにJQGridを使用します。エントリを編集/追加すると、データベースから連絡先の名前を選択し、連絡先を更新/追加します。

私の問題は、送信ボタンをクリックすると、ドロップダウンリストからドロップアウトするように既に入力されているデータとドロップダウンを更新したいということです。

マイコード：colModelため

：

{ name: 'OwnerEmail', index: 'OwnerEmail', width: 200, align: "center", sortable: true, sorttype: 'text', editable: true, edittype: 'select', editrules: { required: true }, editoptions: { value: ownersList} }, 

は、私は（私が行を選択すると、ドロップダウンがリフレッシュされることを）選択行のドロップダウンを移入

onSelectRow: function (id) { 
       var advOwners = $.ajax({ 
        type: 'POST', 
        data: {}, 
        url: 'MyWebService.asmx/GetOwners', 
        async: false, 
        error: function() { 
         alert('An error has occured retrieving Owners!'); 
        } 
       }).responseXML; 

       var aux = advOwners.getElementsByTagName("string"); 
       ownersList = ""; 
       for (var i = 0; i < aux.length; i++) { 
        ownersList += aux[i].childNodes[0].nodeValue + ':' + aux[i].childNodes[0].nodeValue + '; '; 
       } 
       ownersList = ownersList.substring(0, ownersList.length - 2); 

       jQuery("#GridView").setColProp('OwnerEmail', { editoptions: { value: ownersList} }); 
      } 

しかし、編集/追加フォームに再度入力すると、ドロップダウンが更新されず、最初にロードされたアイテムが表示されます。

助けが必要ですか？

おかげで、 ジェフ

Answer 1

私はあなたの代わりに、使用value財産のeditoptionsのdataUrlプロパティを使用している場合、それは良くなると思います。この場合、onSelectRowの内部で同期Ajaxコールを使用して、選択データを手動で取得する必要はありません。データが必要な場合は、対応する呼び出しがjqGridを行います。

dataUrlのURLは、<select>要素のHTMLフラグメントをすべて<options>を含めて返します。したがって、他の応答をdataUrlから対応するbuildSelectコールバック関数を実装するのに必要な形式に変換できます。

あなたの所では、現在行っているXMLデータではなく、 'MyWebService.asmx/GetOwners' URLからJSONデータを返すことをお勧めします。あなたはHTTPヘッダにCache-Control: private, max-age=0を設定することで、キャッシュからのデータの使用を防ぐ必要がある代わりにHTTP POSTのHTTP GETを使用する場合は、最も単純なケースでは、

[WebMethod] 
[ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
public List<string> GetSelectData() { 
    return new List<string> { 
     "User1", "User2", "User3", "User4" 
    }; 
} 

のようなWebメソッドである可能性があります。対応するコードはjqGridは（the source codeを参照）に対応するAjax呼び出しでdataType: "html"を使用し、デフォルトパー

[WebMethod] 
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] 
public List<string> GetSelectData() { 
    HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0)); 
    return new List<string> { 
     "User1", "User2", "User3", "User4" 
    }; 
} 

になります。あなたがASMX WebサービスのデフォルトであるHTTPのPOSTを使用する場合はdataType: "json", contentType: "application/json"に動作を変更するには、

ajaxSelectOptions: { contentType: "application/json", dataType: 'json' }, 

または

ajaxSelectOptions: { 
    contentType: "application/json", 
    dataType: 'json', 
    type: "POST" 
}, 

などとして、さらにjqGridのajaxSelectOptionsパラメータを使用する必要があります。

colModel内の列の対応する設定になります

var buildSelectFromJson = function (data) { 
     var html = '<select>', d = data.d, length = d.length, i = 0, item; 
     for (; i < length; i++) { 
      item = d[i]; 
      html += '<option value=' + item + '>' + item + '</option>'; 
     } 
     html += '</select>'; 
     return html; 
    }; 

は注意が必要

edittype: 'select', editable: true, 
editoptions: { 
    dataUrl: '/MyWebService.asmx/GetSelectData', 
    buildSelect: buildSelectFromJson 
} 

そのASMX Webサービスの場合に必要とされる上記コード使用data.d。 ASP.NET MVCまたはWCFに移行する場合は、dプロパティの使用を削除し、dataを直接使用する必要があります。

更新済み：Here上記の記述を実装したVS2010デモプロジェクトをダウンロードできます。