私は以前に閉じられた質問にすでに答えました（こちらを参照）。それにもかかわらず、あなたが説明した問題は非常に一般的であるため、私はあなたの質問に詳細に答えることにしました.
まず、jqGrid は、id をテキストにformatter: "select"使用formatoptions.valueまたはデコードする機能を提供していることを思い出します。usesと optional 、およびproperties ですが、 use static の代わりに editoptions.dataUrl を使用editoptions.valueしてサーバーから必要なデータを取得することはできません。問題は非常に簡単です: 処理は非同期で動作しますが、グリッド本体の列のフォーマット中は遅延フィルをサポートしません。したがって、使用するには、サーバーの応答が jqGrid によって処理される前に、またはを設定する必要があります。formatter: "select"valueseparatordelimiterdefaultValuevaluedataUrlformatter: "select"formatoptions.valueeditoptions.value
古い回答では、サーバーから返された JSON 応答を拡張しeditoptions.value、formatter: "select". を設定することをお勧めし beforeProcessingます。たとえば、次の形式でサーバー応答を生成できます。
{
"cityMap": {"11": "Chennai", "12": "Mumbai", "13": "Delhi"},
"rows": [
{ "SID": "1", "SNAME": "ABC", "CITY": "11" },
{ "SID": "2", "SNAME": "XYZ", "CITY": "12" },
{ "SID": "3", "SNAME": "ACX", "CITY": "13" },
{ "SID": "4", "SNAME": "KHG", "CITY": "13" },
{ "SID": "5", "SNAME": "ADF", "CITY": "12" },
{ "SID": "6", "SNAME": "KKR", "CITY": "11" }
]
}
次のjqGridオプションを使用します
colModel: [
{name: "SNAME", width: 250},
{name: "CITY", width: 180, align: "center"}
],
beforeProcessing: function (response) {
var $self = $(this);
$self.jqGrid("setColProp", "CITY", {
formatter: "select",
edittype: "select",
editoptions: {
value: $.isPlainObject(response.cityMap) ? response.cityMap : []
}
});
},
jsonReader: { id: "SID"}
デモは、アプローチを示しています。表示します
同じアプローチを使用して、列オプションを動的に設定できます。たとえば、使用できます
{
"colModelOptions": {
"CITY": {
"formatter": "select",
"edittype": "select",
"editoptions": {
"value": "11:Chennai;13:Delhi;12:Mumbai"
},
"stype": "select",
"searchoptions": {
"sopt": [ "eq", "ne" ],
"value": ":Any;11:Chennai;13:Delhi;12:Mumbai"
}
}
},
"rows": [
{ "SID": "1", "SNAME": "ABC", "CITY": "11" },
{ "SID": "2", "SNAME": "XYZ", "CITY": "12" },
{ "SID": "3", "SNAME": "ACX", "CITY": "13" },
{ "SID": "4", "SNAME": "KHG", "CITY": "13" },
{ "SID": "5", "SNAME": "ADF", "CITY": "12" },
{ "SID": "6", "SNAME": "KKR", "CITY": "11" }
]
}
および次の JavaScript コード
var filterToolbarOptions = {defaultSearch: "cn", stringResult: true, searchOperators: true},
removeAnyOption = function ($form) {
var $self = $(this), $selects = $form.find("select.input-elm");
$selects.each(function () {
$(this).find("option[value='']").remove();
});
return true; // for beforeShowSearch only
},
$grid = $("#list");
$.extend($.jgrid.search, {
closeAfterSearch: true,
closeAfterReset: true,
overlay: 0,
recreateForm: true,
closeOnEscape: true,
afterChange: removeAnyOption,
beforeShowSearch: removeAnyOption
});
$grid.jqGrid({
colModel: [
{name: "SNAME", width: 250},
{name: "CITY", width: 180, align: "center"}
],
beforeProcessing: function (response) {
var $self = $(this), options = response.colModelOptions, p,
needRecreateSearchingToolbar = false;
if (options != null) {
for (p in options) {
if (options.hasOwnProperty(p)) {
$self.jqGrid("setColProp", p, options[p]);
if (this.ftoolbar) { // filter toolbar exist
needRecreateSearchingToolbar = true;
}
}
}
if (needRecreateSearchingToolbar) {
$self.jqGrid("destroyFilterToolbar");
$self.jqGrid("filterToolbar", filterToolbarOptions);
}
}
},
jsonReader: { id: "SID"}
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false})
$grid.jqGrid("filterToolbar", filterToolbarOptions);
デモでは上記のコードを使用します。
オプションが動的に変更された場合は、検索フィルターを再作成します。この方法により、より柔軟なソリューションを実装できます。たとえば、サーバーはクライアント (Web ブラウザー) の言語設定を検出し、オプションに基づいて数値、日付などの書式設定オプションを返すことができます。誰もが他の興味深いシナリオを提案できると確信しています。
もう1つの発言。select in ( searchoptions.valueand ) に項目が多すぎる場合は、オブジェクトの代わりに文字列をandeditoptions.valueの値として使用しないことをお勧めします。これにより、select 要素内のアイテムの順序を指定できます。searchoptions.valueeditoptions.value
選択したアイテムが多すぎる場合 (たとえば、あなたの国のすべての都市)、select2プラグインの使用を検討できます。jQuery UI Autocomplete に非常に近い select in 要素を変換するため、オプションの選択が簡単になります。
次のデモでは、 select2プラグインの使用方法を示します。検索ツールバーまたは検索ダイアログの「選択」要素のドロップダウン矢印を 1 回クリックすると、クイック検索に使用できる追加の入力フィールドが表示されます。入力ボックスにテキストを入力し始めると (たとえば、下の図の例では「e」)、オプションのリストは、入力されたテキストを部分文字列として持つオプションに縮小されます。
個人的には、このような「選択検索」制御は非常に実用的だと思います。
ちなみに、別の回答colNamesで動的に設定する方法について説明しました。では、サーバー側からより多くの情報を管理するために使用できます。
UPDATED : 対応するコントローラー アクションStudentsは、次のようになります。
public class Student {
public long SID { get; set; }
public string SNAME { get; set; }
public long CITY { get; set; }
}
public class City {
public long CID { get; set; }
public string CNAME { get; set; }
}
...
public class HomeController : Controller {
...
public JsonResult Students () {
var students = new List<Student> {
new Student { SID = 1, SNAME = "ABC", CITY = 11 },
new Student { SID = 2, SNAME = "ABC", CITY = 12 },
new Student { SID = 3, SNAME = "ABC", CITY = 13 },
new Student { SID = 4, SNAME = "ABC", CITY = 13 },
new Student { SID = 5, SNAME = "ABC", CITY = 12 },
new Student { SID = 6, SNAME = "ABC", CITY = 11 }
};
var locations = new List<City> {
new City { CID = 11, CNAME = "Chennai"},
new City { CID = 12, CNAME = "Mumbai"},
new City { CID = 13, CNAME = "Delhi"}
};
// sort and concatinate location corresponds to jqGrid editoptions.value format
var sortedLocations = locations.OrderBy(location => location.CNAME);
var sbLocations = new StringBuilder();
foreach (var sortedLocation in sortedLocations) {
sbLocations.Append(sortedLocation.CID);
sbLocations.Append(':');
sbLocations.Append(sortedLocation.CNAME);
sbLocations.Append(';');
}
if (sbLocations.Length > 0)
sbLocations.Length -= 1; // remove last ';'
return Json(new {
colModelOptions = new {
CITY = new {
formatter = "select",
edittype = "select",
editoptions = new {
value = sbLocations.ToString()
},
stype = "select",
searchoptions = new {
sopt = new[] { "eq", "ne" },
value = ":Any;" + sbLocations
}
}
},
rows = students
},
JsonRequestBehavior.AllowGet);
}
}