2021-05-12 14:32:11
如何利用zTree外掛實現無線電鈕和label點選事件
2019-12-12 22:28:53
zTree樹是一個多功能外掛，不僅包括簡單單選樹，還包括無線電鈕樹和核取方塊樹，利用這兩種樹可以實現多選。無線電鈕樹是在某一個樹枝分支下，節點是單選的，但是在不同樹分支下，是可以多選的。有時為了方便使用者點選，需要修改點選物件，即是點選無線電鈕的文字內容也可以選中按鈕。下面利用一個範例說明radio樹的實現方法，如下圖所示：
1
第一步，雙擊開啟HBuilder編輯工具，在web專案指定目錄下，建立靜態頁面radiotree.html，並修改title顯示的內容，如下圖所示：
2
第二步，在title標籤下方引入zTree相關的css和js檔案，注意引入檔案的順序，如下圖所示：
3
第三步，body元素標籤內插入樹形容器div元素，並呼叫zTree樹樣式元素；在div標籤內插入一個ul標籤元素，如下圖所示：
4
第四步，在<script></script>標籤內部編寫生成無線電鈕樹js程式碼，並在jquery初始化函數中呼叫，如下圖所示：
5
第五步，預覽該靜態頁面，點選無線電鈕，發現只能點選按鈕時才能被選中，如下圖所示：
6
第六步，為了友好使用無線電鈕樹，點選文字或無線電鈕都可以選中節點，新增onClick回撥函數，如下圖所示：
相關文章