jsTree外掛程式的簡單的應用

來源:互聯網
上載者:User

靜態顯示頁面:

<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">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    font-size: 12px;
}
-->
</style>
    </head>
    <body>
        <div id="demo">
            
        </div>
    </body>
</html>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.