jstree中的checkbox默認(rèn)選中和隱藏示例代碼

更新時(shí)間：2019年12月29日 08:53:17 作者：sirdong

這篇文章主要介紹了jstree的checkbox默認(rèn)選中和隱藏,需要的朋友可以參考下

jstree復(fù)選框自定義顯示隱藏和初始化默認(rèn)選中

首先需要配置 Checkbox plugin

"plugins" : ['checkbox']

設(shè)置默認(rèn)選中狀態(tài)（checkbox 選中）

state: {checked: true}
$.jstree.defaults.checkbox.tie_selection

示例：

$('#demo_tree').jstree({
 "core" : {
  'data': [
   { "id" : "ajson1", "parent" : "#", "text" : "Simple root node", state: {checked: true}},
   { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
   { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
   { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
  ]
 },
 "plugins" : ['checkbox'],
 "checkbox" : {
  "tie_selection": false,
 }
});

jstree復(fù)選框自定義顯示隱藏

jstree 本身不支持在節(jié)點(diǎn)中隱藏 checkbox，國外有個(gè)大佬給出一個(gè)利用 css 來隱藏的解決方案：

首先來一段 css

.no_checkbox>i.jstree-checkbox{display:none}

然后在 data 的 json 數(shù)據(jù)結(jié)構(gòu)中

$('#demo_tree').jstree({
 "core" : {
  'data': [
   { "id" : "ajson1", "parent" : "#", "text" : "Simple root node", state: {checked: true}},
   { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
   { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" , a_attr: {class: "no_checkbox"}},
   { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
  ]
 },
 "plugins" : ['checkbox'],
});

效果：

jstree version => 3.3.8

參考：

https://stackoverflow.com/questions/6112567/jstree-hide-checkbox

總結(jié)

以上所述是小編給大家介紹的jstree中的checkbox默認(rèn)選中和隱藏示例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

原生js實(shí)現(xiàn)彈窗消息動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)彈窗消息動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
在微信小程序中使用mqtt服務(wù)的方法
這篇文章主要介紹了在微信小程序中使用mqtt服務(wù)的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
JavaScript多級判定代碼優(yōu)化淺析
這篇文章主要介紹了JavaScript多級判定代碼優(yōu)化，JavaScript用二元運(yùn)算符和if拆分優(yōu)化多級判定結(jié)構(gòu),?用JavaScript邏輯運(yùn)算符替換if-else結(jié)構(gòu)判定
2023-02-02
JavaScript 原型繼承之構(gòu)造函數(shù)繼承
JavaScript 是基于原型的面向?qū)ο笳Z言。也就是說，每個(gè)實(shí)例對象都具有一個(gè)原型。對象從該原型中繼承屬性和方法。這一篇將具體說說構(gòu)造函數(shù)的繼承。
2011-08-08
javascript常用方法總結(jié)
經(jīng)常使用的一些javascript方法，今天總結(jié)了一下，以便以后查詢，有需要的小伙伴可以參考下。
2015-05-05
JavaScript練習(xí)小項(xiàng)目之修改div塊的顏色
這篇文章主要給大家介紹了關(guān)于JavaScript練習(xí)小項(xiàng)目之修改div塊的顏色的相關(guān)資料,文中通過舉例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-01-01
顯示js對象所有屬性和方法的函數(shù)
顯示js對象所有屬性和方法，從網(wǎng)上整理了不少，大家可以看下原理都是差不多的。
2009-10-10
js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法實(shí)例分析
這篇文章主要介紹了js核心基礎(chǔ)之構(gòu)造函數(shù)constructor用法,結(jié)合具體實(shí)例形式分析了javascript構(gòu)造函數(shù)constructor概念、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-05-05
全面了解JavaScript的作用域鏈
這是一個(gè)非常重要的知識點(diǎn)了，了解了JavaScript的作用域鏈的話，能幫助我們理解很多‘異常’問題。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
js批量設(shè)置樣式的三種方法不推薦使用with
批量設(shè)置樣式的三種方法:第一種使用JSON/第二種使用cssText/使用第三種with(不推薦使用),感興趣的朋友可以參考下，希望可以幫助到你
2013-02-02