素材牛VIP会员

JS树形菜单插件verTree.js

 所属分类:网页特效-导航菜单

 浏览:3335次  评论:1次  更新时间:2019-03-07
牛币素材VIP可免积分下载
JS树形菜单插件verTree.js兼容IE9
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
项目地址(website):https://github.com/xingkong1993/verTree
素材描述:verTree.js是树形菜单插件,集成了表单/表格树形展示,只需引入js文件即可使用。

详细介绍

VERTREE.js 1.0

一、使用须知:

verTree.js是树形菜单插件,集成了表单/表格树形展示,只需引入js文件即可

二、方法介绍

使用verTree.js只需在js中new一个既可以使用,如下面实例:

new verTree({
     items:"#tree_list",
     type:"data",
     data:[],
     parent:"pid",
     params:"id",
     value:"name"
});  
<table id="tree_list">
 <thead>
 <tr data-tree-list="true" data-tree-changes="true">
     <th data-field="name">名称</th>
     <th data-field="jingle">别名</th>
 </tr>
 </thead>
</table>

三、属性说明

1.接口参数:

   i.  items:容器名称(推荐使用id,能够保证只有唯一的一个容器,填写时需要带上修饰符)

   ii. type:数据展示的演示,提供三种选项:

            a. data:普通数据展示(没有选择框,只显示相关数据名称)

            b. form:表单数据展示(有选择框,只显示相关数据名称)

            c.  table:表格列表数据展示,配合data参数中的data-file进行数据展示

    iii. data:原始json数组数据,在数据中必须包含children字段,否则数据树将无法识别

    iv. parent: 父级节点字段名称,默认为parent

    v. params:当前节点主键字段名称,默认为id,

    vi. value:当type不等于table时页面展示的字段名称,默认为name

2.data参数

    i. 说明:data参数主要用于当type等于table时在表格中添加的相关data参数

    ii. data-tree-list: 加载的字段集合数据列表,填写表头tr中

    iii. data-tree-changes:是否出现复选框,填写在表头tr中

    iv. data-field:当前列加载的字段名称,填写在表头td/th中

    v.  更多data参数正在开放中

四、文件目录结构

www 网站部署目录
|――verJs  verjs文件夹
|――――need  样式文件夹
|――――――common.css  verjs基础样式
|――――――treeIcon.css icon样式
|――――verTree.js  verJS文件

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

qq***15  
2020年09月27日

用来做简单的权限管理

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)