當切換資料網格視圖(datagrid view)到 'detailview',使用者可以展開一行來顯示一些行的明細在行下面。這個功能允許您為防止在明細行面闆(panel)中的編輯表單(form)提供一些合适的布局(layout)。在本教程中,我們使用資料網格(datagrid)元件來減小編輯表單(form)所占據空間。
為了為資料網格(DataGrid)應用明細視圖,在 html 頁面頭部引入 'datagrid-detailview.js' 檔案。
我們使用 'detailFormatter' 函數來生成行明細内容。
在這種情況下,我們傳回一個用于放置編輯表單(form)的空的 <div>。
當使用者點選行展開按鈕('+')時,'onExpandRow' 事件将被觸發,我們将通過 ajax 加載編輯表單(form)。
調用 'getRowDetail' 方法來得到行明細容器,是以我們能查找到行明細面闆(panel)。
在行明細中建立面闆(panel),加載從 'show_form.php' 傳回的編輯表單(form)。
編輯表單(form)是從伺服器加載的。
show_form.php
調用 'saveItem' 函數來儲存一個使用者或者調用 'cancelItem' 函數來取消編輯。
決定要回傳哪一個 URL,然後查找表單(form)對象,并調用 'submit' 方法來送出表單(form)資料。當儲存資料成功時,折疊并更新行資料。
當取消編輯動作時,如果該行是新行而且還沒有儲存,直接删除該行,否則折疊該行。
jeasyui-app-crud3.zip