jqGrid - どのように動的に編集ツールバーのコンボボックスをロードする（ASP.NET MVC 2）

Question

私は動的に以下の私のカテゴリコンボボックスをロードする方法を把握しようとしていますjqGridを使用します。

この記事では、データは3つの方法のいずれかで形成されなければならないかを私に示しています。 http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3Acommon_rules。オプション＃1または＃2は、グリッド上の編集ボタンをクリックするたびにロードしたくないので、うまく動作します。それとも私も持っていますか？

私のjavascript：

$(document).ready(function() { 
$('#grid').jqGrid({ 
    colNames: ['TypeId', 'Type', 'CR Active', 'Category'], 
    colModel: [ 
     { name: 'TYPE_ID', index: 'TYPE_ID', hidden: true, search: false, 
      editable: true, editoptions: { readonly: true, size: 10 }, 
      formoptions: { rowpos: 1, label: "Type Id", elmprefix: "(*)"} }, 
     { name: 'TYPE', index: 'TYPE', sortable: true, hidden: false, 
      editable: true, editoptions: { size: 25, maxlength: 30 }, 
      formoptions: { rowpos: 2, label: "Type", elmprefix: "(*)" }, 
      editrules: { required: true} }, 
     { name: 'CR_ACTIVE', index: 'CR_ACTIVE', align: 'right', sortable: true, 
      hidden: false, editable: true, edittype: "checkbox", 
      editoptions: { size: 25, value: "Yes:No", defaultValue: "Yes" }, 
      formoptions: { rowpos: 3, elmprefix: "    "} }, 
     { name: 'description', index: 'description', editable: true, 
      edittype: "select", editoptions: { value: { 1: 'One', 2: 'Two'} }, 
      formoptions: { rowpos: 4, elmprefix: "    "} } 
    ], 
    pager: jQuery('#pager'), 
    sortname: 'TYPE', 
    rowNum: 10, 
    rowList: [10, 20, 50], 
    sortorder: "asc", 
    width: 600, 
    height: 250, 
    datatype: 'json', 
    caption: 'Available Types', 
    viewrecords: true, 
    mtype: 'GET', 
    jsonReader: { 
     root: "rows", 
     page: "page", 
     total: "total", 
     records: "records", 
     repeatitems: false, 
     userdata: "userdata", 
     id: "TYPE_ID" 
    }, 
    url: "/Type/GetData" 
    }).navGrid('#pager', { view: false, del: true, add: true, edit: true }, 
     { height:150, reloadAfterSubmit:false, jqModal:false, closeOnEscape:true, 
     bottominfo: "Fields marked with (*) are required", closeAfterEdit: true, 
     url: "/Type/Edit" }, // default settings for edit 
     { height:150, reloadAfterSubmit:false, jqModal:false, closeOnEscape:true, 
     bottominfo: "Fields marked with (*) are required", closeAfterAdd: true, 
     url: "/Type/Create" }, // default settings for add 
     { reloadAfterSubmit: false, jqModal: false, closeOnEscape: true, 
     url: "/Type/Delete" }, // delete instead that del:false we need this 
     { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true, 
     afterSubmit: function (response, postdata) { 
      alert("testing"); 
     } }, // search options 
     { height: 150, jqModal: false, closeOnEscape: true} /* view parameters*/ 
    ); 

}); 

マイコントローラーカテゴリをロードするために何らかの形で呼ばれる：

public JsonResult GetCategories() 
{ 
    string test = "Will be a string contructed as needed"; 

    //have to return something if there is an issue 
    return Json(test); 
} 

私はそれを理解したようcolmodelの説明のeditoptionsのdataUrl = "GetCategories" は、基本的にこれを呼び出します追加/編集ボタンが押されるたびにjsonアクションが実行されます。私は誰かがこれを組み込む方法の例を持っていて、ページの読み込み時にしか発生しないことを期待しています。

ありがとうございます。

Answer 1

はmy old answerの「更新」の部分を見てください。それはあなたが必要とするものを記述しているようです。アクションGetCategories()からJSON結果を返し、カスタムbuildSelectファンクション内の対応する<select> HTMLフラグメントにJSON入力を変換する必要があります。フォームeditoptions: { value: { 1: 'One', 2: 'Two'} }の代わりeditoptions: { value: { One: 'One', Two: 'Two'} }でeditoptionsを使用するので、あなたは、アクションのコードとthe answerからbuildSelect機能を少し変更する必要があります。

もう1つの発言。 edittype: "select", editoptions: { value: { 1: 'One', 2: 'Two'} }の形式で 'Category'カラムオプションを使用するので、おそらくJSONデータでカテゴリID（1と2）を使用し、ユーザに値 'One'と 'Two'を表示したいと思うでしょう。この場合、追加のオプションformatter:'select'を追加する必要があります（詳細は文書hereを参照してください）。