树状结构---用jquery的小插件jquery.treeview实现树状结构

用jquery的小插件jquery.treeview实现树状结构

步骤：

1)在页面中引入相应的js、和css文件(还有相应的图片)

 

<!-- 1，导入js与css文件 -->

        <script type="text/javascript" src="lib/jquery.js"></script>

        <script type="text/javascript" src="jquery.treeview.js"></script>

        <link rel="stylesheet" type="text/css" href="jquery.treeview.css">

 

2、写要显示的<ui><li>列表

例子：

<ul id=" tree" class=" filetree">

            <li><input type="checkbox"><span class=" folder">系统管理</span>

                <ul>

                    <li><input type="checkbox">

                        岗位管理

                        <ul>

                            <li>岗位列表</li>

                            <li>岗位删除</li>

                        </ul>

                    </li>

                    <li>部门管理</li>

                    <li>用户管理</li>

                </ul>

            </li>

            <li>网上交流</li>

        </ul>

 

3、文档加载完后执行treeview插件

        <script type="text/javascript">

            $(function(){

                $(" #tree").treeview();

            });

        </script>

插件github 下载:

https://github.com/adobe1992/async-jquery-treeview