JsTree中节点添加CheckBox 以及单选的实现-白红宇

JsTree中节点添加CheckBox 以及单选的实现

阅读量：5855 次

发布时间：2019-06-19

本文共 817 字，大约阅读时间需要 2 分钟。

stree中添加checkbox，需要在初始化时设置plugins属性：

                            
$(
'#DpTree'
).data(
'jstree'
, 
false
).empty().jstree({ 
                
'core'
: { 
                    
'data'
: data.data,
                    
"check_callback"
: 
true
,
                    
'multiple'
: 
false
,
                
},
                
"force_text"
: 
true
,
                
plugins: [
"sort"
, 
"types"
, 
"checkbox"
, 
"themes"
, 
"html_data"
],
                
"checkbox"
: { 
                    
"keep_selected_style"
: 
false
,
//是否默认选中
                    
"three_state"
: 
false
,
//父子级别级联选择
                    
"tie_selection"
: 
false
                
},
            
});
         
       

　　eg:设置three_state为true时，选择所有子节点后父节点会自动选择。

我的需求是选择一个节点绑定给其他数据，节点只能选择一个，且不可重复。

故，添加如下事件，选择节点后遍历所有选中的节点，更改其checkbox属性。

                            
$(
'#DpTree'
).on(
'check_node.jstree'
, 
function
(event, obj) { 
                
var
ref = $(
'#DpTree'
).jstree(
true
);
                
var
nodes = ref.get_checked();  
//使用get_checked方法
                
$.each(nodes, 
function
(i, nd) { 
                    
if
(nd != obj.node.id)
                        
ref.uncheck_node(nd);
                
});
            
});
         
       