i wanted to wrap the whole children with span, so that i can give them background-color
i want wrap all children like below
<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;}
i'm creating those 2 nodes Group Child 1 and Group Child 2 with below code:
$('#using_json_2').jstree().create_node('ajson2', obj, "last");
Below is my Desired Output(think border as a perfect border):
Note: i don't want to use 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>
Please help me thanks in advance!!!!!!!!!!!
from How to wrap jstree children with span so that i can group them

No comments:
Post a Comment