DataGrid

DataGrid將資料以表格的形式顯示，並提供資料編輯、新增、排序等功能。

用例

以<table> 為標記創建datagrid. 使用 <th> 標記定義中間的Column，grid所在class為info-datagrid.

<tr>

<th data-options="field:'CustomerID',width:80,

editor:{type:'validatebox', options:{required:'required'}}">客戶編號

</th>

<th data-options="field:'CompanyName',width:100,editor:'text'">公司名稱

</th>

</tr>

</thead>

<thead>

<tr

<th data-options="field:'ContactName',width:80,align:'right', editor:'text'">聯絡人

</th>

<th data-options="field:'ContactTitle',width:80,align:'right',editor:'text'">職稱

</th>

</tr>

</thead>

</table>

data-options

設定基本的easyui中的屬性。

名稱	功能描述
toolbar	設定定義工作條(新增、修改、刪除等按鈕)的div的id
pagination	True表示在grid上需要顯示頁碼工具條
view	設定為detailview時需配合infolight-options中EidtMode為Expand，grid前方會出現+用於展開。設定為commandview時，grid前方出現瀏覽、編輯以及刪除的按鈕。

Infolight-options

設置EEP提供屬性

名稱	功能描述
allowInsert	true表示允許新增
allowUpdate	true表示允許修改
allowDelete	true表示刪除
alwaysClose	True表示首次打開畫面時，不取得資料
autoApply	是否自動存檔,true表示自動保存
commandButtons	顯示瀏覽、編輯以及刪除button分別以‘v’,‘u’,‘d’按順序顯示，也可不設定某個按鈕。如：‘ud’表示顯示修改與刪除按鈕。
duplicateCheck	True表示進行重復性檢查
editMode	設置grid的編輯模式，Dialog表示彈跳視窗模式；Expand表示展開模式；Switch表示換頁顯示；Continued表示同頁顯示模式
editDialog	配合editMode設定顯示新增、編輯時的div。格式：#Div的id
tableName	設定實際連接的InfoCommand的名稱
onDelete	在按下刪除按鈕時，觸發的js方法名稱
onInsert	在按下新增按鈕時，觸發的js方法名稱
onUpdate	在按下修改按鈕時，觸發的js方法名稱
parent	在MasterDetail時，設定detail對應的Master顯示的div的id。
parentRelations	設定主檔和明細檔的關係。格式：[{field:'Detail關聯欄位',parentField:'Master關聯欄位'}]

	若有多個關聯欄位，每組關聯以{}為單位以,分隔
queryAutoColumn	True表示可以在Grid的Column下方顯示TextBox，對每個欄位可進行查詢
queryDialog	設定查詢畫面的div。格式：#查詢Div的id
remoteName	設定連接的Server端以及對應取資料的InfoCommand。格式：server專案名稱.連接的InfoCommand的ID(多檔情況下為Master的infoCommand的ID)
totalCpation	加縂標題名稱

Top of Page