如何显示在jqGrid的间接数据 [英] How to display indirect data in Jqgrid
问题描述
我在我的ASP.net MVC的Web应用程序中实现jqGrid的。我有一些数据事情是这样的：
I am implementing Jqgrid in my ASP.net MVC web application. I have data some thing like this:
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
不过，在网格我想显示如下：
but, in the grid i would like to display like this:
SID SNAME City
1 ABC Chennai
2 XYZ Mumbai
3 ACX Delhi
4 KHG Banglore
5 ADF Hyderabad
6 KKR Kolkatta
我不能使用，因为加入的类结构是这样的：
I was not able to use join because the class structure is like this:
Class Student
{
long sid,
string sname,
long city
}
所以，当我从数据库中读取我得到这个城市没有ID城市名称。
So, when i am reading from the data base i am getting the city id not city name.
不过，我想在网格中的数据，以显示城市名称，而不是城市的ID终端用户
But, i would like to display city name instead of City ID in the grid data to end user
我需要像查找函数的一些事情，使数据绑定到jqGrid的前，我市ID将与城市名称映射，并显示它，而不是显示ID
i need some thing like a lookup function so that before binding data to the jQgrid,the city id will be mapped with city name and displays it instead of displaying ID
我没有找到一个方法来完成这件事。
I didnt find a way to get this done.
请帮助..
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);
}
如何修改return语句在JSON响应太丢slLocations
How to modify the return statement to throw slLocations too in the json response
推荐答案
我回答已经在封闭的问题之前（见此处）。不过我决定回答您的详细问题，因为你描述的问题真的是很常见的。
I answered already on the closed question before (see here). Nevertheless I decide to answer on your question in detail because the problem which you describe is really very common.
我先提醒的是，jqGrid的提供格式中选择，它使用 formatoptions.value 或 editoptions.value 脱code ID，以文本。在格式中选择使用值和可选的分离器 ，分隔符和设置defaultValue 属性，但它不能使用的 editoptions.dataUrl 得到所需要从服务器，而不是使用静态数据值。这个问题是很容易的：加工 dataUrl 作品异步的，但栅格体之一的列的格式不支持延迟填充过程中。因此，要使用格式中选择有一个有无以的设置 formatoptions.value 或 editoptions.value 的前的服务器响应将被jqGrid的处理。
I start with reminding that jqGrid provides formatter: "select" which uses formatoptions.value or editoptions.value to decode ids to texts. The formatter: "select" uses value and optional separator, delimiter and defaultValue properties, but it can't uses editoptions.dataUrl to get required data from the server instead of usage static value. The problem is very easy: processing dataUrl works asynchronous, but during formatting of the column of grid body one don't support delayed filling. So to use formatter: "select" one have to set formatoptions.value or editoptions.value before the server response will be processed by jqGrid.
在老答案我建议延长JSON响应从其他数据服务器返回的 editoptions.value 格式化>：中选择。我建议设置 beforeProcessing 。例如，一个可以生成以下格式的服务器响应：
In the old answer I suggested to extend JSON response returned from the server with additional data for editoptions.value of the columns having formatter: "select". I suggest to set the beforeProcessing. For example one can generate the server response in the following format:
{
"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选项
and uses the following jqGrid options
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"}
的演示演示的方法。它显示
我们可以使用相同的方法来动态设置任何列选项。例如，一个可以用
One can use the same approach to set any column options dynamically. For example one can use
{
"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 code
and the following JavaScript code
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);
该演示使用上述code。
The demo uses the above code.
我们重新搜索过滤器，如果任何选项是动态变化。的方式允许实现更灵活的解决方案。例如，服务器可以检测客户端（的网络浏览器）的语言preferences并返回数字，日期格式选项等的基础上的选项。我敢肯定，每个人都可以建议其他有趣的场景。
We recreate the searching filter if any option are changed dynamically. The way allows implement more flexible solutions. For example the server can detect the language preferences of the client (of the web browser) and return formatting options for numbers, dates and so on based on the options. I'm sure that everyone can suggest other interesting scenarios.
还有一个的话。如果你有选择的项目太多的（ searchoptions.value 和 editoptions.value ）我建议你不T选用字符串，而不是对象作为 searchoptions.value 的价值和 editoptions.value 。它允许你指定的订单的在选择元素的项目。
One more remark. If you have too many items in select in (searchoptions.value and editoptions.value) I would recommend you don't use strings instead of objects as the value of searchoptions.value and editoptions.value. It allows you to specify the order of items in the select element.
如果您将有太多的项目中进行选择（例如你的国家的所有城市），那么你可以考虑使用的 SELECT2 插件，使用我
If you will have too many items in select (for example all cities of your country) then you can consider to use select2 plugin which usage I demonstrate in the answer. It simplify selection of options because it convert select in element which is very close to jQuery UI Autocomplete.
接下来的演示展示的 SELECT2 插件。如果搜索工具栏的选择元素或搜索对话框之一的下拉箭头，点击申请获得额外的输入，可用于快速搜索。如果一个人开始（下面的图片中有一个例子，例如E）的选项列表将减少到选项具有输入文本字符串请在输入框中输入一些文本：
The next demo demonstrate the usage of select2 plugin. If one click on the dropdown arrow of "select" element of the searching toolbar or the searching dialog one get additional input filed which can be used for quick searching. If one starts to type some text in the input box (for example "e" on an example on the picture below) the list of options will be reduced to the options having the typed text as substring:
我个人觉得这样的选择 - 搜索的控制非常实用。
I personally find such "select-searching" control very practical.
通过我 colNames 动态。在可用于管理从服务器端的更多信息。
By the way I described in the another answer how to set colNames dynamically. In can be used to manage more information from the server side.
更新时间：：相应的控制器操作学生可以约以下
UPDATED: The corresponding controller action Students can be about the following
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);
}
}
这篇关于如何显示在jqGrid的间接数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
