您的位置：首页 > Web前端 > JavaScript

jsTree插件的简单的应用

2013-10-01 21:27 375 查看

静态的显示页面：

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CMS 后台管理工作平台</title>

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>

<script type="text/javascript" src="js/jquery.jstree.js"></script>

<script language="javascript">

/** 第一种写法

$(function() {

//将menuContainer变成一棵树！

$("#demo").jstree( {

"json_data":{

"data":

[

{

"data":"齐齐哈尔大学",

//第一种给对象添加属性

"attr":{"id":"12","name":"hh"},

"children":["child1","child2"]

}

]

},

"plugins" : [ "themes", "json_data" ]

});

});

**/

//第二种写法,注意是添加attr

$(function() {

//将menuContainer变成一棵树！

$("#demo").jstree( {

"json_data":{

"data":

[

{

"data":{

"title":"大学",

"attr":{"href":"www.baidu.com","target":"_top"}

},

"attr":{"id":"12","name":"hh"},

"children":[

{"data":"教务处"},

{"data":

{

"title":"中主一楼",

"attr":{"href":"www.qida.com"}},

"children":["学籍科","办公室"]

}

]

}

]

},

"plugins" : [ "themes", "json_data" ]

});

});

</script>

<style type="text/css">



</style>

</head>

<body>

<div id="demo">

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航