项目中需要自定义树组件,今天就介绍一下自定义365tree的基本用法
【简介】365tree 是一个依靠 jQuery 实现的基本功能 “树插件”
- 配置方式采用jQuery与JSON的语法结构,参数配置简单,较易上手。
- 支持极其灵活的 checkbox 或 radio 选择功能。
- 带搜索功能的高亮
- 提供多种事件响应回调。
- 在一个页面内可同时生成多个 Tree 实例
一 准备工作
从github上下载源码,将css,img,js文件引入到项目中,如下所示:
<link rel="stylesheet" href="/public/365tree/css/365tree.css">
<script type="text/javascript" src="/public/javascripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/public/365tree/js/365tree.js"></script>
二 实例演示
- 核心参数的配置
let m = new MTree();
m.render({
elem: '#menuTree',
data: data.data,
showRadio: true, // 单选
// showCheckbox: true, // 复选
allspread: true,
id: 'menuTree',
nodeClick: function(data){ // 节点点击回调
console.log(data);
}
});
- 前后端数据交互格式
var nodes = [
{
"title": "产品中心",
"id": 1,
"parentId": 0,
"checked": null,
"children": [
{
"title": "产品总监",
"id": 5,
"parentId": 1,
"checked": null,
"children": [
]
},
{
"title": "产品助理",
"id": 6,
"parentId": 1,
"checked": null,
"children": [
]
}
{
"title": "测试角色",
"id": 130,
"parentId": 1,
"checked": null,
"children": [
]
}
]
},
{
"title": "产品中心",
"id": 1,
"parentId": 0,
"checked": null,
"children": [
{
"title": "产品总监",
"id": 5,
"parentId": 1,
"checked": null,
"children": [
]
},
{
"title": "产品助理",
"id": 6,
"parentId": 1,
"checked": null,
"children": [
]
}
{
"title": "测试角色",
"id": 130,
"parentId": 1,
"checked": null,
"children": [
]
}
]
},
];
三 获取选中节点参数
- JS调用方法
let m = new MTree();
// 获取当前选中的所有节点
let checkRoleNodes = m.getChecked('#menuTree');
- 返回数据格式是一个数组对象
- 参数
getChecked方法的传递的参数值是需要获取选中节点的Id ------必填值
四 根据数据渲染节点的选中状态
- 调用方法
let m = new MTree();
m.setChecked('#menuTree', ids, null, false);
2 参数
第一个参数是需要渲染节点的树的ID ------必填值
第二个参数是需要渲染节点的ID数组(Array) ------必填值
第三个参数值是是否自定义节点的ID值 ------非必填值
第四个参数是是否级联标识(布尔值) ------非必填值
五 模糊搜索,树节点高亮
1.调用方法
let oval = $("#search").val(); // 需要搜索的值
let = new MTree();
m.searchHighlighted("#menuTree", {
val: oval
});
2 参数
第一个参数是需要渲染节点的树的ID ------必填值
第二个参数是需要搜索的参数值 ------必填值