A08-14 下拉樹元件

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

2. 下拉樹作為一種填報元件，僅在填報預覽和新填報預覽時使用。

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. 點擊填報預覽，在瀏覽器中查看效果。

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儲存格元件設定水印，輸入值：請選擇。

4. 點擊預覽，在瀏覽器中查看效果。

16

進階-多選。

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

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

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

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

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

17

進階-非同步載入。

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

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

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

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

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

18

進階-只返回葉子節點。

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

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

3. 勾選只返回葉子節點，返回類型為數組類型資料。

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

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

6. 在B3儲存格中插入公式=B2，在C3儲存格中插入公式=C2。

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

19

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

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

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

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

20

校驗-允許為空。

1. 勾選允許為空，表示元件可以為空顯示。

2. 不勾選允許為空，會彈出錯誤提示設定，預覽當元件為空時，會彈出設定的錯誤提示。

3. 設定B2儲存格取消勾選允許為空，設定錯誤提示為：請選擇一個產品。

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

21

校驗-允許直接編輯。

1. 勾選允許直接編輯，點擊元件空白處，可以直接在元件上輸入值來模糊查詢。

2. 不勾選允許直接編輯，點擊元件空白處，沒有作用。

3. 設定B2儲存格不勾選允許直接編輯。

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

22

校驗-允許自訂值。

1. 勾選允許自訂值，點擊元件空白處，可以直接在元件上輸入值，且可以輸入不是元件裡的資料值。

2. 不勾選允許自訂值，點擊元件空白處，輸入不是元件裡的資料值，會彈出值不在下拉欄表內的提示視窗。

3. 設定B2儲存格取消勾選允許自訂值。

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