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>
