.Net MVC - JQXGrid - 有效數據顯示爲空白行

Question

我的JQXGrid正在使用JSON正確加載。我已經證實，在每一步數據都是有效和正確的。我有一個簡單的查詢，從SQL數據庫加載所有記錄並將它們放入JQXGrid中。數據庫只有1個元素（用於測試目的）。

您可以在該網格具有要素：（1）適當數量的分頁程序見。我突出了表中存在的唯一一行。在每一列中，數據都顯示爲空白（再次，我已確認數據是正確的）。我也確認這些數據字段是正確的。

JQXGrid：

<script type="text/javascript"> 

$("#txtSearch").bind("keypress", {}, keypressInBox); 

function keypressInBox(e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 13) { //Enter keycode 
     e.preventDefault(); 

     loadGrid(); 
    } 
}; 

$(document).ready(function() { 

    loadGrid(); 

}); 

function loadGrid() { 
    var search = $("#txtSearch").val(); 

    var url = "/AIR/GetAIRs/?search=" + search; 

    // prepare the data 
    var source = 
    { 
     datatype: "json", 
     datafields: [ 

      { text: 'EditLink', type: 'string'}, 
      { text: 'emissionUnit', type: 'string' }, 
      { text: 'emissionDesc', type: 'string' }, 
      { text: 'Process', type: 'string' }, 
      { text: 'ProcessDescription', type: 'string' }, 
      { text: 'Buildings', type: 'string' }, 
      { text: 'LastUpdateDate', type: 'date' }, 

      { text: 'DeleteLink', type: 'string' } 
], 
     url: url, 
     pager: function (pagenum, pagesize, oldpagenum) { 
      // callback called when a page or page size is changed. 
     } 
    }; 

    var dataAdapter = new $.jqx.dataAdapter(source); 
    $("#jqxgrid").jqxGrid(
    { 
     width: '100%', 
     source: dataAdapter, 
     selectionmode: 'multiplerowsextended', 
     sortable: true, 
     pageable: true, 
     filterable: true, 
     filtermode: 'excel', 
     autoheight: true, 
     columnsheight: 45, 
     columnsresize: true, 
     autorowheight: true, 
     pagerheight: 60, 

     columns: [ 
      { text: "", datafield: "EditLink", width: 80 }, 
      { text: "Emission Unit", datafield: "emissionUnit", width: 125 }, 
      { text: "Emission Description", datafield: "emissionDesc", width: 200 }, 
      { text: "Process", datafield: "Process", width: 125 }, 
      { text: "Process Description", datafield: "ProcessDescription", width: 200 }, 
      { text: "Buildings", datafield: "Buildings", width: 150 }, 
      { text: "Last Update Date", datafield: "LastUpdateDate", cellsformat: 'd', width: 150 }, 

      { text: "", datafield: "DeleteLink", width: 80 } 

     ] 
    }); 
}; 

型號：

public class EmissionUnitMatrixModel 
{ 
    [Key] 
    [DisplayName("EmissionUnitMatrixID")] 
    public int EmissionUnitMatrixID { get; set; } 
    [DisplayName("EmissionUnitLookupID")] 
    public int? EmissionUnitLookupID { get; set; } 
    [DisplayName("ProcessID")] 
    public int? ProcessID { get; set; } 
    [DisplayName("LastUpdateDate")] 
    public DateTime? LastUpdateDate { get; set; } 
    [DisplayName("LastUpdateBy")] 
    public string LastUpdateBy { get; set; } 
    [DisplayName("CreatedDate")] 
    public DateTime? CreatedDate { get; set; } 
    [DisplayName("CreatedBy")] 
    public string CreatedBy { get; set; } 
    [DisplayName("Active")] 
    public bool? Active { get; set; } 
    public string ActiveText { get; set; } 
    public string EditLink { get; set; } 
    public string DeleteLink { get; set; } 
    public string ProcessDescription { get; set; } 
    public string Process { get; set; } 
    public string emissionUnit { get; set; } 
    public string Buildings { get; set; } 
    public string emissionDesc { get; set; } 

} 

控制器：

 public JsonResult GetAIRs(string search) 
    { 
     var surveys = dashboardService.GetAIRList(); 
     var json = Json(surveys, JsonRequestBehavior.AllowGet); 
     return json; 
    } 

DAL：

 public List<EmissionUnitMatrixModel> GetAIRList() 
    { 


     var query = emuserivce.GetAll(); 



     return query.ToList(); 
    } 

TL; DR

我證實，JSON被髮送到我的JQXGrid既有效和正確的。 JSON包含1行數據。該表格使用正確的行數進行呈現，但整行都是空白的。請諮詢建議或想法。

Answer 1

我在您的javascript源代碼部分看到一個問題。根據關於將json數據綁定到網格的article，datafields的每個成員應具有name和可選的type。但在您的實施中，您有text代替name。

所以它應該是這樣的：

// prepare the data 
    var source = 
    { 
     datatype: "json", 
     datafields: [  
      { name: 'EditLink', type: 'string'}, 
      { name: 'emissionUnit', type: 'string' }, 
      { name: 'emissionDesc', type: 'string' }, 
      { name: 'Process', type: 'string' }, 
      { name: 'ProcessDescription', type: 'string' }, 
      { name: 'Buildings', type: 'string' }, 
      { name: 'LastUpdateDate', type: 'date' },  
      { name: 'DeleteLink', type: 'string' } 
     ], 
     url: url, 
     pager: function (pagenum, pagesize, oldpagenum) { 
      // callback called when a page or page size is changed. 
     } 
    };