0

My requirement is I need to display a data in a grid with pagination.Its going to be readonly and no editing is necessary.I looked for lot of plugins and I finally found this ParamQuery Grid from jquery.

http://paramquery.com/demos

Now my controller is sending me a ViewModel object which has two properties in it. One is a Customer property which is of type CustomerModel and one is a PaymentSummary property which is a list. So I m populating both and sending it to the View. And in the view I m trying the below code. The result is I m getting the number of rows appropriately but the rows are all blank. Meaning, my recordset from db is returning 125 rows and I can see 125 rows in the grid but I can t see the data. Not sure what is the issue. I am assuming its with the data format. Could somebody please help me with this ? I am converting my model to json object but looks like its taking an array. So not sure if that may be the reason.

<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>
4

1 回答 1

0

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

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

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

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

于 2016-04-28T12:11:39.897 回答