如何用跨度包装jstree子项，以便我可以对它们进行分组

Question

我想用span包裹整个children ，这样我就能给他们背景色

我想包装所有孩子，如下所示

  <span class="children-group-wrapper">
     <span>Group Child 1</span>
     <span>Group Child 2</span>
  </span>

CSS：

span.children-group-wrapper{border:1px solid orange;}

我用以下代码创建了这两个节点Group Child 1和Group Child 2 ：

$('#using_json_2').jstree().create_node('ajson2',  obj, "last");

下面是我想要的输出（认为边框是一个完美的边界）：

注意：我不想使用html jstree

 var treeData = [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node"}, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2"} ]; var childrenGroup = [ { "id" : "ajson3", "parent" : "ajson2", "text" : "Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'}, { "id" : "ajson4", "parent" : "ajson2", "text" : "Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper1'}, { "id" : "ajson5", "parent" : "ajson2", "text" : "2nd Group Child 1",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'}, { "id" : "ajson6", "parent" : "ajson2", "text" : "2nd Group Child 2",children:false,"icon":"fa fa-file-o",groupClass:'children-group-wrapper2'} ]; var myTree = $('#using_json_2').jstree({ 'core' : { "check_callback": true, 'data' : treeData // Use it here }}); myTree.on('changed.jstree', function(e, data) { childrenGroup.forEach(function(obj){ $('#using_json_2').jstree().create_node('ajson2', obj, "last"); }); $('#using_json_2').jstree().open_node('ajson2'); }); 

 .children-group-wrapper1{ border:1px solid orange; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> <div id="using_json_2"> </div> 

请提前帮助我!!!!!!!!!!!

Answer 1

你现在已经拥有了这个树的id，你可以只为它添加一个类并让它工作。

$("#ajson2").addClass("children-group-wrapper")

 var treeData = [{ "id": "ajson1", "parent": "#", "text": "Simple root node", }, { "id": "ajson2", "parent": "#", "text": "Root node 2", } ]; var childrenGroup = [{ "id": "ajson3", "parent": "ajson2", "text": "Group Child 1", children: false, "icon": "fa fa-file-o" }, { "id": "ajson4", "parent": "ajson2", "text": "Group Child 2", children: false, "icon": "fa fa-file-o" } ]; var myTree = $('#using_json_2').jstree({ 'core': { "check_callback": true, 'data': treeData // Use it here } }); myTree.on('changed.jstree', function(e, data) { childrenGroup.forEach(function(obj) { $('#using_json_2').jstree().create_node('ajson2', obj, "last"); }); $('#using_json_2').jstree().open_node('ajson2'); $("#ajson2").addClass("children-group-wrapper") }); 

 .children-group-wrapper { border: 1px solid orange; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> <div id="using_json_2"></div> 

如果要将类应用于li，则可以使用jstree的新受支持属性

"li_attr": {
      "class": "children-group-wrapper"
    }

这会将class属性添加到li。

编辑：

 var treeData = [{ "id": "ajson1", "parent": "#", "text": "Simple root node" }, { "id": "ajson2", "parent": "#", "text": "Root node 2" } ]; var childrenGroup = [{ "id": "ajson3", "parent": "ajson2", "text": "Group Child 1", children: false, "icon": "fa fa-file-o", groupClass: 'children-group-wrapper1', "li_attr": { "class": "children-group-wrapperOpen" } }, { "id": "ajson4", "parent": "ajson2", "text": "Group Child 2", children: false, "icon": "fa fa-file-o", groupClass: 'children-group-wrapper1', "li_attr": { "class": "children-group-wrapperClosed" } }, { "id": "ajson5", "parent": "ajson2", "text": "2nd Group Child 1", children: false, "icon": "fa fa-file-o", "li_attr": { "class": "children-group-wrapper1Open" } }, { "id": "ajson6", "parent": "ajson2", "text": "2nd Group Child 2", children: false, "icon": "fa fa-file-o", "li_attr": { "class": "children-group-wrapper1Closed" } } ]; var myTree = $('#using_json_2').jstree({ 'core': { "check_callback": true, 'data': treeData // Use it here } }); myTree.on('changed.jstree', function(e, data) { childrenGroup.forEach(function(obj) { $('#using_json_2').jstree().create_node('ajson2', obj, "last"); }); $('#using_json_2').jstree().open_node('ajson2'); }); 

 .children-group-wrapperOpen { border: 1px solid orange; border-bottom: 0px; } .children-group-wrapperClosed { border: 1px solid orange; border-top: 0px; } .children-group-wrapper1Open { border: 1px solid red; border-bottom: 0px; } .children-group-wrapper1Closed { border: 1px solid red; border-top: 0px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> <div id="using_json_2"></div>