如何在easyUI中的datagrid添加工具欄

easyUI是最常用的WEB前端開發框架之一，對於軟件工程專業的學生來説easyUI框架也是最容易學習的，如果連學習easyUI框架你都感覺到費勁的話，那麼説明你的學習方法有問題。而datagrid又是easyUI框架的常用組件，主要用來顯示數據表格，相當於div+css中的table。現在，我們來看看如何在easyUI中的datagrid上添加工具欄toolbar。

操作方法

（01）創建文檔雙擊桌面上的Dreamweaver圖標，打開軟件，在軟件界面上找到【文件】-->【新建】-->【HTML】類型，創建一個HTML類型的文檔。

（02）保存頁面並命名快捷鍵【ctrl+S】保存頁面，會彈出【保存位置】對話框，一般是保存在www裏面或者新建站點中。

（03）在【datag】文件中的head頭部引入4個js文件，前提是在站點中已經導入【easyUI文件夾】了。<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/"/>

（04）打開【easyUI幫助手冊】，找到數據表格【datagrid】位置，裏面有關於datagrid的解析和例子。我們以簡單的代碼為例。

（05）在HTML文件中的body部位，以<table>標記創建datagrid數據表格。其中,<th>表示列。<table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'datagrid_',fitColumns:true,singleSelect:true"> <thead> <tr> <th data-options="field:'code',width:100">Code</th> <th data-options="field:'name',width:100">Name</th> <th data-options="field:'price',width:100,align:'right'">Price</th> </tr> </thead> </table>

（06）更改代碼的信息首先更改下表格的大小，比如去掉寬度，然後把高度設置為250px。添加個標題title設置為信息表格，再添加個頭部圖標iconCls，和工具欄toolbar，toolbar先設置一個參數值為tool，然後在script中定義。

（07）在body下方添加個js代碼<script type="text/javascript"></script> 然後在js中定義tool。 var tools=[{ iconCls:'icon-add', text:'添加', handler:function(){alert('add')} },{ iconCls:'icon-save', text:'保存', handler:function(){alert('save')} }];

（08）在瀏覽器中的預覽方法在HTML文件中找到【地球圖標】-->【預覽在360se】在360瀏覽器中預覽，要是你的電腦中按安裝的是其他的瀏覽器也可以在對應的瀏覽器中預覽，沒有影響。

（09）預覽結果在瀏覽器中的顯示效果如下圖所示。點擊【添加】圖標與【保存】圖標，都會彈出消息對話框。

特別提示

為datagrid中添加工具欄toolbar非常常見，一般我們使用到數據表格的時候都會添加toolbar，而引用toolbar是在table中，定義工具欄則是在script腳本代碼中。要記得先定義再引用，否則瀏覽的時候會報錯。