我想用children
包裹整个span
,以便为他们提供背景色
我想像下面包裹所有孩子
<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>
请提前帮助我!!!!!!!!
答案 0 :(得分:2)
您现在已经有了树的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>