整合jstree和select2

Question

在我的页面中，我使用 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
});

JSFIDDLE

如您所见，两种情况下的数据都有相似的ID。如果我在我的树中单击 test，那么我希望我的 select 设置为 "test"。这个问题有解决办法吗？

编辑

@Nikolay Ermakov 的回答让我纠正了想法，但问题是当我通过 ajax 加载我的 select 时。当我在我的 jstree 中单击某个选项时，数据被破坏并且我以后无法在我的 select 中选择任何东西。此外，在 select2 上选择了 none 个选项。

EDIT2

当我点击jstree中的某个选项时，所有选项都被删除，select变成一个空白值，可以选择。

Answer 1

类似这样的方法有效 -

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" ]
    })
.on("select_node.jstree", function(a,b){
  $("#selectSample").append('<option value="' + b.node.original.text + '">' + b.node.original.text + '</option>');
  var selectedValues = $("#selectSample").val();
  if (selectedValues == null) {
        selectedValues = new Array();
     }
  selectedValues.push(b.node.original.text);
  $("#selectSample").val(selectedValues).trigger('change');
});

$("#selectSample").select2({data:dataSelect, multiple: true});

Answer 2

我想我让你们的互动变成了双向。请检查此 fiddle：JS Fiddle。

我使用了 jsTree 的 changed 事件和 select2 的 select/unselect 事件。

代码如下所示：

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);
    });

Answer 3

呵呵，我的问题解决了！ :)
我使用了@Nikolay Ermakov 发送的解决方案。但是，我发起的 select 有点不对。使用 $ .ajax () 读取一个参数，稍后我将它交给我的 select。所以生成的代码工作正常！ :) 谢谢大家的承诺！ :)

整合jstree和select2

Integrate jstree and select2

jquery

jstree

jquery-select2

jquery-select2-4