动态定义jqGrid

时间:2010-12-23 14:25:26

标签: jquery asp.net-mvc json jqgrid

我正在尝试为ASP.NET MVC 2应用程序创建一个临时查询页面。此页面是安全的,严格用于我们的Intranet上的技术管理访问。我们希望能够查询少数几个表,并且我不希望每个查询都有一个页/网格。我有一个MVC控制器,它返回一个包含以下值的JSON结果(我从客户端javascript警报中得到了这些值,所以我知道这就是这些值在“网格”中的样子):

colNames包含:

['AccountID','ClientID']

colModel包含:

[{editable:false,index:'AccountID',jsonmap:'AccountID',key:false,name:'AccountID',resizable:true,search:false,sortable:true,width:300},
 {editable:false,index:'ClientID',jsonmap:'ClientID',key:false,name:'ClientID',resizable:true,search:false,sortable:true,width:300}]

colData包含:

{total:1,page:1,records:1,rows:[{AccountID:1,ClientID:1}]}

而且,在客户端上,我的jqGrid看起来像:

jQuery(document).ready(function () {

    $.ajax({
        type: 'POST',
        url: '<%: Url.Action("GetData", "Support") %>',
        data: { query: 'foo' },
        dataType: 'json',
        success: function (result) {

            alert(result.colNames);
            alert(result.colModel);
            alert(result.colData);

            jQuery('#QueryGrid').jqGrid({
                jsonReader: { repeatitems: false },
                shrinkToFit: true,
                datatype: 'jsonstring',
                colNames: result.colNames,
                colModel: result.colModel,
                datastr: result.colData,
                viewrecords: true
            });
        },
        error: function (x, e) {
            alert(x.readyState + ' ' + x.status + ' ' + e.msg);
        }
    });
});

我一直根据Stack Overflow上的几个相关帖子/回复以及jqGrid wiki将它们整合在一起。我很确定我非常,非常接近......但它只是没有成功。

我遇到的问题是jqGrid会抛出错误“colNames的长度&lt;&gt; colModel!”我似乎无法弄清楚它不喜欢我的JSON字符串是什么。

任何人都能看到我在这里缺少的东西吗?

1 个答案:

答案 0 :(得分:1)

我认为您收到的result.colNamesresult.colModel 数据是字符串而不是对象

var cn = ['AccountID','ClientID'];
var cm = [
    {editable:false,index:'AccountID',jsonmap:'AccountID',key:false,name:'AccountID',
     resizable:true,search:false,sortable:true,width:300},
    {editable:false,index:'ClientID',jsonmap:'ClientID',key:false,name:'ClientID',
     resizable:true,search:false,sortable:true,width:300}];
var cd = '{total:1,page:1,records:1,rows:[{AccountID:1,ClientID:3}]}';
jQuery('#QueryGrid').jqGrid({
    jsonReader: { repeatitems: false },
    height: 'auto',
    colNames: cn,
    colModel: cm,
    datastr: cd,
    viewrecords: true
});

顺便说一下,您在colModel参数中使用的某些属性是默认的。参数shrinkToFit: true也是默认值。所以你可以减少到

[{index:'AccountID',jsonmap:'AccountID',name:'AccountID',search:false,width:300},
 {index:'ClientID',jsonmap:'ClientID',name:'ClientID',search:false,width:300}]

如果您使用jsonReader: { repeatitems: false, cell:"" },那么它可以更短

[{index:'AccountID',name:'AccountID',search:false,width:300},
 {index:'ClientID',name:'ClientID',search:false,width:300}]

您真正想要的是将result.colNamesresult.colModel作为JSON字符串发送,可以将其转换为对象,例如jQuery.parseJSON。在这种情况下,您应该更改result.colNamesresult.colModel中的数据格式。以下代码也可以使用

var cnStr = '["AccountID","ClientID"]';
var cmStr = '[{"index":"AccountID","name":"AccountID","search":false,"width":300},{"index":"ClientID","name":"ClientID","search":false,"width":300}]';
var cd = '{total:1,page:1,records:1,rows:[{AccountID:1,ClientID:3}]}';
jQuery('#QueryGrid').jqGrid({
        jsonReader: { repeatitems: false, cell:"" },
        datatype: 'jsonstring',
        height:'auto',
        colNames: jQuery.parseJSON(cnStr),
        colModel: jQuery.parseJSON(cmStr),
        datastr: cd,
        viewrecords: true
    });

还有一个小小的评论。您不在jqGrid数据中使用key:trueid值。这是有潜在危险的。如果数据中不存在id,您应该假设jqGrid使用id =“1”,id =“2”等等。问题可能在于您在一个页面上使用两个或更多此类网格。您很容易收到 double ID ,这是不允许的。