jstree 1.0-rc3回显功能

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../../../js/common/common.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>菜单树</title>
<link href="${ct}/easyui/pages/css/basic_info.css" rel="stylesheet">
<script src="${ct}/js/jstree/jquery-jstree.js" type="text/javascript"></script>
</head>

<body>
	<div class="ibox-content">
		<div id="using_json"></div>
	</div>
	<input type="button" value="打开选择的id" onclick="getMenuIds()">
</body>
<script>
	var menuids;
	$(function() {
		$.ajaxSetup({
			cache : false
		});
		selectTree();//回显
		factory_tree();//初始化树结构
	});

	function factory_tree() {
		$("#using_json").jstree({
			"plugins" : [ "themes", "json_data", "ui", "checkbox" ],
			"json_data" : {
				"ajax" : {
					"url" : 'jstree2.json',
					"data" : function(n) {
						console.log('data', n);
						return {
							id : n.attr ? n.attr("id") : ""
						};
					}
				}
			},
			"themes" : {
				"theme" : "default",
				"dots" : true,
				"icons" : true
			}
		}).bind("select_node.jstree", function(event, data) {
			//点击行
			var ids = [];
			var nodes = $("#using_json").jstree("get_checked"); //使用get_checked方法
			$.each(nodes, function(i, n) {
				ids.push($(n).attr("id"));
			});
			alert(ids.join(','));//这里只有它前面多选框选中了才会弹出id的值

		})
		.bind("load_node.jstree", function(event) {
			selectMenus();
		})
	}

	//回显
	//再次授权查询节点id（回显）
	function selectTree() {
		$.get("jstree2.json", function(data) {//这里的url，和请求方式请根据实际情况而定，目前使用本地存储模拟回显
			var usermenus = JSON.parse(localStorage.getItem('select'))
			menuids = usermenus;
		});
	}

	function getMenuIds() {//这里其实模拟的是发送服务器后服务器的保存数据
		var ids = [];
		var nodes = $("#using_json").jstree("get_checked"); //使用get_checked方法
		$.each(nodes, function(i, n) {
			ids.push($(n).attr("id"));
		});
		alert(ids.join(','));
		localStorage.setItem('select', JSON.stringify(ids));
	}
	$('#using_json').on("changed.jstree", function(e, node) { //触发事件
		var nodes = $("#using_json").jstree("get_checked"); //法获取所有被选中的Item的信息
		console.log('得到选中的id', nodes);
		localStorage.setItem('select', JSON.stringify(nodes));
	});

	function selectMenus() {
		if (menuids != "" && menuids != undefined) {
			var strs = menuids;//id的数组
			console.log('select', strs);
			$("#using_json li").each(
			function() {
				for (var i = 0; i < strs.length; i++) {
					if ($(this).attr("id") == strs[i]) {
						$(this).andSelf().removeClass(
								"jstree-unchecked jstree-undetermined")
								.addClass("jstree-checked");
						break;
					}
				}
			});
		}
	}
</script>

</html>

jstree 1.0-rc3回显功能

jstree2的json：

[ {
	"attr" : {
		"id" : "1204",
		"name" : "A Node"
	},
	"data" : "A Node"
}, {
	"attr" : {
		"id" : "1205",
		"name" : "B Node"
	},
	"data" : "B Node"
} ]