在bootstrap中实现treeview

目前想做一个权限管理的页面，最后考虑用Treeview实现，不过好像没有找到好的treeview实现方法，只好自己实现了，目前只是实现了页面的显示，具体的操作慢慢修改了。

    <div class="row">
        <div class="col-md-6">
            <ul class="sidebar-menu" data-widget="tree">
                <li class="treeview active">
                    <a href="#">
                        <i class="fa fa-share"></i> <span>Menu</span>
                        <span class="pull-right-container">
                            <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#"><i class="fa fa-circle-o"></i> Document Template1</a></li>
                        <li class="treeview active">
                            <a href="#">
                                <i class="fa fa-circle-o"></i> Document Template
                                <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>

                            </a>

                            <ul class="treeview-menu">
                                <li><a href="#"><input type="checkbox" />  Visable</a></li>
                                <li><a href="#"><input type="checkbox" />  Add</a></li>
                                <li><a href="#"><input type="checkbox" />  Delete</a></li>
                                <li><a href="#"><input type="checkbox" />  Delete1</a></li>
                                <li class="treeview">
                                    <a href="#">
                                        <i class="fa fa-circle-o"></i> Level Two
                                        <span class="pull-right-container">
                                            <i class="fa fa-angle-left pull-right"></i>
                                        </span>
                                    </a>
                                    <ul class="treeview-menu">
                                        <li><a href="#"><input type="checkbox" /><i class="fa fa-circle-o"></i> Level Three</a></li>
                                        <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a><input type="checkbox" /></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>

                        <li class="treeview active">
                            <a href="#">
                                <i class="fa fa-circle-o"></i> Document Employee
                                <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>

                            </a>

                            <ul class="treeview-menu active">
                                <li><a href="#"><input type="checkbox" />  Visable</a></li>
                                <li><a href="#"><input type="checkbox" />  Add</a></li>
                                <li><a href="#"><input type="checkbox" /> Delete</a></li>
                                <li><a href="#"><input type="checkbox" />  Delete1</a></li>
                                <li class="treeview">
                                    <a href="#">
                                        <i class="fa fa-circle-o"></i> Level Two
                                        <span class="pull-right-container">
                                            <i class="fa fa-angle-left pull-right"></i>
                                        </span>
                                    </a>
                                    <ul class="treeview-menu">
                                        <li><a href="#"><input type="checkbox" /><i class="fa fa-circle-o"></i> Level Three</a></li>
                                        <li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a><input type="checkbox" /></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>

                        <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>