今天是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（排序）

这样呢，基本上异步请求就可以解决了；

源码下载

easyui1.3帮助文档（中文）不过我建议直接看官网的api

今天就这些了，睡觉去...