利用js实现树形菜单勾选代码verTree.



58 229 77



特效描述:利用js实现 树形菜单 勾选代码 verTree.,利用js实现树形菜单勾选代码verTree.

代码结构

1. 引入CSS

<link href="need/treeIcon.css" rel="stylesheet" type="text/css">

2. 引入JS

<script src="js/verTree.js"></script>

3. HTML代码

<form action="#">
    <ul id="tree_list"></ul>
</form>
<script>
    new verTree({
        items:"#tree_list",
        type:"form",//list:表格展示 data:一般展示 form:表单展示
        data:[{"id":16,"pid":0,"name":"系统管理","jingle":"system","href":"javascript:;","level":1,"sort":2,"icon":"icon-cog","status":1,"create_time":1531020243,"update_time":1531020299,"children":[{"id":25,"pid":16,"name":"管理员","jingle":"admin","href":"\/administrators\/index.html","level":2,"sort":1,"icon":"","status":1,"create_time":1531021892,"update_time":1531021892,"children":[{"id":28,"pid":25,"name":"新增","jingle":"add admin","href":"\/administrators\/add.html","level":3,"sort":1,"icon":"","status":1,"create_time":1538020839,"update_time":1538020839,"children":[]},{"id":29,"pid":25,"name":"编辑","jingle":"edit admin","href":"\/administrators\/edit.html","level":3,"sort":1,"icon":"","status":1,"create_time":1538020871,"update_time":1538020871,"children":[]},{"id":30,"pid":25,"name":"删除","jingle":"delete admin","href":"\/administrators\/delete.html","level":3,"sort":1,"icon":"","status":1,"create_time":1538023903,"update_time":1538023903,"children":[]}]},{"id":27,"pid":16,"name":"网站设置","jingle":"web site","href":"\/web_site_setting\/index.html","level":2,"sort":1,"icon":"","status":1,"create_time":1536912438,"update_time":1536912438,"children":[{"id":31,"pid":27,"name":"编辑","jingle":"edit site","href":"\/web_site_setting\/edit.html","level":3,"sort":1,"icon":"","status":1,"create_time":1538097015,"update_time":1538097015,"children":[]}]},{"id":32,"pid":16,"name":"友情链接","jingle":"friend link","href":"\/friend_link\/index.html","level":2,"sort":1,"icon":"","status":1,"create_time":1538278095,"update_time":1538278095,"children":[{"id":33,"pid":32,"name":"新增","jingle":"add link","href":"\/friend_link\/add.html","level":3,"sort":1,"icon":"","status":1,"create_time":1538279661,"update_time":1538279661,"children":[]}]}]},{"id":6,"pid":0,"name":"权限中心","jingle":"power","href":"javascript:;","level":1,"sort":3,"icon":"icon-lock","status":1,"create_time":1530934634,"update_time":1531020289,"children":[{"id":7,"pid":6,"name":"菜单管理","jingle":"menu","href":"\/menu\/index.html","level":2,"sort":1,"icon":"","status":1,"create_time":1530934662,"update_time":1531020115,"children":[{"id":8,"pid":7,"name":"新增菜单","jingle":"menu add","href":"\/menu\/add.html","level":3,"sort":1,"icon":"","status":1,"create_time":1530934854,"update_time":1530934854,"children":[]},{"id":9,"pid":7,"name":"编辑菜单","jingle":"menu edit","href":"\/menu\/edit.html","level":3,"sort":1,"icon":"","status":1,"create_time":1530934943,"update_time":1530934943,"children":[]},{"id":10,"pid":7,"name":"删除菜单","jingle":"menu delete","href":"\/menu\/delete.html","level":3,"sort":1,"icon":"","status":1,"create_time":1530934977,"update_time":1530934977,"children":[]}]},{"id":11,"pid":6,"name":"白名单管理","jingle":"write","href":"\/open_write\/index.html","level":2,"sort":1,"icon":"","status":1,"create_time":1530956796,"update_time":1530956796,"children":[{"id":12,"pid":11,"name":"新增名单","jingle":"write add","href":"\/open_write\/add.html","level":3,"sort":1,"icon":"","status":1,"create_time":1530963832,"update_time":1530963832,"children":[]},{"id":13,"pid":11,"name":"编辑","jingle":"write edit","href":"\/open_write\/edit.html","level":3,"sort":1,"icon":"","status":1,"create_time":1530963880,"update_time":1538018448,"children":[]},{"id":14,"pid":11,"name":"删除","jingle":"write delete","href":"\/open_write\/delete.html","level":3,"sort":1,"icon":"","status":1,"create_time":1530970686,"update_time":1538018463,"children":[]}]},{"id":15,"pid":6,"name":"角色管理","jingle":"role","href":"\/role\/index.html","level":2,"sort":1,"icon":"","status":1,"create_time":1530971574,"update_time":1530971574,"children":[{"id":22,"pid":15,"name":"查看","jingle":"role details","href":"\/role\/details.html","level":3,"sort":0,"icon":"","status":1,"create_time":1531021332,"update_time":1538018546,"children":[]},{"id":20,"pid":15,"name":"新增角色","jingle":"role add","href":"\/role\/add.html","level":3,"sort":1,"icon":"","status":1,"create_time":1531021094,"update_time":1531021094,"children":[]},{"id":21,"pid":15,"name":"编辑","jingle":"role edit","href":"\/role\/edit.html","level":3,"sort":1,"icon":"","status":1,"create_time":1531021136,"update_time":1538018922,"children":[]},{"id":23,"pid":15,"name":"删除","jingle":"role delete","href":"\/role\/delete.html","level":3,"sort":1,"icon":"","status":1,"create_time":1531021373,"update_time":1538018518,"children":[]},{"id":24,"pid":15,"name":"角色授权","jingle":"applies","href":"\/role\/apply.html","level":3,"sort":1,"icon":"","status":1,"create_time":1531021416,"update_time":1531021416,"children":[]}]}]},{"id":19,"pid":0,"name":"用户中心","jingle":"user center","href":"javascript:;","level":1,"sort":3,"icon":"icon-user","status":1,"create_time":1531020536,"update_time":1536912065,"children":[{"id":34,"pid":19,"name":"用户管理","jingle":"user","href":"\/user\/index.html","level":2,"sort":1,"icon":"","status":1,"create_time":1539824935,"update_time":1539824935,"children":[{"id":38,"pid":34,"name":"邮件推送","jingle":"email push","href":"\/user\/email_push.html","level":3,"sort":1,"icon":"","status":1,"create_time":1539828381,"update_time":1539828381,"children":[]},{"id":35,"pid":34,"name":"禁用","jingle":"disable user","href":"\/user\/disable_user.html","level":3,"sort":2,"icon":"","status":1,"create_time":1539827762,"update_time":1539828430,"children":[]},{"id":37,"pid":34,"name":"注销","jingle":"cancellation","href":"\/user\/cancellation.html","level":3,"sort":2,"icon":"","status":1,"create_time":1539827851,"update_time":1539828444,"children":[]}]}]},{"id":17,"pid":0,"name":"博客中心","jingle":"blog","href":"javascript:;","level":1,"sort":4,"icon":"icon-hot","status":1,"create_time":1531020432,"update_time":1538018320,"children":[{"id":45,"pid":17,"name":"文章管理","jingle":"blog","href":"\/blog\/index.html","level":2,"sort":1,"icon":"","status":1,"create_time":1548208237,"update_time":1548208237,"children":[{"id":46,"pid":45,"name":"文章审核","jingle":"examine","href":"\/blog\/examine.html","level":3,"sort":1,"icon":"","status":1,"create_time":1548208407,"update_time":1548208407,"children":[]}]},{"id":47,"pid":17,"name":"公告管理","jingle":"notice","href":"\/notice\/index.html","level":2,"sort":1,"icon":"","status":1,"create_time":1551319464,"update_time":1551319464,"children":[{"id":48,"pid":47,"name":"新增公告","jingle":"add notice","href":"\/notice\/add.html","level":3,"sort":1,"icon":"","status":1,"create_time":1551319880,"update_time":1551319880,"children":[]}]}]},{"id":39,"pid":0,"name":"邮件管理","jingle":"email","href":"javascript:;","level":1,"sort":4,"icon":"icon-email","status":1,"create_time":1539843564,"update_time":1539843772,"children":[{"id":40,"pid":39,"name":"模板管理","jingle":"template","href":"\/email_tpl\/index.html","level":2,"sort":1,"icon":"","status":1,"create_time":1539843814,"update_time":1539843814,"children":[{"id":41,"pid":40,"name":"新增","jingle":"add tpl","href":"\/email_tpl\/add.html","level":3,"sort":1,"icon":"","status":1,"create_time":1539844655,"update_time":1539844655,"children":[]},{"id":42,"pid":40,"name":"详情","jingle":"details","href":"\/email_tpl\/details.html","level":3,"sort":1,"icon":"","status":1,"create_time":1539912236,"update_time":1539912236,"children":[]},{"id":43,"pid":40,"name":"编辑","jingle":"edit email","href":"\/email_tpl\/edit.html","level":3,"sort":1,"icon":"","status":1,"create_time":1539912274,"update_time":1539912274,"children":[]}]}]},{"id":18,"pid":0,"name":"下载中心","jingle":"download","href":"javascript:;","level":1,"sort":5,"icon":"icon-download","status":1,"create_time":1531020491,"update_time":1531020491,"children":[]}],
        parent:"pid",
        params:"id",
        value:"name"
    });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 收缩展开 切换按钮 表单 导航菜单 收缩导航菜单 树形导航菜单 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到