ibeautiful
我以前已经回答过这个非公开的问题了(见这里)。不过，我决定详细回答你的问题，因为你所描述的问题非常普遍。我首先提醒jqGrid提供formatter: "select"用formatoptions.value或editoptions.value将ID解码为文本。这个formatter: "select"使用value和任选separator, delimiter和defaultValue属性，但它不能使用edoptions.dataUrl从服务器获取所需数据，而不是使用静态数据value..问题很简单：处理dataUrl作品异步，但在网格体列的格式化过程中，不支持延迟填充。所以要用formatter: "select"一不得不集formatoptions.value或editoptions.value 以前服务器响应将由jqGrid处理。在……里面旧的答案我建议将从服务器返回的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浏览器)的语言首选项，并根据这些选项返回数字、日期等格式选项。我相信每个人都能提出其他有趣的方案。再说一句。如果您有太多的项目在选择中(searchoptions.value和editoptions.value)我建议您不要使用字符串而不是对象作为searchoptions.value和editoptions.value..它允许您指定命令元素中的项。如果您选择的项目太多(例如，您国家的所有城市)，那么您可以考虑使用选择2插件，我在其中演示了哪个用法答案..它简化了选项的选择，因为它将SELECT in元素转换为非常接近jQueryUI自动完成的元素。下一个演示演示使用选择2插件。如果单击搜索工具栏的“SELECT”元素的下拉箭头或搜索对话框，就会得到额外的输入字段，可用于快速搜索。如果开始在输入框中键入某些文本(例如，下面图片中的示例中的“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);
}}