```
interface IRazorPageSet {
saveApi: string, //保存的時候使用的action名稱,默認為put
title: string,
}
class RazorPage
/*
title:頁面標題文字,新增的時候會顯示新增+title ,編輯的時候顯示 編輯+ title 查看則是查看+title
api :頁面默認需要使用的controller的名字,我們一般使用@(this.ApiName)來聲明,避免拼寫錯誤
idName:當前頁面操作的實體默認的主鍵字段名,我們一般用@(this.IdName)來聲明,避免拼寫錯誤
*/
constructor(title: string, api: string, idName: string, set: IRazorPageSet)
```
這是后臺增刪改查頁面的主要插件,用來管理列表和詳情頁的切換,并實現一些通用的業務邏輯。
插件以$.SailConfig.PageContent中定義的class為頁面根節點,并設置為RazorPage.content屬性,
很多事件都定義在這個節點上。并且在content中找尋.toolbar class 把#toolbar的內容 放到.toolbar
中。
插件定義了如下結構
* #divList
* #btnAdd
* .toolbar
* #toolbar
* #divDetail (對應RazorPage.$form)
* .form-body
* (js生成) #divViewer (對應RazorPage.$Viewer)
* (js生成) #divEditor (對應RazorPage.$Editor)
目前我們定義頁面上最多只能有一個RazorPage插件,在插件聲明初始化后,會觸發body的事件
[pageInit.after],并把RazorPage實例作為參數傳遞過去,同時有個全局變量,Sail.RazorPage.Default會保存這個實例的對象。
插件初始化的時候是列表狀態。插件的幾種狀態如下:
√表示顯示
×表示隱藏
| 狀態 | #divList | #divDetail | #divViewer | #divEditor |
| --- | --- | --- | ---| ---| ----|
|列表| √ | × | × | × |
|新增| × | √ | × | √ |
|編輯| × | √ | × | √ |
|查看| × | √| √ | × |
其中$Viewer和$Editor的內容分別由 [#viewTmpl] 和 [#modalTmpl]的模板內容決定。
$Viewer 模板中如果定義了 .btnToEdit 會實現從查看頁面跳轉倒編輯頁面的功能
$Editor 模板中如果定義了 .btnToView 會實現從編輯頁面跳轉倒查看頁面的功能
如果#divList中含有#btnAdd, 則點擊后會切換到新增狀態,對#divEditor執行ResetForm 并會觸發after.Add事件。
一些方法:
* SetTitle(title:string) 設置頁面標題文字
* SetFormTitle(title:string) 設置表單上的標題文字
* GetApi(name:string) 獲取api的url
* GetDataId(obj: Object) 根據定義的IdName獲取傳入對象的主鍵值
* Cancel() 取消詳情頁,從新增、編輯、查看等狀態切換到列表狀態,同時觸發after.Cancel事件
* ToEdit() 根據當前選擇對象的內容切換到編輯頁面,并觸發after.Edit事件
* ToView() 根據當前選擇對象的內容切換到查看頁面,并觸發after.View事件
* Add() 切換到新增頁面,并觸發after.Add事件
* EditAct(data: Object, page: Pagination, obj: JQuery) 觸發編輯事件,參數依次是實體對象、分頁插件、觸發事件的jquery對象
* ViewAct(data: Object, page: Pagination, obj: JQuery) 觸發查看事件,參數依次是實體對象、分頁插件、觸發事件的jquery對象
* Save(btn: JQuery) 保存事件,保存前會觸發PreSave函數,如果定義了則會在PreSave函數之中對數據進行修改,保存成功會觸發after.Save事件
* CreatePage(param: Sail.IPaginationSetting) 創建關聯的分頁插件,用于列表事件的顯示,具體使用參考表格插件,默認 getPostKey() 為 { return $("#toolbar").GetJson(); } ,HandleName為tool.GetApi("getlist"),并且會注冊如下事件:
* .btnView 觸發查看
* .btnEdit 觸發編輯
* .btnRemove 觸發刪除
* .btnAct 觸發ajax post事件,action是data-act定義的,參數為當前實體的主鍵值
* PreSave(form:jquery,model:object) 這個方法需要重寫,用來驗證提交的model正確性或重新組織數據。最后必須返回一個對象,否則會阻止觸發保存事件。傳入的參數分別是#divEditor和獲得的Json對象實例