使用 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

来自网站：

如果数据是本地的，网格将执行本地排序。如果数据是 远程，网格会将排序字段提交到服务器端。

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

您有两个选择：

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