我之前已经回答了已关闭的问题（请参阅此处）。尽管如此，我还是决定详细回答您的问题，因为您描述的问题确实很常见。
我首先提醒 jqGrid 提供了formatter: "select"哪些使用formatoptions.value或editoptions.value将 ids 解码为文本。formatter: "select"uses和valueoptionalseparator和properties，但它不能使用editoptions.dataUrl从服务器获取所需的数据，而不是使用static 。问题很简单：处理工作是异步的，但是在格式化网格体列的过程中，不支持延迟填充。所以要使用一个必须设置或在服务器响应将由 jqGrid 处理之前。delimiterdefaultValuevaluedataUrlformatter: "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);
该演示使用上述代码。
如果动态更改任何选项，我们将重新创建搜索过滤器。该方式允许实施更灵活的解决方案。例如，服务器可以检测客户端（网络浏览器）的语言首选项，并根据选项返回数字、日期等的格式选项。我相信每个人都可以提出其他有趣的场景。
再说一句。searchoptions.value如果您在 ( and )中选择的项目太多，editoptions.value我建议您不要使用字符串而不是对象作为searchoptions.valueand的值editoptions.value。它允许您指定选择元素中项目的顺序。
如果您选择的项目太多（例如您所在国家/地区的所有城市），那么您可以考虑使用我在答案中演示的select2插件。它简化了选项的选择，因为它将选择转换为非常接近 jQuery UI 自动完成的元素。
下一个演示演示了select2插件的用法。如果单击搜索工具栏或搜索对话框的“选择”元素的下拉箭头，则会获得额外的输入字段，可用于快速搜索。如果开始在输入框中键入一些文本（例如下图中示例中的“e”），选项列表将减少为将键入的文本作为子字符串的选项：
我个人觉得这种“选择搜索”控件非常实用。
顺便说一句，我在另一个答案中描述了如何colNames动态设置。In 可用于管理来自服务器端的更多信息。
更新：相应的控制器动作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);
}
}