w2ui 网格从 api 获取记录

Question

这是我第一次尝试在我的项目中实现 w2ui 库。我有这段代码，正在尝试从远程 url;

获取记录

 <script type="text/javascript">
   $(function () {
    $('#grid').w2grid({
        name: 'grid',

      url:'http://api/payments.php',

       columns: [
        { field: 'name', caption: 'name', size: '30%' },

        { field: 'ref', caption: 'First Name', size: '30%' },
        { field: 'pay_date', caption: 'Last Name', size: '30%' },
        { field: 'amount', caption: 'Email', size: '40%' }


        ]

    });
});

api returns 这个 json 输出：

      [{"Key":"12;2TgBAACHBg==10;20897568710;","id":6,"amount":"50","pay_date":"2018-05-17T00:00:00Z","applicant_id":116,"paid_by":"sami","pay_type":"cash","ref":"NSC170621001","name":"Sekyi Quainoo"},{"Key":"12;2TgBAACHBw==10;20897569590;","id":7,"amount":"70","pay_date":"2018-05-17T00:00:00Z","applicant_id":119,"paid_by":"nii","pay_type":"cash","ref":"NSC170725119","name":"Adwoa Sam"}]

Answer 1

您需要更改返回的 JSON 以符合 w2ui 的预期。

The grid expects data in the JSON format from the server as it is described below. The JSON structure will be merged into the grid with jQuery.extend method. It means that you can return any supported grid property from the server and it will be applied.

{
    "status"  : "success",
    "total"   : 36,
    "records" : [
        { "recid": 1, "field-1": "value-1", ... "field-N": "value-N" },
        ...
        { "recid": N, "field-1": "value-1", ... "field-N": "value-N" }
    ]
}

来源：http://w2ui.com/web/docs/1.5/grid/overview#data-structures

w2ui 网格从 api 获取记录

w2ui grid getting records from api

javascript

plugins

w2ui