2016-04-04 12 views
0

Benim gereksinimim bir tabloyu sayfalandırma ile görüntülemem gerekiyor. Okunacak ve düzenleme gerektirmeyecek. Çok fazla eklenti aradım ve sonunda bu ParamQuery Grid'i buldum. jQuery. ParamQuery Jquery Grid eklentisi görüntülenmiyor Veri

http://paramquery.com/demos

Şimdi benim denetleyicisi Bana içinde iki özelliği vardır bir ViewModel nesnesi gönderiyor. Bunlardan biri, CustomerModel türünde bir müşteri özelliğidir ve bir liste olan PaymentSummary özelliğidir. Bu yüzden ikisini de doldurup View'a gönderiyorum. Ve görünüşte aşağıdaki kodu deniyorum. Sonuç olarak satır sayısını uygun şekilde alacağım ama satırların hepsi boş. Anlamı, db'den kayıt grubum 125 satır döndürüyor ve ızgarada 125 satır görebiliyorum ama verileri göremiyorum. Sorun ne olduğundan emin değilim. Veri formatını kabul ediyorum. Birisi bana yardım edebilir mi lütfen? Modelimi json nesnesine dönüştürüyorum ama bir dizi çekiyor gibi görünüyor. Yani bunun sebebi olabileceğinden emin değilim.

<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 (değer) \t HTML kodlaması olarak HTML işaretlemesi oluşturmak yerine HTML işaretlemesi olarak değer oluşturur. (w3schools'dan) Ancak pqGrid, json biçiminde [{prop1: değer1, prop2: değer2, prop3: değer3}, {prop1: değer1, prop2: değer2, prop3: değer3}, {prop1: değer1, prop2 gibi bir veri gerektirir: değer2, prop3: değer3}]. Doğru sayıda satır göstermesinin nedeni, ancak verileri okuyamayacağı için, onu ızgarada gösteremez. – zaffer

+0

Muhtemelen modeline değiştiriliyor var model = JSON.parse ('@ Html.Raw (Json.Encode (Model.PaymentSummaryList))'); hile yapmalıdır. – zaffer

cevap

0

this; Benzer bir soruya cevap verdim ancak maalesef tavsiye sonuçları hakkında geri bildirim almadım. Bunu yapmaya çalışabilirsin, çünkü bunun aynı olduğunu düşünüyorum.

Bu sizin obj.colModel ayarlarında dataIndx alanın yoksun:

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

Sen modeliyle verilerinizi doğru bağlamak gerekir; veriler statik olduğunda önemli değil, dinamik bir kaynağa bağladığınızda yapmanız gerekir.