jstree使用心得

前端之家收集整理的这篇文章主要介绍了jstree使用心得前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

jstree官网:https://www.jstree.com/

1.需要导入的文件

<link rel="stylesheet" href="dist/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="dist/jstree.min.js"></script>


2.在页面上创建一个jstree容器(div)

<div id="jstree_demo_div"></div>

3.创建一个jstree实例

<script type="text/javascript">
	$('#jstree_demo_div1').jstree({'plugins':["wholerow","checkBox"],'core' : {
		'data' : [
			{
				"text" : "Same but with checkBoxes","children" : [
					{ "text" : "initially selected","state" : { "selected" : true } },{ "text" : "custom icon URL"},{ "text" : "initially open","state" : { "opened" : true },"children" : [ "Another node" ] },{ "text" : "custom icon class"}
				]
			},"And wholerow selection"
		]
	}});
</script>

效果


4.ajax动态加载jstree

$.getJSON("/FIMS/api/rest/RolePermission/loadPermissionTreeData",{ts_role_id:ts_role_id},function(json){
		$('#rolePermissionTree').jstree({'plugins':['checkBox'],'core' : {
				'data' : json.datalist
		}});
	}
);

5.清空树(数据库的信息更新后想要刷新树,先要清空树)

$('#perjstree').data('jstree',false).empty();

6.绑定节点点击事件

$('#orgjstree').bind("activate_node.jstree",function (obj,e) {
	// 获取当前节点
	alert(e.node.id);//得到被点击节点的id
});

7.得到所有被选中的节点的id(先加上'plugins':["checkBox"],使所有的节点前面加上checkBox

var ids = $('#rolePermissionTree').jstree().get_checked(); 



猜你在找的Ajax相关文章