jquery treeview 插件参数表明

treeview开源地址:https://github.com/jzaefferer/jquery-treeview

1、animated:String or Number
安装展开子节点时的显示速度,有 slow、normal、fast 或然钦命速度值,与
jQuery 的 hide(show)中的 speed 参数相似。

此间有个难点,如若应用动态的功效,那时候给人1闪壹闪的感到,假设不希罕可以不选用那天性格就足以,这样就从未有过那种一闪壹闪的觉得了

 

2、persist:String
记得折叠的法子。location:页面刷新不保留折叠状态;cookie:页面刷新保留折叠状态。

3、collapsed:boolean  Default: false, all expanded
开首化时的折叠状态。true,开端化为缩小节点状态;false,为全方位节点开始展览。

4、unique:boolean  Default: false
进展同级节点的唯一性。true,当举行一个节点时,同级的其余节点会活动关闭;false,当举行1个节点时,同级的其他节点保持精神。

5、control:Selector
点名八个器皿,控制总体tree的开始展览,减弱 也许收放 全体的节点。

example

$(".selector").treeview({
   control: "#container"
})

6.toggle:Callback
当三个节点的收放状态改变时,调用自定义函数Callback。

example

$(".selector").treeview({
   toggle: function() {
       console.log(this + " has been toggle");
   }
})

7.add:Selector
向已某个树中追加节点,selector
为急需追加的节点集合,该集合中的节点须与已有树的节点结构保持壹致。

example

var tree = $(".selector").treeview();
$(".button").click(function() {
  var newSublist =  $("<li>New Sublist<ul>" +
     "<li>Item1</li>" +
     "<li>Item2</li></ul></li>").appendTo(tree);
  tree.treeview({
    add: newSublist
  });
});

8.cookieId:String
安装 persist: cookie 后 用此参数设置cookie 的名目。

9.url:String
异步加载时,设置url 地址。

上面就来看望哪些的实用

法定参考网址包蕴德姆o下载:http://bassistance.de/jquery-plugins/

html页引用和JS部分

<head runat="server">
    <%-- 文件引用部分,该部分都可从官方参考Demo中获得,其中cookie为上述参数“persist”服务来记录刷新前展示信息--%>
    <link href="jquery.treeview.css" rel="stylesheet" type="text/css" />
    <script src="http://www.cnblogs.com/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="jquery.cookie.js" type="text/javascript"></script>
    <script src="jquery.treeview.js" type="text/javascript"></script>
    <title></title>
<script type="text/javascript">
    $(function () {
        $("#tree1").treeview({
            collapsed: true,
            control: "#sidetreecontrol",
            persist: "cookie",
            unique: true,
            toggle: function (e) {
                $('ul', this).html('<li><a href=\"?/index.cfm\"><strong>hello</strong></a></li>');//这儿可以替换异步取数据函数
                e.preventDefault();//阻止事件冒泡
            }
        });
    })    
    </script>
</head>

 

Body结构

<ul id="navigation">
            <li><img src="jsolder.gif" /><a href="?1">Item 1</a>
                <ul>
                    <li><img src="jsile.gif" /><a href="?1.0">Item 1.0</a>
                        <ul>
                            <li><a href="?1.0.0">Item 1.0.0</a></li>
                        </ul>
                    </li>
                    <li><a href="?1.1">Item 1.1</a></li>
                    <li><a href="?1.2">Item 1.2</a>
                        <ul>
                            <li><a href="?1.2.0">Item 1.2.0</a>
                                <ul>
                                    <li><a href="?1.2.0.0">Item 1.2.0.0</a></li>
                                    <li><a href="?1.2.0.1">Item 1.2.0.1</a></li>
                                    <li><a href="?1.2.0.2">Item 1.2.0.2</a></li>
                                </ul>
                            </li>
                            <li><a href="?1.2.1">Item 1.2.1</a>
                                <ul>
                                    <li><a href="?1.2.1.0">Item 1.2.1.0</a></li>
                                </ul>
                            </li>
                            <li><a href="?1.2.2">Item 1.2.2</a>
                                <ul>
                                    <li><a href="?1.2.2.0">Item 1.2.2.0</a></li>
                                    <li><a href="?1.2.2.1">Item 1.2.2.1</a></li>
                                    <li><a href="?1.2.2.2">Item 1.2.2.2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="?2">Item 2</a>
                <ul>
                    <li>Item 2.0
                        <ul>
                            <li><a href="?2.0.0">Item 2.0.0</a>
                                <ul>
                                    <li><a href="?2.0.0.0">Item 2.0.0.0</a></li>
                                    <li><a href="?2.0.0.1">Item 2.0.0.1</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="?2.1">Item 2.1</a>
                        <ul>
                            <li><a href="?2.1.0">Item 2.1.0</a>
                                <ul>
                                    <li><a href="?2.1.0.0">Item 2.1.0.0</a></li>
                                </ul>
                            </li>
                            <li><a href="?2.1.1">Item 2.1.1</a>
                                <ul>
                                    <li><a href="?2.1.1.0abc">Item 2.1.1.0</a></li>
                                    <li><a href="?2.1.1.1">Item 2.1.1.1</a></li>
                                    <li><a href="?2.1.1.2">Item 2.1.1.2</a></li>
                                </ul>
                            </li>
                            <li><a href="?2.1.2">Item 2.1.2</a>
                                <ul>
                                    <li><a href="?2.1.2.0">Item 2.1.2.0</a></li>
                                    <li><a href="?2.1.2.1">Item 2.1.2.1</a></li>
                                    <li><a href="?2.1.2.2">Item 2.1.2.2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="?3">Item 3</a>
                <ul>
                    <li class="open"><a href="?3.0">Item 3.0</a>
                        <ul>
                            <li><a href="?3.0.0">Item 3.0.0</a></li>
                            <li><a href="?3.0.1">Item 3.0.1</a>
                                <ul>
                                    <li><a href="?3.0.1.0">Item 3.0.1.0</a></li>
                                    <li><a href="?3.0.1.1">Item 3.0.1.1</a></li>
                                </ul>
                            </li>
                            <li><a href="?3.0.2">Item 3.0.2</a>
                                <ul>
                                    <li><a href="?3.0.2.0">Item 3.0.2.0</a></li>
                                    <li><a href="?3.0.2.1">Item 3.0.2.1</a></li>
                                    <li><a href="?3.0.2.2">Item 3.0.2.2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

 

加载节点时只要数据量非常大,可先加载主节点,子节点通过参数toggle来异步加载
由treeview树的规律,大家得以从数据库中来加载所必要的树

jQuery 1

<%
            DALZzjg dal = new DALZzjg();
            DALYhxx ydal = new DALYhxx();
            List<Xtgl_Zzjg> lists = new List<Xtgl_Zzjg>();
            lists = dal.FindWhere(" zzjg_npcode='10' ");
            string str = "<ul id=\"tree1\">";
            str += "<li><a href=\"?/index.cfm\"><strong>Home</strong></a>";
            if (lists.Count > 0)
            {
                str += "<ul>";
                foreach (Xtgl_Zzjg c in lists)
                {
                    str += "<li><a href=\"?/index.cfm\"><strong>" + c.Zzjg_Nmc + "</strong>" + c.Zzjg_Ncode + "</a>";
                    DALUserAndDep yydal = new DALUserAndDep();
                    List<View_UserandDep> listschild = new List<View_UserandDep>();
                    listschild = yydal.FindWhere(" zzjg_ncode='" + c.Zzjg_Ncode + "' order by px ");
                    if (listschild.Count > 0)
                    {
                        str += "<ul>";
                        foreach (View_UserandDep p in listschild)
                        {
                           // str += "<li><a href=\"?/index.cfm\"><strong>" + p.Yhxx_Nname + "</strong></a></li>";
                        }
                        str += "</ul>";
                    }
                    str += "</li>";
                }
                str += "</ul>";
            }
            str += "</li></ul>";
            Response.Write(str);
        %>

jQuery 2

相关文章

网站地图xml地图