ParamQuery Jquery Grid 插件不显示数据答案

【问题标题】：ParamQuery Jquery Grid plugin not displaying DataParamQuery Jquery Grid 插件不显示数据
【发布时间】：2016-04-04 18:18:04
【问题描述】：

我的要求是我需要在带有分页的网格中显示数据。它是只读的，不需要编辑。我找了很多插件，最后我从 jquery 中找到了这个 ParamQuery Grid。

http://paramquery.com/demos

现在我的控制器正在向我发送一个 ViewModel 对象，其中包含两个属性。一个是 Customer 类型的 CustomerModel 属性，一个是 PaymentSummary 属性，它是一个列表。所以我填充两者并将其发送到视图。在视图中，我正在尝试以下代码。结果是我得到了适当的行数，但行都是空白的。意思是，我的 db 记录集返回 125 行，我可以在网格中看到 125 行，但我看不到数据。不确定是什么问题。我假设它使用数据格式。有人可以帮我吗？我正在将我的模型转换为 json 对象，但看起来它采用了一个数组。所以不知道是不是这个原因。

<html>
<head>
<!--jQuery dependencies-->
<script src="~/Scripts/jquery.min.js"></script>
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.min.js"></script>
 <script        

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-
ui.min.js"></script>
<!--PQ Grid files-->   
<link href="~/Content/pqgrid.min.css" rel="stylesheet" />   

<script src="~/Scripts/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
<link href="~/Content/pqgrid_office_theme.css" rel="stylesheet" />    
<title>Test</title>    

<script type="text/javascript">

 $(function () {
            //var data = [[1, 'Exxon Mobil', '339,938.0', '36,130.0'],
            //[2, 'Wal-Mart Stores', '315,654.0', '11,231.0'],
    //  [3, 'Royal Dutch Shell', '306,731.0', '25,311.0'],
    //  [4, 'BP', '267,600.0', '22,341.0'],
    //  [5, 'General Motors', '192,604.0', '-10,567.0'],
    //  [6, 'Chevron', '189,481.0', '14,099.0'],        
    //  [9, 'Ford Motor', '177,210.0', '2,024.0'],
    //  [10, 'ConocoPhillips', '166,683.0', '13,529.0'],
    //  [11, 'General Electric', '157,153.0', '16,353.0'],
    //  [12, 'Total', '152,360.7', '15,250.0'],
    //  [13, 'ING Group', '138,235.3', '8,958.9'],
    //  [14, 'Citigroup', '131,045.0', '24,589.0'],
    //  [15, 'AXA', '129,839.2', '5,186.5'],
    //  [16, 'Allianz', '121,406.0', '5,442.4'],        
    //  [20, 'American Intl. Group', '108,905.0', '10,477.0']];

    var data = @Html.Raw(Json.Encode(@Model.PaymentSummaryList));

    var obj = {
        width: 700, height: 300,
        title: "Grid From Array",
        numberCell: { resizable: true, title: "#" },
        editable: false,
        flexWidth: true,
        showBottom: false,
        resizable: true
    };
    obj.colModel = [
        { title: "Payment Received", width: 100, dataType: "string" },
        { title: "Interest", width: 200, dataType: "string" },
        { title: "PaymentDue", width: 150, dataType: "string", align:    
 "right" },
        { title: "Principal", width: 150, dataType: "string", align: "right"  
  }
    ];
       obj.dataModel = { data: data };

    var $grid = $("#grid_array").pqGrid(obj);

});

</script>
</head>
<body>
    <div id="grid_array" style="margin:100px;"></div>   
</body>
</html>

【问题讨论】：

Html.Raw(value) 将值呈现为 HTML 标记，而不是将其呈现为 HTML 编码的输出。（来自 w3schools）但是 pqGrid 需要 json 格式的数据，例如 [{prop1:value1, prop2:value2, prop3:value3 },{prop1:value1, prop2:value2, prop3:value3},{prop1:value1, prop2:value2 , prop3:value3}]。这就是它显示正确行数的原因，但由于它无法读取数据，因此无法在网格中显示。
可能改成 var model = JSON.parse('@Html.Raw(Json.Encode(Model.PaymentSummaryList))');应该做的伎俩。

标签： jquery binding grid paramquery

【解决方案1】：

我认为您的问题与this 相同；我回答了类似的问题，但不幸的是我没有得到关于建议结果的反馈。您可以尝试这样做，因为我认为它发生了同样的情况。

您的 obj.colModel 设置中缺少 dataIndx 字段：

{  title: "Payment Received", width: 100, dataType: "string" dataIndx: "payment_rec" } //if payment_rec is the name of the field

您必须正确地将数据与模型绑定；当数据是静态的时，这没关系，但是当您链接动态源时，您必须这样做。

【讨论】：