使用Jquery的treeview

Posted on 2013-08-15 22:54 Wuqh 阅读(304) 评论(0) 收藏举报

在很多系统中都有树形结构的设计，比如部门、分类，在Web系统中需要把整棵形象的显示出来，自己写代码实现是可以做到的，但是会很耗时间，大大的降低了工作的效率，在工作上需要用到这样的功能，所以上网找了下资料，发现jquery的Treeview挺好的，觉得把它用在项目中，在这里把它累积下来作为自己的东西，同时共享给广大的程序猿同胞。

网页代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>树形结构</title>
    <script src="jquery-1.8.2.js" type="text/javascript"></script>
    <link href="jquery.treeview/jquery.treeview.css" rel="stylesheet" type="text/css" />
    <script src="jquery.treeview/jquery.treeview.js" type="text/javascript"></script>
    
    <script language="javascript" type="text/javascript">
        /*这里要先引用jquery类库*/
        $(function () {
            $("#rootNode").treeview({ collapsed: true });
            var objRoot = $("#rootNode").children("li");
            objRoot.children("span").click();
            var objClassList = objRoot.children("ul").children("li");

            /*打开第一个节点*/
            if (objClassList.length > 0) {
                objClassList.eq(0).children("span").click();
            }

        });
    </script>
</head>
<body>
    <ul id="rootNode" class="filetree" style="margin: 0;padding: 0;">
        <li><span class="folder">所有权登记</span>
            <ul>    
                <li><span class="folder">初始登记</span>     
                    <ul>
                        <li class="mfile" ondblclick="#"><span class="leaf">商品房</span> </li>     
                        <li class="mfile" ondblclick="#"><span class="leaf">商品房</span> </li> 
                    </ul>
                </li>

                <li><span class="folder">转移登记</span>
                    <ul>
                        <li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
                        <li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>  
                        <li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
                        <li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
                    </ul>
                </li>

                <li><span class="folder">变更登记</span>
                    <ul>
                        <li class="mfile" ondblclick="#"><span class="leaf">商品房</span> </li>     
                        <li class="mfile" ondblclick="#"><span class="leaf">商品房</span> </li> 
                    </ul>
                </li>

            </ul>
        </li>

        <li><span class="folder">抵押权登记</span>
            <ul>
                <li><span class="folder">一般抵押权登记</span>
                    <ul>
                        <li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
                        <li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>  
                        <li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
                        <li class="mfile" ondblclick="#"> <span class="leaf">设立登记</span> </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

截图如下：

刷新页面返回顶部

Wuqh

公告

使用Jquery的treeview