easyUI中如何使用datagrid

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

操作方法

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

（02）引入4个js文件首先在站点中导入【easyUI】文件夹，然后在文件夹中找到如下代码，导入到文件中的head头部内。具体的js代码如下所示，要在easyUI文件夹找到然后拖动到head中，以下只是给出参考。<script type="text/javascript" src="easyui/"></script><script type="text/javascript" src="easyui/"></script><link rel="stylesheet" type="text/css" href="easyui/themes/"/><link rel="stylesheet" type="text/css" href="easyui/themes/default/"/>

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

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

（05）复制复制手册里面的【通过<TABLE>标记创建的DataGrid】到Dreamweaver文件中的body主体里面。

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

（07）更改【】的代码datagrid的url值指向【】。即url:''。

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

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

特别提示

（1）easyUI中的datagrid主要是显示数据列表的；<br/>（2）个人看法，仅供参考；