<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tree.js"></script>
<script type="text/javascript" src="js/plugins/jquery.tree.checkbox.js"></script>
<script type="text/javascript" src="tree.js"></script>
<link href="js/themes/checkbox/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="tree"></div>
</body>
</html>
tree.js的代码
$(function () {
$.ajaxSetup({cache:false});
$("#tree").tree({
data : {
type : "json",
async : true,
opts : {
async : true,
method : "GET",
//向后台发送请求的url或json格式的数据文件
url : "json_data.json"
}
},
root : { attributes : { "id" : "0" }, data : "ROOT", state : "closed"},
lang:{
loading:"目录加载中……"
},
ui:{
theme_name:'checkbox'
},
callback : {
// Make sure static is not used once the tree has loaded for the first time
onload : function (t) {
t.settings.data.opts.static = false;
},
beforedata : function (n, t) {
if (n == false)
t.settings.data.opts.static = t.settings.root;
else
return {parent_Id : $(n).attr("id") }
},
//checkbox树展开之后,设置节点为选中状态
onopen_all : function() {
var selectedIds = [];
for (var i = 0; i < selectedIds.length; i++) {
jQuery.tree.plugins.checkbox.check($("#"+ selectedIds[i]+""));
}
}
},
plugins:{
checkbox:{}
}
});
});