我之前已经回答过封闭的问题（参见here https://stackoverflow.com/a/17410568/315935）。尽管如此，我还是决定详细回答你的问题，因为你描述的问题确实很常见。
我首先提醒一下 jqGrid 提供了formatter: "select"它使用formatoptions.value or editoptions.value将 id 解码为文本。这formatter: "select" uses value和可选的separator, delimiter and defaultValue属性，但不能使用编辑选项.dataUrl http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editoptions从服务器获取所需数据而不是静态使用value。问题很简单：处理dataUrl works 异步，但在格式化网格体的列时不支持延迟填充。所以要使用formatter: "select" one have to set formatoptions.value or editoptions.value before服务器响应将由 jqGrid 处理。
In 旧答案 https://stackoverflow.com/a/17410568/315935我建议使用附加数据扩展从服务器返回的 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"}
The demo http://www.ok-soft-gmbh.com/jqGrid/UsageFormetterSelect0.htm演示了该方法。它显示
人们可以使用相同的方法动态设置任何列选项。例如可以使用
{
"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);
该演示使用了上面的代码。
如果任何选项动态更改，我们会重新创建搜索过滤器。该方式允许实施更灵活的解决方案。例如，服务器可以检测客户端（网络浏览器）的语言首选项，并基于该选项返回数字、日期等的格式选项。我相信每个人都可以提出其他有趣的场景。
再说一点。如果您在 select in (searchoptions.value and editoptions.value）我建议您不要使用字符串而不是对象作为值searchoptions.value and editoptions.value。它允许您指定命令选择元素中的项目数。
如果您选择的项目太多（例如您所在国家/地区的所有城市），那么您可以考虑使用select2 http://ivaynberg.github.io/select2/我在其中演示的插件答案 https://stackoverflow.com/a/19404013/315935。它简化了选项的选择，因为它转换了元素中的选择，这与 jQuery UI 自动完成非常接近。
下一个演示 http://www.ok-soft-gmbh.com/jqGrid/usageformetterselect2.htm演示使用select2 http://ivaynberg.github.io/select2/插入。如果单击搜索工具栏或搜索对话框的“选择”元素的下拉箭头，则会获得可用于快速搜索的附加输入字段。如果开始在输入框中键入一些文本（例如下图中示例中的“e”），选项列表将减少为将键入的文本作为子字符串的选项：
我个人觉得这种“选择搜索”控件非常实用。
顺便说一句，我在另一个答案 https://stackoverflow.com/a/16288582/315935如何设置colNames动态地。 In 可用于从服务器端管理更多信息。
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);
}
}
