.Net MVC - JQXGrid - 显示为空白行的有效数据

Question

我的 JQXGrid 正在使用 JSON 正确加载。我已经确认在每一步中数据都是有效和正确的。我有一个简单的查询，它从 SQL 数据库加载所有记录并将它们放在 JQXGrid 中。数据库只有 1 个元素（用于测试目的）。

您可以在分页器中看到网格具有正确数量 (1) 的元素。我突出显示了 table 中存在的唯一行。在每一列中，数据显示为空白（我再次确认数据是正确的）。我还确认了数据字段是正确的。

JQX网格：

 <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;
    }

达尔：

        public List<EmissionUnitMatrixModel> GetAIRList()
    {


        var query = emuserivce.GetAll();



        return query.ToList();
    }

TL;DR

我确认发送到我的 JQXGrid 的 JSON 有效且正确。 JSON 包含 1 行数据。 table 以正确的行数呈现，但整行都是空白的。请提出建议或想法。

Answer 1

我发现您的 javascript 源代码部分存在问题。根据他们的 article 将 json 数据绑定到网格，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.
        }
    };

.Net MVC - JQXGrid - 显示为空白行的有效数据

.Net MVC - JQXGrid - Valid data displaying as Blank Rows

c#

asp.net

jqxgrid

.Net MVC - JQXGrid - 显示为空白行的有​​效数据

.Net MVC - JQXGrid - Valid data displaying as Blank Rows

c#

asp.net

jqxgrid

.Net MVC - JQXGrid - 显示为空白行的有效数据