easyui 表格 json—代码示例

EasyUI 是一款基于 jQuery 的开源 JavaScript 库，它提供了一套简单易用的界面组件，其中包括了表格组件。当我们使用 EasyUI 表格组件时，可以通过 JSON 数据来填充表格的内容。

我们需要准备一个 JSON 数据，该数据包含了表格的列和行数据。列数据用于定义表格的列名和属性，行数据则用于填充表格的每一行。下面是一个示例的 JSON 数据：

var data = {
  "total": 3,
  "rows": [
    {
      "id": 1,
      "name": "John Doe",
      "age": 25,
      "gender": "Male"
    },
    {
      "id": 2,
      "name": "Jane Smith",
      "age": 30,
      "gender": "Female"
    },
    {
      "id": 3,
      "name": "Tom Brown",
      "age": 35,
      "gender": "Male"
    }
  ]
};

接下来，我们可以使用 EasyUI 的表格组件来展示这个 JSON 数据。我们需要在 HTML 页面中定义一个 `<table>` 元素，并给它一个唯一的 ID，以便 EasyUI 可以通过该 ID 来初始化表格。然后，我们可以使用 `datagrid` 方法来初始化表格，并通过 `data` 属性将 JSON 数据传递给表格组件。下面是一个示例代码：

<table id="datagrid"></table>

$("#datagrid").datagrid({
  data: data.rows,
  columns: [[
    { field: 'id', title: 'ID' },
    { field: 'name', title: 'Name' },
    { field: 'age', title: 'Age' },
    { field: 'gender', title: 'Gender' }
  ]]
});

通过以上代码，我们成功地使用 EasyUI 的表格组件展示了 JSON 数据。表格的列名和属性是通过 `columns` 属性定义的，其中每个列由一个对象表示，对象中的 `field` 属性表示列的属性名，`title` 属性表示列的标题。表格的行数据则通过 `data` 属性传递给表格组件。

总结一下，我们可以通过 EasyUI 的表格组件和 JSON 数据来创建一个简单的表格。我们需要准备一个包含列和行数据的 JSON 对象，然后在 HTML 页面中定义一个 `<table>` 元素，并使用 EasyUI 的 `datagrid` 方法来初始化表格，并将 JSON 数据传递给表格组件。通过 `columns` 属性定义表格的列名和属性，通过 `data` 属性传递行数据给表格组件。