如何在Jqgrid中显示间接数据

我在我的ASP.net MVC Web应用程序中实现Jqgrid。 我有这样的数据：

SID SNAME CITY 1 ABC 11 2 XYZ 12 3 ACX 13 4 KHG 14 5 ADF 15 6 KKR 16 

和另一张桌子

  CID CNAME 11 Chennai 12 Mumbai 13 Delhi like this 

但是，在网格中，我想显示如下：

  SID SNAME City 1 ABC Chennai 2 XYZ Mumbai 3 ACX Delhi 4 KHG Banglore 5 ADF Hyderabad 6 KKR Kolkatta 

我无法使用连接，因为类结构是这样的：

  Class Student { long sid, string sname, long city } 

所以，当我从数据库中读取的时候，我得到的是城市名称而不是城市名称。

但是，我想在网格数据中显示城市名称而不是城市ID给最终用户

我需要一些像lookupfunction的东西，所以在将数据绑定到jQgrid之前，城市ID将被映射到城市名称并显示它，而不是显示ID

我没有find一个方法来完成这件事。

请帮忙..

 The controller method i am using is as follows: public JsonResult Students() { List<Students> liStudents = new List<Students>(); SortedList<long, string> slLocations = new SortedList<long, string>(); slLocations = Students.LoadLocations(); liStudents = Students.GetStudents(); return Json(liStudents,JsonRequestBehavior.AllowGet); } 

如何在json响应中修改return语句来抛出slLocations

Answer 1

我之前已经回答过这个问题（见这里 ）。 不过，我决定详细回答你的问题，因为你描述的问题确实很普遍。

我首先提醒一下，jqGrid提供了formatter: "select"使用formatoptions.value或editoptions.value将id解码为文本。 formatter: "select"使用value和可选的separator ， delimiter和defaultValue属性，但不能使用editoptions.dataUrl从服务器获取所需的数据，而不是使用静态value 。 这个问题很简单：处理dataUrl工作是asynchronous的 ，但是在格式化一个格子体的时候不支持延迟填充。 因此，要使用formatter: "select" 必须在 editoptions.value处理服务器响应之前设置formatoptions.value或editoptions.value。

在旧的回答中，我build议从服务器返回的JSON响应的扩展editoptions.value ，其formatter: "select" 。 我build议设置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"} 

演示演示了这种方法。 它显示

可以使用相同的方法来dynamic设置任何列选项。 例如可以使用

 { "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); 

演示使用上面的代码。

如果任何选项dynamic更改，我们重新创buildsearchfilter。 这样可以实现更灵活的解决scheme。 例如，服务器可以检测客户端（网页浏览器）的语言首选项，并根据选项返回数字，date等格式选项。 我相信每个人都可以提出其他有趣的场景。

还有一句话。 如果您在select（ searchoptions.value和editoptions.value ）中有太多项目，我build议您不要使用string而不是对象作为searchoptions.value和editoptions.value的值。 它允许您指定select元素中项目的顺序 。

如果你select的项目太多（例如你所在国家的所有城市），那么你可以考虑使用select2插件，我在答案中演示了这个用法。 它简化了选项的select，因为它转换了非常接近jQuery UI自动完成的select元素。

下一个演示演示了select2插件的用法。 如果点击search工具栏的“select”元素的下拉箭头或者search对话框，就可以获得可用于快速search的附加input字段。 如果开始在input框中键入一些文本（例如下面图片上的例子中的“e”），则选项列表将被缩减为具有键入文本的选项：

我个人觉得这种“select性search”控件非常实用。

顺便说一下，我在另一个答案中描述如何dynamic设置colNames 。 可以用来从服务器端pipe理更多的信息。

更新 ：相应的控制器动作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); } } 

Answer 2

@Avinash，你可以做一些这样的技巧。 但是，这仍然不是一个更好的解决scheme。 这可能会帮助你得到一些想法。 我的build议是你需要find更好的方式从你的服务器（ASP.Net）本身。 我使用了grid完整函数来修改你的数据，

 gridComplete: function () { var rowIDs = jQuery("#list5").getDataIDs(); for (var i=0;i<rowIDs.length;i=i+1){ rowData=jQuery("#list5").getRowData(rowIDs[i]); if (rowData.city == "11") { $("#list5").find('td').eq('5').html('chennai'); }else if (rowData.city == "12") { $("#list5").find('td').eq('8').html('mumbai'); } } } 

希望这可以帮助。