jstree

jstree：树状应用插件

引入themes/default/style.min.css；jquery-1.8.3.min.js；jstree.min.js

<h1>HTML demo</h1>
<div id="data" class="demo"></div>
<div id="lazy" class="demo"></div>

<script>
// inline data demo
$('#data').jstree({
"plugins":["checkbox"],
'core' : {
'data' : [
{ "text" : "Root node", "children" : [
{ "text" : "Child node 1" },
{ "text" : "Child node 2" }
]}
]
}
});

//Lazy loading demo(从后台获取数据)
$('#lazy').jstree({
"plugins":["checkbox"],
'core' : {
'data' : {
"url" : "//www.jstree.com/fiddle/?lazy",
"data" : function (node) {
return { "id" : node.id };
}
}
}
});

//提交按钮(向后台返回数据)
    $("#submitBtn").on("click",function(){
  var data=$('#lazy').jstree(true).get_selected();//被选中的节点数据
  if(data&&data.length>0){
  $.post('${ctx}/web/admin/roleResFormPost',{
  res_ids:data.toString(),
     role_id:'${role_id}'
  },function(){
  var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
     parent.layer.close(index);
  });
  }
  });

</script>