easyUI中如何使用datagrid

datagrid是数据列表的意思，是easyUI框架中最常见的功能之一，它能实现php程序代码与phpmyadmin数据库的结合。现在，我们以【Dreamweaver+wampserver】工具设计实例，来看看在easyUI中如何使用datagrid。

操作方法

01

创建文件双击Dreamweaver软件图标，打开软件，点击菜单栏中的【文件】--【新建】--【创建HTML文档】。

02

引入4个js文件首先在站点中导入【easyUI】文件夹，然后在文件夹中找到如下代码，导入到文件中的head头部内。具体的js代码如下所示，要在easyUI文件夹找到然后拖动到head中，以下只是给出参考。

03

下载EasyUI+1.3+中文帮助手册我们软件工程的各门语言几乎都有一个帮助手册，可以在网上进行下载即可。

04

手册中的数据表格打开easyUI帮助手册，找到【数据表格-datagrid】里面有datagrid的相关解析。

05

复制复制手册里面的【通过

06

创建json文件我们再创建food.json文件，在文件类型是找不到json后缀名的文件的，因此我们可以先创建一个【CSS】文件，然后在保存该文件的时候，将其后缀名更改为json。

07

更改【datagrid.html】的代码datagrid的url值指向【food.json】。即url:'food.json'。

08

填写json文件的内容[{"code":"01","name":"苹果","price":2.5},{"code":"02","name":" 葡萄","price":6.8}]

09

运行结果启动wampserver服务器，点击Dreamweaver里面的【地球图标】--【在浏览器上运行】，即可显示效果。