easyui如何读到json数据

EasyUI 读取 JSON 数据的完整指南

EasyUI 是一个基于 jQuery 的前端框架，它提供了丰富的 UI 组件和便捷的数据交互方式，在实际开发中，我们经常需要从服务器端获取 JSON 数据并在 EasyUI 组件中展示，本文将详细介绍如何使用 EasyUI 读取和解析 JSON 数据。

EasyUI 读取 JSON 数据的基本方法

使用 $.ajax 获取 JSON 数据

最基础的方式是通过 jQuery 的 $.ajax 方法从服务器获取 JSON 数据，然后将数据传递给 EasyUI 组件。

$.ajax({
    url: 'your-data-url', // 服务器端接口地址
    type: 'GET', // 请求方法
    dataType: 'json', // 预期服务器返回的数据类型
    success: function(data) {
        // 成功获取数据后的处理
        $('#datagrid').datagrid('loadData', data);
    },
    error: function(xhr, status, error) {
        // 错误处理
        $.messager.alert('错误', '获取数据失败: ' + error);
    }
});

使用 EasyUI 的 datagrid 组件加载 JSON 数据

datagrid 是 EasyUI 中最常用的数据展示组件，可以直接加载 JSON 数据。

$('#datagrid').datagrid({
    url: 'your-data-url', // 服务器端接口地址
    method: 'get', // 请求方法
    columns: [[
        {field: 'id', title: 'ID', width: 100},
        {field: 'name', title: '名称', width: 100},
        {field: 'price', title: '价格', width: 100}
    ]],
    pagination: true, // 启用分页
    rownumbers: true, // 显示行号
    fitColumns: true, // 自适应列宽
    loadMsg: '正在加载数据，请稍候...', // 加载提示
    onLoadSuccess: function(data) {
        // 数据加载成功后的回调
        console.log('数据加载成功', data);
    },
    onLoadError: function() {
        // 数据加载失败后的回调
        $.messager.alert('错误', '数据加载失败');
    }
});

服务器端返回的 JSON 数据格式

EasyUI 对服务器返回的 JSON 数据格式有特定要求，通常有两种格式：

简单格式（直接返回数据数组）

[
    {"id": 1, "name": "商品1", "price": 100},
    {"id": 2, "name": "商品2", "price": 200},
    {"id": 3, "name": "商品3", "price": 300}
]

标准格式（包含 total 和 rows）

{
    "total": 100,
    "rows": [
        {"id": 1, "name": "商品1", "price": 100},
        {"id": 2, "name": "商品2", "price": 200},
        {"id": 3, "name": "商品3", "price": 300}
    ]
}

total 表示总记录数，rows 表示当前页的数据数组，这种格式常用于分页场景。

处理分页和排序

当 datagrid 启用分页时，EasyUI 会自动向服务器发送分页参数：

$('#datagrid').datagrid({
    url: 'your-data-url',
    pagination: true,
    pageList: [10, 20, 30], // 每页记录数选项
    pageSize: 10, // 默认每页记录数
    queryParams: function(params) {
        // 自定义查询参数
        return {
            page: params.pageNumber,
            rows: params.pageSize,
            sort: params.sort,
            order: params.order
        };
    }
});

服务器端需要根据这些参数返回对应的数据和总记录数。

使用组合框（Combobox）加载 JSON 数据

除了 datagrid，EasyUI 的其他组件如 combobox 也可以加载 JSON 数据：

$('#combobox').combobox({
    url: 'your-data-url',
    valueField: 'id', // 值字段
    textField: 'name', // 显示字段
    method: 'get',
    panelHeight: 'auto', // 自动调整下拉框高度
    loadFilter: function(data) {
        // 可选的数据过滤处理
        return data;
    }
});

处理复杂 JSON 数据

当服务器返回的 JSON 数据结构与 EasyUI 组件要求的不匹配时，可以使用 loadFilter 进行转换：

$('#datagrid').datagrid({
    url: 'your-data-url',
    columns: [[
        {field: 'product_name', title: '产品名称', width: 100},
        {field: 'product_price', title: '产品价格', width: 100}
    ]],
    loadFilter: function(data) {
        // 将服务器返回的数据转换为 datagrid 需要的格式
        var rows = [];
        for(var i=0; i<data.length; i++){
            rows.push({
                product_name: data[i].name,
                product_price: data[i].price
            });
        }
        return {
            total: rows.length,
            rows: rows
        };
    }
});

使用 JSONP 跨域获取数据

当需要从不同域名的服务器获取数据时,可以使用 JSONP：

$('#datagrid').datagrid({
    url: 'http://another-domain.com/data?callback=?',
    method: 'get',
    columns: [[
        {field: 'id', title: 'ID', width: 100},
        {field: 'name', title: '名称', width: 100}
    ]],
    dataType: 'jsonp' // 指定使用 JSONP
});