Question

我的JQXGrid正在使用JSON正确加载。我已经确认在每一步都是有效和正确的数据。我有一个简单的查询，从SQL数据库加载所有记录并将它们放在JQXGrid中。 db只有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

我确认发送到JQXGrid的JSON既有效又正确。 JSON包含1行数据。该表使用正确的行数呈现，但整行为空。请提出建议或意见。

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 - 显示为空行的有效数据

1 个答案: