基于layui自定义树形组件

基于layui自定义树形组件文档 - layui.sw365tree

简介：针对于自己的需求所自定义的树形组件

模块加载名称：sw365tree

1· 快速使用

var tree = layui.sw365tree;
通过 () 方法指定一个元素，便可快速创建一个 tree 实例。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>自定义树组件</title>
  <link rel="stylesheet" href="../src/css/">
</head>
<body>
  <div id="test1"></div>
  <script src="../src/"></script>
  <script>
  layui.use('sw365tree', function(){
    var tree = layui.sw365tree;
   
    //渲染
    var inst1 = tree.render({
      elem: '#test1'  //绑定元素
      ,data: [{
        title: '研发中心' //一级菜单
        ,id: 1
        ,parentId: 0
        ,children: [{
          title: '项目开发部' //二级菜单
          ,id:5
          ,parentId: 1
          ,children: [{
            title: '前端开发工程师' //三级菜单
            //…… //以此类推，可无限层级
          }]
        }]
      },{
        title: '产品中心' //一级菜单
        ,id: 2
        ,parentId: 0
        ,children: [{
          title: '产品经理' //二级菜单
          ,id: 6
          ,parentId: 2
          ,children: []
        }]
      }]
    });
  });
  </script>
</body>
</html>

2· 基础参数

参数选项	说明	类型	示例值
elem	指向容器选择器	String/Object	-
data	数据源	Array	详见数据源属性选项
id	设定实例唯一索引，用于基础方法传参使用。	String	-
showRadio	是否显示单选框	Boolean	false
showCheckbox	是否显示复选框	Boolean	false
spread	是否显示展开和折叠图标按钮	Boolean	false
allspread	是否显示全部展开和折叠图标按钮	Boolean	false
rightClick	是否允许右击节点时只操作当前节点，不级联子节点。默认 false	Boolean	false
allDisabled	节点是否全部为禁用状态。默认 false	Boolean	false

3· 数据源属性选项

layui将 data 参数称之为数据源，其内部支持设定以下选项

属性选项	说明	类型	示例值
title	节点标题	String	菜单名称
combineCode	节点唯一索引值，用于对指定节点进行各类操作	String/Number	任意唯一的字符或数字
id	节点ID，用于对指定节点进行各类操作	String/Number	字符或数字
parentId	父节点ID	String/Number	字符或数字
children	子节点。支持设定选项同父节点	Array	[{title: ‘子节点1’, id: ‘111’}]
level	当前节点层级	Number	1
href	当前节点层级	Number	1
level	该节点对应的 url	String	任意 URL

4· 节点被点击的回调

在节点被点击后触发，返回的参数如下：

tree.render({
  elem: '#test1',
  nodeClick: function(obj){
    console.log(obj.data); //得到当前点击的节点数据:nodeid、nodelevel、nodeparentid、nodehref等
    console.log(obj.checked); //得到当前树的所有选中节点的数据源
    console.log(obj.elem); //得到当前节点元素
  }
});

5· 返回选中的节点数据

很多时候 tree 可能不仅只是一个树菜单，它还用于各种权限控制等场景，这个时候你需要获得选中的节点。
语法：(id)

tree.render({
  elem: '#test1'
  ,data: [] //数据源
  ,id: 'demoId' //定义索引
});
 
//获得选中的节点
var checkData = tree.getChecked('demoId');

6· 设置节点勾选

除了通过点击节点对节点进行勾选之外，你还可以通过方法动态对节点执行勾选
语法： (id, checkedId)
参数 checkedId：代表的是数据源中的节点 id（数组）

tree.render({
  elem: '#test1'
  ,data: [] //数据源
  ,id: 'demoId' //定义索引
});
 
//执行节点勾选
tree.setChecked('demoId', [1]); //单个勾选 id 为 1 的节点
tree.setChecked('demoId', [2, 3]); //批量勾选 id 为 2、3 的节点

7· 搜索定位到节点并高亮展开

模糊匹配对节点进行搜索，定位到匹配节点展开和高亮
语法： (id, {
val: oval
})
参数 oval：代表的是需要搜索的值

tree.render({
  elem: '#test1'
  ,data: [] //数据源
  ,id: 'demoId' //定义索引
});
var oval = $("#searchName").val();
tree.searchHighlighted("demoId", {
    val: oval
});

8. 实例重载

重载一个已经创建的组件实例，被覆盖新的基础属性

tree.render({
  elem: '#test'
  ,data: []
  ,id: 'demoId' //定义索引
});
 
 //可以重载所有基础参数
tree.reload('demoId', {
  //新的参数
});

重载所有基础参数
语法： (‘demoId’, {

});
示例：

$.ajax({
	url: "/role/roleTree",
	type: "Get",
	data: { "themeName": themeName, "pageName": pageName },
	dataType: 'json',
	success: function (res) {
	   tree.reload('roleTree', {
	       data: res.Data,
	   });
	},
	error: function () {
	   alert('加载数据失败！');
	}
});

9·结语

基于layui的自定义树组件还在持续完善中…

秒客网