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.绑定节点点击事件

$('#jstree_demo_div').bind("click.jstree", function (e) {
        // 获取当前节点
        var id = $(e.target).parents('li').attr('id');
        var parent = $('#jstree_demo_div').jstree().get_node("#"+id).parent;
        var text = $('#jstree_demo_div').jstree().get_node("#"+id).text;
    });

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

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



  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值