集成jstree和select2

Posted 2023-05-07

【中文标题】集成jstree和select2

【英文标题】：Integrate jstree and select2

【发布时间】：2016-03-08 00:26:30

【问题描述】：

在我的页面中，我使用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 上没有选择任何选项。

EDIT2

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

【问题讨论】：

检查select_node.jstree事件

jsfiddle.net/3kgbG/1189 好的，我做了这样的事情，但为什么只返回一个选项？

好的，我将数据放入数组中并交给选择，一切正常:)

【参考方案1】：

我想我让你的互动是双向的。请检查这个小提琴：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);
    );

【讨论】：

是的，看起来不错，但是当我将此解决方案复制到我的门户网站时，我遇到了一个问题 - “data.node 未定义”。

好的，我找到了问题所在。这取决于通过 ajax 加载 select2 的数据。当 jstree 想要在其上添加选定的选项时，它只是看不到它。有没有办法解决？我要补充一点，需要通过 ajax 加载数据。

当您选择一个节点并触发onchange 事件时，您能在jsTree 的optionId 变量中查找您的值吗？此外，在获取 ajax 后，您通过此操作获得了哪些数据：processResults: function (data, page) return results: $.map(data, function(obj) return id: obj.id, text: obj.text, val: obj.val ; ) ; - 这里的输出是什么样的？

你能按照我上面的建议去做吗：当你选择一个节点并触发 onchange 事件时，在 jsTree 的 optionId 变量中查找你有什么值？此外，在获取 ajax 后，您通过此操作获得了哪些数据：processResults: function (data, page) return results: $.map(data, function(obj) return id: obj.id, text: obj.text, val: obj.val ; ) ; - 这里的输出是什么样的？

好的，我想我明白你的意思了。当我在 jstree 中选择某个选项时，我在 optionID 中有“id、text、icon、parent、parents、children、selected 等。当我取消选择选项时会显示相同的选项。Ajax 给我带有参数的 JSON 类型：id、text 和 val。

【参考方案2】：

这样的事情奏效了 -

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

【讨论】：

是的，看起来不错，但有时会添加太多对象。情况是当我删除所有复选框时，我可能会再次添加字段。

还有一个问题，为什么在值选项字段中将'b.node.original.text'交换为'b.node.original.id'时不会添加？

b.node.original 是此事件暴露的对象。检查它是否有 Id 或其他您认为有用的相关属性。

好的，我会改变这个，我的代码看起来像这样：jsfiddle.net/3kgbG/1193 但它不是正确的结束，不知道为什么：/

您能否尝试打开一个网络应用程序并进行调试以查找对象公开的属性以及适合您的属性（如果有）

【参考方案3】：

嗯，我解决了我的问题！ :) 我使用了@Nikolay Ermakov 发送的解决方案。但是，我发起选择有点错误。使用 $ .ajax () 读取一个参数，然后我将其提供给我的选择。所以生成的代码工作正常！ :) 谢谢大家的承诺！ :)