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

我首先提醒jqGrid提供格式化程序：“select”,它使用formatoptions.value或editoptions.value将ID解码为文本.格式化程序：“select”使用值和可选的分隔符,分隔符和defaultValue属性,但它不能使用editoptions.dataUrl从服务器获取所需的数据而不是使用静态值.问题很简单：处理dataUrl异步工作,但在格式化网格体的列期间,不支持延迟填充.所以要使用formatter：“select”必须在jqGrid处理服务器响应之前设置formatoptions.value或editoptions.value.

在the old answer中,我建议扩展从服务器返回的JSON响应,并为具有formatter：“select”的列的editoptions.value提供附加数据.我建议设置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",{ "SID": "5","SNAME": "ADF",{ "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演示了这种方法.它显示

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

{
    "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"
            }
        }
    },"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",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",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元素中的项目顺序.

如果您选择的项目太多(例如您所在国家/地区的所有城市),那么您可以考虑使用我在the answer演示的select2插件.它简化了选项的选择,因为它转换了非常接近jQuery的select元素UI自动填充.

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

我个人认为这种“选择搜索”控件非常实用.

顺便说一句,我在the another answer中描述了如何动态设置colNames. In可用于从服务器端管理更多信息.

更新：相应的控制器操作学生可以是关于以下内容

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,CITY = 12 },new Student { SID = 3,CITY = 13 },new Student { SID = 4,new Student { SID = 5,new Student { SID = 6,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);
    }
}