第六章 其他功能第六章 其他功能\6-11 JQDrillDown

6-11 JQDrillDown

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

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

Step1>        使用先前建立好的兩支Server程式:sOrderssCustomers,分別撈取北風資料庫的OrdersCustomers資料表。作為表單的瀏覽畫面資料來源和DrillDown元件所需要的資料來源。

並在InfoCommand元件-CutomersCommandText中添加一個欄位,用於對OrdersSUM(TotalAmt)訂單金額做加總的欄位。

Step2>        建立兩個以DataGrid呈現資料的網頁:wOrders(訂單資料)wCustomers(客戶資料)

Step3>        wCustomers表單的設計畫面上,將JQDrillDown元件從左邊工具箱中拖入。

 

 

Step4>        設定JQDrillDown元件的資料來源:

RemoteName屬性設為sOrders.OrdersDataMember屬性選擇Orders(這裡選的是wOrders的來源,實際使用時,必須與您所要開啟的畫面資料來源一致)

 

 

Step5>        設定KeyFields屬性為CustomerID,作為DrillDown資料來源的鍵值欄位。(如果資料來源有多個Key值則依序加入)

 

 

Step6>        設定DrillStyle屬性(資料追蹤模式)WebFormFormName屬性選擇wOrders表單。

 

 

DrillStyle分為四種:WebFormMobileFormRDLCCommand

WebFormMobileForm是以表單來呈現,RDLC是以Report的方式來呈現,Command則透過連接Server端上InfoCommand的資料,打開一個共用且動態的視窗來呈現。

 

Step7>        接著設定wCustomers表單上DataGrid元件的欄位。

 

添加進TotalAmt(訂單總金額)欄位,設定DrillObjectID 屬性為JQDrillDown1,並設定DrillField傳入的參數為CustomerID

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

 

 

Step8>        設定完成後,掛至EEPManager上,打開wCustomers(客戶資料),可以看到TotalAmt欄位已經變成超連結。

 

 

點擊超連結會打開wOrders的網頁,並且篩選出指定的客戶編號,藉此查看TotalAmt欄位是由哪幾筆訂單金額組成。

 

 

Step9>        如果需要更改開啟模式,例如另開頁籤或新開視窗,可以調整JQDrillDown元件的OpenMode屬性為NewTabNewWindow

 

 

 

 

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

 

 

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

 

 

註:若JQDrillDownDrillStyle屬性設為Command,則OpenMode模式只能選擇Dialog

 

 

Step12>     JQDrillDown元件的BeforeDrillDown屬性:

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

 

EX

<script>

        function test(val)

        {

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

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

        }

    </script>

 

 


 

Top of Page