zTree樹是一個多功能外掛,不僅包括簡單單選樹,還包括單選按鈕樹和複選框樹,利用這兩種樹可以實現多選。單選按鈕樹是在某一個樹枝分支下,節點是單選的,但是在不同樹分支下,是可以多選的。下面利用一個例項說明radio樹的實現方法,如下圖所示:
工具/原料
zTree外掛
HBuilder
截圖工具
瀏覽器
方法/步驟
第一步,在web專案指定目錄下,建立靜態頁面radiotree.html,並修改title顯示的內容,如下圖所示:
第二步,在title標籤下方引入zTree相關的css和js檔案,注意引入的順序,如下圖所示:
第三步,body元素標籤內插入樹形容器div元素,並呼叫樣式元素,如下圖所示:
第四步,在標籤內部編寫生成單選按鈕樹js程式碼,並在jquery初始化函式中呼叫,如下圖所示:
第五步,預覽該靜態頁面,點選單選按鈕,發現只能點選按鈕時才能被選中,如下圖所示:
第六步,為了友好使用單選按鈕樹,點選文字或單選按鈕都可以選中節點,新增onClick回撥函式,如下圖所示:
注意事項
注意zTree實現單選按鈕樹的方法
注意按鈕和文字一起點選選中的方法