第六章 JQuery其他功能第六章 JQuery其他功能\6-8 DrillDown使用說明.

6-8 DrillDown使用說明.

在許多系統的資料呈現時,會希望藉由畫面中的某個欄位當作參數,去開啟另一個畫面或是報表,瀏覽該筆資料更細部的資訊作資料追蹤。

訊光將此功能包成元件的方式可與WebPageDataGrid搭配使用。

 

Step1> 準備需要用到的程式

l  兩支Server程式:sOrderssBasic,內容分別要有OrdersCustomers的資料表。作為表單的瀏覽畫面資料來源和DrillDown元件所需要的資料來源。

l  兩支WebpageDataGrid呈現資料的程式: wOrders(訂單資料)wCustomers(客戶資料)

l  一支Mobile的程式: MCustomers(Mobile客戶資料)

l  一支Report的程式: CustomerRpt(客戶報表)

drilldown0.png

Step1> wOrders(訂單資料)的設計畫面上,將DrillDown元件從左邊Component中拖入。

drilldown8.png

Step2> 設定DrillDown元件的屬性:RemoteName設為sBasic. cmdCustomersDataMember選擇cmdCustomersDrillStyle預設為WebFormFormName可選擇wCustomers
:
DrillStyle
分為四種:WebForm,MobileForm,RDLC,CommandWebFormMobileForm是以表單來呈現,RDLC是以Report的方式來呈現,Command則透過連接Server端上InfoCommand的資料,打開一個共用且動態的視窗來呈現。

drilldown2.png

 

Step3> 設定KeyFields屬性為CustomerID,作為DrillDown資料來源的鍵值欄位。

(如果資料來源有多個Key值則依序加入)

drilldown3.png

Step4> DataGrid右鍵Colume設定wOrders的欄位。CustomerID欄位設定DrillObjectID 屬性為DrillDown1,並設定DrillFields傳入的參數為CustomerID
:

DrillFields欄位是指目前DataGrid的資料表欄位, 如果沒設定就以此欄位傳入DrillDownKeyFields中配對,如果有設定多個,可以依次與KeyFields進行配對。當KeyFields設定的欄位與DrillFields欄位不相等時,多出來的欄位自動省略不處理。

未命名.png

Step5> 設定完成後,Preview打開wOrders(訂單資料)可以看到CustomerID(客戶編號)欄位已經變成超連結。

drilldown6.png

Step6> 點擊超連結會打開wCutomers的網頁,並且篩選出指定的客戶編號。

drilldown7.png

Step7> 如果需要更改開啟模式,例如另開頁籤或新開視窗,可以調整DrillDown元件的OpenMode屬性為NewTabNewWindow(NewTab需要透過RUN登錄才可看到效果)

Tab.png

 

NewTab.png

Step8> DrillDown元件DrillStyle屬性的其他三種模式:

若要以MobileForm做為呈現畫面時,更改DrillStyle屬性為MobileForm,並將FormName屬性選擇到Mobile網頁(MCustomers)

drilldownMobile.png

 

drilldownMobile0.png

Step9> 若要以RDLC做為呈現畫面時,更改DrillStyle屬性為RDLC,並將ReportName選擇RDLC報表(CustomerRpt)

NewTabReport0.png

 

NewTabReport.png

Step10>      若要以直接連接ServerInfoCommand上的資料做為呈現畫面時,更改DrillStyle屬性為Command,輸入FormCaption作為開啟Dialog的標題。並在DisplayField屬性加入欲顯示的欄位。

註:

l  FormCaption屬性必須輸入,若空白開窗會沒有標題無法關閉。

l  如果希望打開Command的欄位可以繼續DrillDown下去的話,也可以設定其他的DrillDown在欄位的DrillObjectIDDrillField,用法皆相同。

l  DrillDownDrillStyle屬性設為Command,則OpenMode模式只能選擇Dialog

drilldown9.png

 

drilldown10.png

Step11>      JQDrillDown元件的BeforeDrillDown屬性:

追蹤前的事件時機點,可事先處理一些準備程序,也可以透過此程序改變DrillDownWhere語句。事件中含有一個參數,WebPage/Mobile時是傳入跟蹤的鍵值對應集合(JSON格式field/value集合)

drilldown11.png

 

drilldownScript.png

EX:

    <script>

        function test(val)

        {

            val[0].value = "001";//可替換為您需要的值

            alert(val[0].field + ',' + val[0].value);

        }

    </script>

drilldown12.png

 

Top of Page