2016-04-04 73 views
0

私の要件は、ページ番号付きのグリッドにデータを表示する必要があります。読み込み専用で編集は不要です。多くのプラグインを検索したところ、このParamQuery Gridがjquery。今私のコントローラは、私にそれで2つのプロパティを持っているのViewModelオブジェクトを送信しているParamQuery Jquery Gridプラグインでデータが表示されない

http://paramquery.com/demos

。 1つはCustomerModel型のCustomerプロパティで、もう1つは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> 
+0

Html.Raw(値)\t値をHTMLエンコードされた出力としてレンダリングするのではなく、HTMLマークアップとしてレンダリングします。 (w3schoolsから) しかしpqGridでは、{prop1:value1、prop2:value2、prop3:value3}、{prop1:value1、prop2:value2、prop3:value3}、{prop1:value1、prop2: value2、prop3:value3}]。そのため、正しい行数が表示されますが、データを読み取ることができないため、グリッドに表示することはできません。 – zaffer

+0

おそらくそれを に変更します。var model = JSON.parse( '@ Html.Raw(Json.Encode(Model.PaymentSummaryList))); はこのトリックを行う必要があります。 – zaffer

答えて

0

あなたはthisと同じ問題があると思います。私は同様の質問に答えましたが、残念ながら私はアドバイスの結果についてのフィードバックを得ていませんでした。私はそれが同じ起こったと思うので、そうしようとすることができます。

それはあなたのobj.colModel設定でdataIndx場の不足:

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

あなたのモデルと正しくデータをバインドする必要があります。データが静的である場合、それは重要ではありませんが、動的ソースをリンクするときには必要です。

関連する問題