easyui datagrid loaddata用法

easyui datagrid loaddata用法
EasyUI是一个非常出色的JavaScript UI库，可以帮助程序员创建美观、易用的Web界面。

其中，EasyUI datagrid是其最为重要的组件之一，用于展示大量数据。

在使用过程中，loaddata是常用的一种方法，下面将详细介绍其使用方法。

1. 引入EasyUI和jQuery库
在使用EasyUI datagrid之前，需要先引入其依赖的EasyUI和jQuery库。

可以从官网下载相应版本的.easyui.js和.jquery.min.js 文件，并引入到HTML页面中。

2. 创建datagrid元素
接下来，需要在HTML页面中创建一个datagrid元素，并定义好其一些基础属性，如列名、列宽、行高等。

这里的例子中，我们创建
一个id为dg的datagrid元素，有3列，分别为id、name和age。

代码示例：
<div id="dg" class="easyui-datagrid" style="width: 500px; height: 300px;"
url="get_data.php" toolbar="#toolbar" pagination="true" rownumbers="true"
fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="id" width="50">ID</th>
<th field="name" width="50">Name</th>
<th field="age" width="50">Age</th>
</tr>
</thead>
</div>
这里，url属性用于定义datagrid需要从服务器获取数据的URL
地址；toolbar属性用于指定datagrid上方的工具栏；pagination和rownumbers属性用于开启分页和行号功能；fitColumns属性用于让列自适应容器宽度；singleSelect属性表示只能选择一行数据。

3. 定义数据格式
在使用loaddata方法之前，需要先定义好需要加载的数据格式。

EasyUI datagrid的数据格式通常为JSON数组格式，如下：data = [
{"id":1,"name":"John","age":18},
{"id":2,"name":"Mary","age":20},
{"id":3,"name":"Tom","age":22}
]
其中，每一项数据的各字段名必须与datagrid的列名一一对应。

4. 调用loaddata方法
在定义好数据格式之后，就可以使用loaddata方法将数据加载到datagrid中了。

loaddata方法需要传入一个数据格式的参数，即上一步中定义的JSON数组。

代码示例：
$('#dg').datagrid('loadData', data);
其中，'#dg'是即代表datagrid元素的CSS选择器，loadData是EasyUI datagrid提供的一种数据加载方法，data是指在前一步中定义好的数据格式。

至此，我们就成功的使用了loaddata方法将数据加载到了EasyUI datagrid组件中。

有了这种方法，我们就能方便的通过Ajax 等方式从后端获取数据，并展示在页面中。