jsGrid 正在加载带有空单元格的行

Question

程序员们大家好。我对 jsGrid 有点问题。我正在尝试从 Spring MVC 控制器将数据加载到 jsGrid 中。它将所有行加载到 table，但单元格是空白的，我不知道为什么。让我告诉你...

这是我的 jsGrid 设置：

$('#transactionTable').jsGrid({
    width: '100%',
    height: '600px',

    autoload: true,
    loadIndication: true,
    loadMessage: 'Loading transactions...',
    loadShading: true,
    inserting: false,
    editing: false,
    sorting: true,
    paging: true,

    fields: [
        { name: 'Id', type: 'text', width: 120, align: 'center' },
        { name: 'Amount', type: 'text', width: 250, align: 'center' },
        { name: 'Category', type: 'text', width: 120, align: 'center' },
        { name: 'Transaction Date', type: 'text', width: 100, align: 'center' }
    ],

    noDataContent: 'No Transactions',

    controller: {
        loadData: function (filter) {
            return $.ajax({
                method: 'GET',
                url: '/api/v1/transactions',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('#token').val()
                },
                data: filter
            });
        }
    }
})

这是我从 ajax 电话中获得的示例响应：

[{"id": 97522428, "amount": 38146.51, "category": "Other Income", "transactionDate": "2020-02-06"}]

以上回复只有 1 个项目，实际上有 500 个结果，因此 table 中的条目数量。

这是 table 加载数据后的样子： Table

所以你可以看到它确实加载了所有行，但是单元格是空的... 我按照他们的文档进行了操作，并且在互联网上进行了广泛的搜索，但找不到答案。以前有人遇到过这个问题吗？

Answer 1

我遇到了同样的问题，并自己制定了解决方案。线索在于您从 ajax 调用中获得的示例响应。所以，解决方案是 - 尝试将您的字段定义更改为 -

 fields: [
        { name: 'id', type: 'text', width: 120, align: 'center' },
        { name: 'amount', type: 'text', width: 250, align: 'center' },
        { name: 'category', type: 'text', width: 120, align: 'center' },
        { name: 'transactionDate', type: 'text', width: 100, align: 'center' }
    ],

如果要显示header不同-

使用'title'

 fields: [
        { name: 'id', title='ID', type: 'text', width: 120, align: 'center' },
        { name: 'amount', title='Amount', type: 'text', width: 250, align: 'center' },
        { name: 'category', title='Category', type: 'text', width: 120, align: 'center' },
        { name: 'transactionDate', title='Transaction Date', type: 'text', width: 100, align: 'center' }
    ],

我不确定为什么将名称更改为 'id' 或 'transactionDate'，尽管（我假设）您的控制器 returns 'Id' 和 'TransactionDate'。

jsGrid 正在加载带有空单元格的行

jsGrid is loading rows with empty cells

spring-mvc

jsgrid