jsTree插件的简略的应用

2013-10-02

jsTree插件的简单的应用静态的显示页面：htmlheadbase href%basePath%meta http-equivConte

jsTree插件的简单的应用

静态的显示页面：

<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>

热点排行

Bad Request.

JavaScript

jsTree插件的简略的应用