如何利用zTree外掛實現單選按鈕和label點選事件?

zTree樹是一個多功能外掛,不僅包括簡單單選樹,還包括單選按鈕樹和複選框樹,利用這兩種樹可以實現多選。單選按鈕樹是在某一個樹枝分支下,節點是單選的,但是在不同樹分支下,是可以多選的。下面利用一個例項說明radio樹的實現方法,如下圖所示:

如何利用zTree外掛實現單選按鈕和label點選事件

工具/原料

zTree外掛

HBuilder

截圖工具

瀏覽器

方法/步驟

第一步,在web專案指定目錄下,建立靜態頁面radiotree.html,並修改title顯示的內容,如下圖所示:

如何利用zTree外掛實現單選按鈕和label點選事件

第二步,在title標籤下方引入zTree相關的css和js檔案,注意引入的順序,如下圖所示:

如何利用zTree外掛實現單選按鈕和label點選事件

第三步,body元素標籤內插入樹形容器div元素,並呼叫樣式元素,如下圖所示:

如何利用zTree外掛實現單選按鈕和label點選事件

第四步,在標籤內部編寫生成單選按鈕樹js程式碼,並在jquery初始化函式中呼叫,如下圖所示:

如何利用zTree外掛實現單選按鈕和label點選事件

第五步,預覽該靜態頁面,點選單選按鈕,發現只能點選按鈕時才能被選中,如下圖所示:

如何利用zTree外掛實現單選按鈕和label點選事件

第六步,為了友好使用單選按鈕樹,點選文字或單選按鈕都可以選中節點,新增onClick回撥函式,如下圖所示:

如何利用zTree外掛實現單選按鈕和label點選事件

注意事項

注意zTree實現單選按鈕樹的方法

注意按鈕和文字一起點選選中的方法

按鈕, 事件, 外掛, 分支,
相關問題答案