Dwz手冊的補充說明和常見問題

1、我如何在項目中使用dwz?

手冊中有如下說明:

設計思路
第一次打開頁面時載入界面到客戶端, 之後和服務器的交互只是數據交互, 不佔用界面相關的網絡流量.

支持HTML擴展方式來調用DWZ組件.

標準化Ajax開發, 降低Ajax開發成本.

 

也就是說,只需要在一個頁面(通常是起始頁,如index.aspx/index.php)包含框架,這裏的框架是指demoindex.html頁面的所有元素(<div class=”page”可自定義),完整的html結構。其它的頁面只需要頁面碎片,就是<body></body>中的部分。

2、怎樣初始化dwz

Dwz是通過init函數初始化,index.html的初始化函數如下:

DWZ.init("dwz.frag.xml", {
//        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的工作方式,認爲dwznavTab的頁面看起來是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”屬性,這樣點擊該表頭才能出發提交事件。Thclass=”asc”/class=”desc”會分別顯示向上和向下的箭頭,這個不是隻顯示這麼簡單,往下看。

3、      pageForm加上orderFieldorderDirection,點擊排序後提交的依然是pagerFormorderField會綁定點擊的thorderField,而orderDirection則會反向綁定thclass,這是dwz智能的地方,也就是你不用手動記住狀態來反向(感謝細心的作者),class=”asc”就會提交orderDirection = desc。注意每次要將orderDirection綁定回thclass

8、如何使用table和css table的分頁功能?

       分頁功能是大家用得比較多,也是不容易理解的一點。這裏我憑着自己的理解給初學者講講。

       手冊上講得很清楚,dwz不是客戶端分頁,而是服務器端分頁,結合本文第3點可以知道dwz的分頁就是每次將分頁數據提交回後臺,後臺生成分頁數據顯示到頁面上。需要注意的是以下幾點:

1、 分頁只需要pagerFormpagination兩個dwz組件,點擊分頁提交的是pagerForm

2、 pagerForm用於帶查詢的分頁數據的緩存,說緩存是因爲這裏的參數都需要自己手動從後臺讀取綁定(pageNum除外)。

3、 Pagination可以理解爲一個頁碼生成器,他需要totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"幾個參數來顯示,每次後臺需要綁定這幾個參數,dwz不會幫你做什麼事情,也就是你想他顯示第幾頁就是第幾頁。

4、 點擊分頁,dwzpaginationcurrentPage綁定到pagerFormpagerNum,然後提交pagerForm到後臺。

5、 初學者可以做這件事情來幫助理解:頁面只放pagerForm和一個divpaginationdiv每次顯示當前的pageNumpagination,點擊分頁來好好體驗以下這個過程,這對第三點的理解也有幫助。

9、如何使用輸入表單客戶端驗證?

客戶端表單驗證也是手冊上的js庫介紹中的dwz.regional.zh.js一節有介紹。結合demo中的demo_page4.html,簡單明瞭。

10、如何使用combox的ajax聯動?

手冊上提及的聯動方式,稍微擴展一下就可以達到ajax聯動的目的。在selectchange時間中,根據當前選擇請求下一級的數據就可以了。注意要使用同步ajax方式。

11、如何做局部刷新?

1.3版中已經具有局部刷新功能,手冊解釋如下:

DWZ局部刷新怎樣做?
API調用方式:

$(
"#xxxId").loadUrl(url,data, callback);

html擴展鏈接方式:

<a href="url" target="ajax" rel="xxxId"></a>

 

1.2版可用loadUrl方式。

 

12、如何去掉dwz調用ajax方法出現的等待圖片

這是作者給出的解決方式:

dwz.ui.js 

var ajaxbg 
= $("#background,#progressBar");
ajaxbg.hide();
$(document).ajaxStart(function(){
ajaxbg.show();
}).ajaxStop(function(){
ajaxbg.hide();
});

 

也可以把自己的$.ajaxgloble設置爲false來屏蔽ajaxStart方法。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章