1、我如何在項目中使用dwz?
手冊中有如下說明:
第一次打開頁面時載入界面到客戶端, 之後和服務器的交互只是數據交互, 不佔用界面相關的網絡流量.
支持HTML擴展方式來調用DWZ組件.
標準化Ajax開發, 降低Ajax開發成本.
也就是說,只需要在一個頁面(通常是起始頁,如index.aspx/index.php)包含框架,這裏的框架是指demo中index.html頁面的所有元素(<div class=”page”可自定義),完整的html結構。其它的頁面只需要頁面碎片,就是<body></body>中的部分。
2、怎樣初始化dwz?
Dwz是通過init函數初始化,index.html的初始化函數如下:
// loginUrl:"loginsub.html", loginTitle:"登錄", // 彈出登錄對話框
loginUrl:"login.html", // 跳到登錄頁面
statusCode:{ok:200, error:300, timeout:301}, //【可選】
pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可選】
debug:false, // 調試模式 【true|false】
callback:function(){
initEnv();
$("#themeList").theme({themeBase:"themes"});
}
});
Dwz.init(pathToDwz_frag_xml, options);
pathToDwz_frag_xml: js方式能訪問到的dwz.frag.xml,一定要保證通過這個地址能訪問到dwz.frag.xml文件,最好用serverPath+dwz.frag.xml的絕對路徑方式。
Options是一個對象方式的參數:
loginUrl:當ajax 的json返回timeout的時候會跳轉到此頁面
statusCode:自定義的json錯誤代碼,如果不指定將使用圖片所示的默認規則。
pageInfo:這裏可以爲pagerForm指定別名,比如pageNum:”currentPage”。
Callback:指定初始化完成後的回調函數。有人問如何在打開dwz的時候在我的主頁加載另一個頁面或者打開一個navTab,就可以在callback裏使用navTab.open(“main”), $.pdialog.open等等。
3、我如何解析json數據來重繪表格/頁面?
很多人不明白dwz的工作方式,認爲dwz的navTab的頁面看起來是ajax方式解析的,那就要從服務器傳回json再手動解析。Dwz事實上就是這樣工作的,只是他傳回的不是一部分數據,而是整個頁面,然後通過loadUrl加載到navTab上,這個過程對使用者是透明的,也即你不需要關心頁面的數據處理,以前怎麼寫的頁面,現在還是怎麼寫頁面。Dwz會將普通請求轉換爲ajax方式(前提是正確使用dwz提供的接口)。
4、如果不是傳輸數據,dwz的json是用於哪裏?
Dwz的服務器端響應上提到一個服務器端響應json,很多初學者問這個json如何傳遞數據,用於自己拼接頁面等。如第3點所說,dwz的頁面是不需要手動處理ajax的,這個json結構是對打開navTab,dialog, ajax表單提交、ajax post鏈接(ajaxTodo)狀態的響應,而不涉及具體的頁面數據。
5、提交表單或者ajax post鏈接後,如何刷新本navTab?
一定要記住在返回的json中加上要刷新的navTabId。
6、如何在ajax連接擴展中使用回調函數?
手冊上沒有寫,其實從1.2RC1開始,ajax link就有了callback屬性,用於指定回調函數,如<a target=”ajaxTodo” callback=”MyOwnFunction”。
7、如何使用table和css table的排序功能?
Table的排序功能是手冊中沒有提到的,其實dwz的排序功能相當強大,這裏我簡單介紹一下流程:
1、 給要排序的表格<table中加上asc=”asc” desc=”desc”,指定排序別名。
2、 給要排序的表格表頭th加上orderField=”fieldName”屬性,這樣點擊該表頭才能出發提交事件。Th的class=”asc”/class=”desc”會分別顯示向上和向下的箭頭,這個不是隻顯示這麼簡單,往下看。
3、 在pageForm加上orderField和orderDirection,點擊排序後提交的依然是pagerForm,orderField會綁定點擊的th的orderField,而orderDirection則會反向綁定th的class,這是dwz智能的地方,也就是你不用手動記住狀態來反向(感謝細心的作者),class=”asc”就會提交orderDirection = desc。注意每次要將orderDirection綁定回th的class。
8、如何使用table和css table的分頁功能?
分頁功能是大家用得比較多,也是不容易理解的一點。這裏我憑着自己的理解給初學者講講。
手冊上講得很清楚,dwz不是客戶端分頁,而是服務器端分頁,結合本文第3點可以知道dwz的分頁就是每次將分頁數據提交回後臺,後臺生成分頁數據顯示到頁面上。需要注意的是以下幾點:
1、 分頁只需要pagerForm與pagination兩個dwz組件,點擊分頁提交的是pagerForm。
2、 pagerForm用於帶查詢的分頁數據的緩存,說緩存是因爲這裏的參數都需要自己手動從後臺讀取綁定(pageNum除外)。
3、 Pagination可以理解爲一個頁碼生成器,他需要totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"幾個參數來顯示,每次後臺需要綁定這幾個參數,dwz不會幫你做什麼事情,也就是你想他顯示第幾頁就是第幾頁。
4、 點擊分頁,dwz將pagination的currentPage綁定到pagerForm的pagerNum,然後提交pagerForm到後臺。
5、 初學者可以做這件事情來幫助理解:頁面只放pagerForm和一個div和pagination,div每次顯示當前的pageNum和pagination,點擊分頁來好好體驗以下這個過程,這對第三點的理解也有幫助。
9、如何使用輸入表單客戶端驗證?
客戶端表單驗證也是手冊上的js庫介紹中的dwz.regional.zh.js一節有介紹。結合demo中的demo_page4.html,簡單明瞭。
10、如何使用combox的ajax聯動?
手冊上提及的聯動方式,稍微擴展一下就可以達到ajax聯動的目的。在select的change時間中,根據當前選擇請求下一級的數據就可以了。注意要使用同步ajax方式。
11、如何做局部刷新?
1.3版中已經具有局部刷新功能,手冊解釋如下:
API調用方式:
$("#xxxId").loadUrl(url,data, callback);
html擴展鏈接方式:
<a href="url" target="ajax" rel="xxxId"></a>
1.2版可用loadUrl方式。
12、如何去掉dwz調用ajax方法出現的等待圖片
這是作者給出的解決方式:
var ajaxbg = $("#background,#progressBar");
ajaxbg.hide();
$(document).ajaxStart(function(){
ajaxbg.show();
}).ajaxStop(function(){
ajaxbg.hide();
});
也可以把自己的$.ajax的globle設置爲false來屏蔽ajaxStart方法。