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）個人看法，僅供參考；