如何在Jqgrid中显示间接数据
Sai*_*ash 7 c# asp.net-mvc 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
我无法使用join,因为类结构是这样的:
Class Student
{
long sid,
string sname,
long city
}
所以,当我从数据库中读取时,我得到的城市ID不是城市名称.
但是,我想在网格数据中向最终用户显示城市名称而不是城市ID
我需要一些像lookup函数这样的东西,以便在将数据绑定到jQgrid之前,城市id将与城市名称映射并显示它而不是显示ID
我没有找到办法完成这件事.
请帮忙..
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
我之前已经回答了已经结束的问题(见这里).然而,我决定详细回答你的问题,因为你描述的问题非常普遍.
我首先提醒jqGrid提供formatter: "select"使用formatoptions.value或editoptions.value解码文本的ID.的formatter: "select"用途value和可选separator,delimiter和defaultValue性能,但它不能使用editoptions.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.它允许您指定select元素中的项目顺序.
如果您选择的项目太多(例如您所在国家/地区的所有城市),那么您可以考虑使用我在答案中演示的select2插件.它简化了选项的选择,因为它转换了非常接近jQuery UI Autocomplete的select元素.
下一个演示演示了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);
}
}
| 归档时间： |
|
| 查看次数： |
4840 次 |
| 最近记录： |