如何在Jqgrid中顯示間接數據

Question

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

Answer 1

我之前已經回答了已經結束的問題（見這里 ）。 然而，我決定詳細回答你的問題，因為你描述的問題非常普遍。

我首先提醒jqGrid提供formatter: "select" ，它使用formatoptions.value或editoptions.value將ID解碼為文本。 formatter: "select"使用value和可選的separator ， delimiter和defaultValue屬性，但它不能使用editoptions.dataUrl從服務器獲取所需的數據而不是使用靜態value 。 問題很簡單：處理dataUrl 異步工作 ，但在格式化網格體的列期間，不支持延遲填充。 所以要使用formatter: "select" 必須在 editoptions.value處理服務器響應之前設置formatoptions.value或editoptions.value。

在舊的答案中，我建議擴展從服務器返回的JSON響應，並為具有formatter: "select"的列的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瀏覽器）的語言首選項，並根據選項返回數字，日期等格式選項。 我相信每個人都可以建議其他有趣的場景。

再說一遍。 如果你在select in（ 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);
    }
}

Answer 2

@Avinash，你可以做一些伎倆像這樣。 但它仍然不是一個更好的解決方案。 它可能會幫助你了解一些。 我的建議是你需要從服務器（ASP.Net）本身找到更好的方法。 我使用網格完整功能來修改你的數據，

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');
  }
 }
}

希望這可以幫助。