JQueryEasyUI学习笔记(十四)tree

欢迎大家转载,转载请注明出处!

希望这个笔记对自己和大家有用,但是本人水平有限,如果出错的地方,希望大家指出,多多批评,谢谢!

今天是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

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

你可能感兴趣的:(jquery)