前端jsTree树形结构使用以及复选框怎样默认选中
引入
<link rel="stylesheet" href="css/plugins/jsTree/style.min.css"> //css文件
<script src="js/plugins/jsTree/jstree.min.js"></script> //js文件
//JS代码片段
$(function () {
$("#jstree").on('changed.jstree', function(e, data) {
//获取复选框选中的 id
var ids = data.selected;
var idsstr = '';
$.each(ids, function(i, v) {
var ds = i == 0 ? '' : ',';
idsstr += ds + v;
})
$("input[name=menu_list]").val(idsstr);
console.log(ids);
}).jstree({
"core":{"check_callback":true},
"plugins":["types","checkbox"], //选择复选框类型
"types":{
"default":{"icon":"fa fa-folder"} //图标使用fw的图标库
}
});
})
//HTML代码片段
<div class="col-sm-9 " id="jstree">
<ul>
<!--data-jstree='{ "selected":true }' 加上,便可以默认选中当前复选框-->
<li data-jstree='{ "selected":true }' class="" id="trace1">父级
<ul>
<li data-jstree='{ "selected":true }' class="" id="trace12">{子级</li>
</ul>
</li>
</ul>
</div>
完成效果