在我的页面中,我使用jstree
和select2
。我想将两个插件集成在一起。有什么办法吗?我的代码看起来非常简单,因为它仅依赖于插件集成的领域,并且看起来像:
var dataSelect = [
{
id: 1,
text: "test"
},
{
id: 2,
text: "test2"
},
{
id: 3, text: "test3"
}
];
var dataTree = [
{
id: 1, text: "test"
},
{
id: 3,
text: "test3"
}
];
$('#jstree').jstree({
'core': {
'data': dataTree,
"themes": {
"icons": false
}
},
"checkbox": {
"keep_selected_style": false,
"three_state": true
},
"plugins": ["checkbox", "state"]
});
$("#selectSample").select2({
data: dataSelect,
multiple: true
});
如您所见,两种情况下的数据都有相似的ID。如果单击test
树,则希望select
设置为"test"
。这个问题有什么解决办法吗?
编辑
@Nikolay Ermakov的答案使我纠正了想法,但是问题是当我select
通过ajax加载我的代码时。当我单击jstree中的某个选项时,数据被破坏,以后我无法选择任何内容select
。此外,上没有选择任何选项select2
。
编辑2
当我单击中的某个选项时jstree
,所有选项都将被删除,并select
变为一个空白值,可以选择该值。
我想我做了两次互动。请检查以下小提琴:JS Fiddle。
我使用changed
了jsTreeselect/unselect
事件和select2事件。
代码如下所示:
var dataSelect = [{id: "1", text: "test"},{id:"2", text: "test2"},{id:"3", text: "test3"}];
var dataTree = [{id: "1", text: "test"},{id:"3", text: "test3"}];
$("#selectSample").select2({data:dataSelect, multiple: true});
$('#jstree')
.on('changed.jstree', function (event, data) {
var $select = $("#selectSample").select2(),
selectedOptions = $select.val() || [],
optionId = data.node.id;
if( data.action == 'select_node'){
selectedOptions.push( optionId );
$select.val(selectedOptions).trigger("change");
}
if( data.action == 'deselect_node'){
selectedOptions.splice( selectedOptions.indexOf( optionId ), 1 );
$select.val(selectedOptions).trigger("change");
}
})
.jstree({
'core': {
'data': dataTree,
"themes":{
"icons":false
}
},
"checkbox": {
"keep_selected_style": false,
"three_state": true
},
"plugins" : [ "checkbox" ]
});
$("#selectSample")
.on('select2:select', function(event) {
$('#jstree').jstree('select_node', '#'+event.params.data.id, true);
})
.on('select2:unselect', function(event) {
$('#jstree').jstree('deselect_node', '#'+event.params.data.id, true);
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句