首頁 > 開發者 > JavaScript

JQueryEasyUI學習筆記（十四）tree

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天是easyui的Tree架構：
個人覺得easyui的Tree架構是比較難搞的，尤其是拼接tree的json資料的時候，稍有差池，就不會顯示，大家使用的時候仔細下就好；

再有就是推薦一款國人寫的Tree外掛程式：ZTree，很好用，大家可以自己學習一下上面demo寫的很全面；

不說廢話了，直接上代碼：

View Code
<head>
    <link id="easyuiTheme" href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" />
    <link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
    <script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
    <script src="JavaScript.js"></script>
    <!--這個是擴充Jquery的方法-->
    <script src="jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
    <script src="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(function () {
            var tree = $("#tt2").tree({
                url: 'JsonTree.ashx'
            });
        });
    </script>
</head>
<body>
    <!--這種方式是直接html方式實現easyui的Tree架構,lines屬性直接實現tree架構前面的虛線-->
    <ul id="tt" class="easyui-tree" lines="true">
        <li>
            <span>Folder</span>
            <ul>
                <li>
                    <span>Sub Folder 1</span>
                    <ul>
                        <li>
                            <span><a href="#">File 11</a></span>
                        </li>
                        <li>
                            <span>File 12</span>
                        </li>
                        <li>
                            <span>File 13</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <span>File 2</span>
                </li>
                <li>
                    <span>File 3</span>
                </li>
            </ul>
        </li>
        <li>
            <span>File21</span>
        </li>
    </ul>
    <ul id="tt2"></ul>
</body>
</html>

這裡只是寫了下Tree架構的基本使用，具體Json格式資料的拼接我就不詳細說了，其實無非就是一些節點的選擇與添加：

•id:節點id,這個很重要到載入遠程伺服器資料
•text: 顯示的節點文本
•state: 節點狀態, 'open' 或者 'closed', 預設是 'open'. 當設定為 'closed', 節點所有的子節點將從遠程伺服器網站載入
•checked: 指明檢查節點是否選中.
•attributes: 可以添加到節點的自訂屬性
•children: 一個節點數組,定義一些子節點
html代碼實現Tree架構的時候，我們可以看出，就是ul標籤套ul標籤，其實我個人認為其json格式資料也是這樣的，慢慢分析一下，是可以搞懂的；

樹json範例程式碼，其中我們也可以控制一些tree的屬性，虛線，摺疊，表徵圖等等：

View Code
[{  
    "id":1,  
    "text":"Folder1",  
    "iconCls":"icon-save",  
    "children":[{  
        "text":"File1",  
        "checked":true 
    },{  
        "text":"Books",  
        "state":"open",  
        "attributes":{  
            "url":"/demo/book/abc",  
            "price":100  
        },  
        "children":[{  
            "text":"PhotoShop",  
            "checked":true 
        },{  
            "id": 8,  
            "text":"Sub Bookds",  
            "state":"closed" 
        }]  
    }]  
},{  
    "text":"Languages",  
    "state":"closed",  
    "children":[{  
        "text":"Java" 
    },{  
        "text":"C#" 
    }]  
}]

再有就是說一下以樹為菜單時的非同步載入代碼：

var tree = $("#tt2").tree({
                url: 'JsonTree.ashx'
            });

直接這樣，url指向一個ashx或者action發送請求就可以了，然後在點擊展開tree的時候，根據父節點去資料庫請求子節點，這樣就可以了，請求的地址肯定是要判斷請求的節點層級；

資料庫欄位設計：id、pid（節點層級）、text（顯示名稱）、url（指向地址）、seq（排序）

這樣呢，基本上非同步請求就可以解決了；

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More