我有一个使用jsTree的树结构,如下所示:
<div id="SampleContainer">
<ul>
<li>
Top 1
<ul>
<li>
Sub 1
<ul>
<li>
A
</li>
<li>
B
</li>
</ul>
</li>
<li>
Sub 2
<ul>
<li>
A
</li>
<li>
B
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
我想在复选框中添加font-awesome图标:
我试过这样做:
$(document).ready(function(){
$("#SampleContainer").jstree({
"plugins": ["checkbox"],
core: {
"themes": {
"icons": false,
"responsive": true
}
}
});
$('#SampleContainer').on('ready.jstree click', function (e, data) {
$('a > i.jstree-checkbox').removeClass('jstree-icon jstree-checkbox').addClass('fa fa-square-o');
$('a > i.jstree-clicked').removeClass('jstree-icon jstree-checkbox').addClass('fa fa-check-square');
});
});
这个图标&#39; fa fa-square-o&#39;来了。无法看到onclick&#39; fa fa-check-square&#39;。!
有没有人对这个问题有所了解?
答案 0 :(得分:0)
我添加了一个新的toggleCheckClasses
函数,根据复选框的状态添加/删除正确的fa
类。我将此函数附加到treejs-ready
/ click
处理程序中的树节点。
编辑:我添加了子元素类的切换
$(document).ready(function() {
$("#SampleContainer").jstree({
"plugins": ["checkbox"],
core: {
"themes": {
"icons": false,
"responsive": true
}
}
});
$('#SampleContainer').on('ready.jstree click', function(e, data) {
$('a > i.jstree-checkbox')
.removeClass('jstree-icon jstree-checkbox') // removing jstree classes
.addClass('fa fa-square-o') // adding the fa non-checked checkbox class
.on('click', function() { // attaching the handler that toggles the checked / unchecked class
toggleCheckClasses($(this), $(this).hasClass('fa-square-o'));
});
});
function toggleCheckClasses(element, show) {
if (show) {
element.removeClass('fa-square-o');
element.addClass('fa-check-square-o');
} else {
element.removeClass('fa-check-square-o');
element.addClass('fa-square-o');
}
var children = element.parent().siblings(".jstree-children").find(".jstree-anchor .fa");
children.each(function() {
toggleCheckClasses($(this), show);
});
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
<div id="SampleContainer">
<ul>
<li>
Top 1
<ul>
<li>
Sub 1
<ul>
<li>
A
</li>
<li>
B
</li>
</ul>
</li>
<li>
Sub 2
<ul>
<li>
A
</li>
<li>
B
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>