gpt4 book ai didi

c# - Jqgrid中如何显示间接数据

转载 作者:太空狗 更新时间:2023-10-29 20:24:17 56 4
gpt4 key购买 nike

我正在我的 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

还有一张 table

 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函数这样的东西,这样在将数据绑定(bind)到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

最佳答案

我之前已经回答了关闭的问题(参见 here)。尽管如此,我还是决定详细回答您的问题,因为您描述的问题确实很常见。

我首先要提醒的是 jqGrid 提供了 formatter: "select"使用formatoptions.valueeditoptions.value将 id 解码为文本。 formatter: "select"使用 value和可选的 separator , delimiterdefaultValue属性,但它不能使用 editoptions.dataUrl从服务器获取所需数据而不是使用静态 value .问题很简单:处理dataUrl工作异步,但在格式化网格主体的列期间不支持延迟填充。所以要使用 formatter: "select"一个必须设置formatoptions.valueeditoptions.value 之前服务器响应将由 jqGrid 处理。

the old answer我建议使用 editoptions.value 的附加数据扩展从服务器返回的 JSON 响应。具有 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"}

The demo演示了该方法。它显示

enter image description here

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

{
"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.valueeditoptions.value )中选择的项目太多,我建议您不要使用字符串而不是对象作为 searchoptions.value 的值。和 editoptions.value .它允许您指定 select 元素中项目的顺序

如果你的select项太多(比如你所在国家的所有城市)那么你可以考虑使用select2我在 the answer 中演示的插件.它简化了选项的选择,因为它转换了非常接近 jQuery UI 自动完成的元素中的选择。

The next demo演示 select2 的用法插入。如果单击搜索工具栏或搜索对话框的“选择”元素的下拉箭头,则会获得可用于快速搜索的附加输入字段。如果开始在输入框中键入一些文本(例如下图示例中的“e”),选项列表将缩减为将键入的文本作为子字符串的选项:

enter image description here

我个人觉得这样的“选择-搜索”控件非常实用。

顺便说一下我在the another answer中描述的如何设置colNames动态地。 In 可用于管理来自服务器端的更多信息。

更新:相应的 Controller Action 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);
}
}

关于c# - Jqgrid中如何显示间接数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19420373/

56 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com