A08-15 檢視表樹元件

1. 在設計表單時，有的選項具有層級結構，可以通過檢視表樹元件實現讓使用者根據層級進行選擇。

2. 檢視表樹元件直接在儲存格中顯示所有選項，要求儲存格高、寬足夠大。

3. 檢視表樹作為一種填報元件，僅在填報預覽和新填報預覽時使用。

1

插入檢視表樹。

1. 選中B2儲存格，點擊【元件設定】，點擊下拉框，選擇【檢視表樹】。
   

2

基本-元件名。

1. 可以為B2中插入的檢視表樹元件設定元件名。

2. 元件名可手動輸入任意名稱，也可選擇全域參數或伺服器資料源參數。

3. 元件名選擇參數，即將參數和元件進行了綁定，在元件中輸入的值，可通過參數來實時傳遞。

4. 擁有名稱後，可以通過JavaScript獲取元件，從而修改元件屬性。
   

3

進階-構建樹-極速分層構建1。

1. 資料構建方式分為3種，極速分層構建、自動構建、普通分層構建。

2. 需要使用資料集來構建。

3. 極速分層設定方式為依賴層數與欄位，如範例 層次1的實際值與顯示值都設定為地區。
   

4

進階-構建樹-極速分層構建2。

1. 層次2的實際值與顯示值都設定為銷售員。

2. 依賴的層數有1層，設定為1。

3. 依賴的欄位第一層設定為地區。
   

5

進階-構建樹-極速分層構建3。

1. 層次3的實際值與顯示值都設定為產品

2. 依賴的層數有二層，第一層設定為1，第二層設定為2。

3. 依賴的欄位第一層設定為地區，第二層設定為銷售員。

4. 滑鼠右鍵點擊欄【B】，選擇【欄寬】，輸入40，點擊【確定】。

5. 滑鼠右鍵點擊列【2】，選擇【列高】，輸入40，點擊【確定】。

6. 點擊填報預覽，在瀏覽器中查看效果。
   

6

進階-構建樹-自動構建1。

1. 首先要設定一個樹資料集，自動構建會依賴著樹資料集來設定。

2. 可參考A03-05 樹資料集來設定。
   

7

進階-構建樹-自動構建2。

1. 選擇設定好的樹資料集。

2. 實際值設定為部門ID，顯示值為部門名稱。

3. 預覽效果。
   

8

進階-構建樹-普通分層構建1。

1. 需建立3個資料集，使用FRDemoTW中銷量這張表為範例。

2. 第一個資料集公式：SELECT DISTINCT 地區 FROM 銷量 WHERE 地區 !="" 。

3. 第二個資料集公式：SELECT 銷售員 FROM 銷量 WHERE 銷售員 !="" AND 地區 = '${layer1}' 。

4. 第三個資料集公式：SELECT 產品 FROM 銷量 WHERE 產品 !="" AND 地區 = '${layer1}' AND 銷售員 = '${layer2}'    。

5. 新增資料集，可參考A03-01 內建資料集。
   

9

進階-構建樹-普通分層構建2。

1. 點擊左邊 + ，新增層次1。

2. 型別設定設為資料查詢。

3. 資料集設為第一個資料集。

4. 實際值與顯示值設為地區。
   

10

進階-構建樹-普通分層構建3。

1. 點擊左邊 + ，新增層次2。

2. 型別設定設為資料查詢。

3. 資料集設為第二個資料集。

4. 實際值與顯示值設為銷售員。
   

11

進階-構建樹-普通分層構建4。

1. 點擊左邊 + ，新增層次3。

2. 型別設定設為資料查詢。

3. 資料集設為第三個資料集。

4. 實際值與顯示值設為產品。

5. 預覽效果。
   

12

進階-構建樹-普通分層構建性能優先。

1. 勾選性能優先時，下拉樹在分層構建時是不找子節點，當點擊+ 展開某一節點，子節點才會被識別、顯示。

2. 不勾選性能優先時，下拉樹在分層構建時，會去找子節點，效能上會比較慢。

3. 設定B2儲存格元件勾選效能優先，預覽效果。
   

13

基本-可用。

1. 勾選可用時，正常顯示。

2. 不勾選可用時，顏色會被淡化掉，元件也無法點擊執行。

3. 設定B2儲存格元件不可用，預覽效果。

14

基本-可見。

1. 勾選可見時，可看得到元件。

2. 勾選不可見時，元件會被隱藏起來不顯示。

3. 設定元件不可見時，需先點擊【範本】-【範本web屬性】-【填報頁面設定】，勾選【直接顯示元件】。

4. 設定B2儲存格元件不可見，預覽效果。
   

15

進階-去除重複資料。

1. 勾選去除重複資料時，當選項中有重複內容時會被合併。

2. 不勾選去除重複資料時，當選項中有重複內容都會被顯示出來。

3. 複製B2儲存格元件到C2儲存格，設定B2儲存格元件不勾選去除重複資料，C2儲存格勾選去除重複資料，預覽效果。
   

16

進階-多選。

1. 勾選多選，則能複選資料。

2. 勾選多選，而點擊父節點勾選框，則會全選子節點以下的資料。

3. 不勾選多選，則只能單選資料。

4. 不勾選多選，沒有父節點的勾選框可點擊。

5. 設定B2儲存格元件勾選多選，C2儲存格元件不勾選多選，預覽效果。
   

17

進階-非同步載入。

1. 勾選非同步載入，只會出現父節點的資料，點擊父節點的前面 + 號，這才會重新取子節點的資料。

2. 勾選非同步載入，比較適合資料量大的情況使用。

3. 不勾選非同步載入後，則會全部展開所有參數資料。

4. 不勾選非同步載入，比較適合參數資料量小的情況使用。

5. 設定B2儲存格元件勾選非同步載入，C2儲存格元件不勾選非同步載入，預覽效果。
   

18

進階-只返回葉子節點。

1. 勾選只返回葉子節點，勾選當下的節點，則會全選節點以下的所有資料。

2. 勾選只返回葉子節點，只對多選的檢視表樹有效果。

3. 勾選只返回葉子節點，返回型別為陣列型別資料。

4. 不勾選只返回葉子節點，勾選當下的節點，只會在當下的節點做勾選，其他關聯的父節點或下層資料並不會有勾選效果。

5. 不勾選只返回葉子節點，只對多選的檢視表樹有效果。

6. 設定B2儲存格元件勾選只返回葉子節點，C2儲存格元件不勾選只返回葉子節點，預覽效果。
   

19

進階-結果返回完整層次路徑。

1. 勾選結果返回完整層次路徑，會返回完整層資路徑的結果，返回型別為陣列型別資料。

2. 不勾選結果返回完整層次路徑，只會返回最終勾選的結果。

3. 設定B2儲存格元件勾選返回完整層次路徑，C2儲存格元件不勾選返回完整層次路徑。

4. 給B2、C2儲存格元件添加【點擊】事件，顯示返回結果。

5. var b = this.getValue();

6. alert(b);

7. 點擊填報預覽，在瀏覽器中查看效果。