依赖Jquery自定义树组件的基本用法

项目中需要自定义树组件，今天就介绍一下自定义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>

二 实例演示

1. 核心参数的配置

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);
	   }
	});

2. 前后端数据交互格式

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": [

                ]
            }
        ]
    },
];

三 获取选中节点参数

1. JS调用方法

 let m = new MTree();
 // 获取当前选中的所有节点
 let checkRoleNodes = m.getChecked('#menuTree');

2. 返回数据格式是一个数组对象
3. 参数
   getChecked方法的传递的参数值是需要获取选中节点的Id ------必填值

四 根据数据渲染节点的选中状态

1. 调用方法

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 ------必填值
第二个参数是需要搜索的参数值 ------必填值