javascript - 使用 json 内容对网格进行排序

Question

我正在使用 w2ui w2ui.com用于显示网格。当网格记录本地存储在 html 文件中时，排序工作正常。

但我想在 json 文件上动态使用此函数。

我有这个 json 文件 (test.json):

{
    total: 9,
    page: 0,
    records: [
        { recid: 11, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 12, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 13, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 14, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 15, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 16, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 17, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 18, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 19, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
    ]
}

我使用以下代码将其加载到网格中:

$('#grid-customers').w2grid({ 
    name: 'grid-customers',
    url: 'data/test.json',

    columns: [              
        { field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center' },
        { field: 'lname', caption: 'Last Name', size: '30%', sortable: true },
        { field: 'fname', caption: 'First Name', size: '30%', sortable: true },
        { field: 'email', caption: 'Email', size: '40%' },
        { field: 'sdate', caption: 'Start Date', size: '120px' },
    ]

});

但我无法对其进行排序或搜索网格内的内容。每次当我单击网格标题(用于列排序)时，我都会看到排序箭头和一个名为“正在刷新...”的弹出窗口，但列没有得到排序。

Answer 1

来自网站:

If data is local, the grid will perform local sorting. If data is remote, the grid will submit sort fields to the server side.

这意味着如果您使用 url 属性从外部源(甚至是静态文件)加载数据， 插件将尝试向远程源发送排序命令并期待它做这项工作。

您有两个选择:

1. 将数据移动到您正在处理的页面以允许本地排序
2. 使用服务器支持的页面，该页面可以接收排序命令并返回以插件期望的方式格式化的数据