LayUITree组件扩展实现（搜索功能，复选框，⾃定义节点图
标，右击菜单）（附带源码）
最近项⽬选项前端技术选型选择了LayUI，没选到的是tree组件的功能实在太弱了，没办了，只能⾃⼰修改了源码，⽬前实现了以下功能，github还没有时间更新敬请期待。那我们来看看扩展功能吧：
⼀、扩展功能
1，增加了⽬录树的搜索功能
2，增加了⽬录树的复选框和事件回调的实现
3，增加了根节点图标和叶⼦图标⾃定义设置。
4，增加右键菜单和事件回调。
让我妈看⼀下效果图吧
搜索功能效果
右键菜单实现
⼆、让我看⼀下实现源码吧
调⽤⽅式
layui.use(['tree', 'layer'], function () {
var layer = layui.layer
, $ = layui.jquery
, tree = ;
// 同步(绑定)layui的tree的搜索(过滤)框
// treeId: tree所在的容器的id
// filter: 对应的搜索框的selector或者dom对象，尽量要确保是唯⼀的节点，或者真的是要控制这个树的input
// callback: 回调参数(树节点jquery对象, 输⼊框对象, 匹配到的节点数量)
tree.syncLayuiTreeFilter = function (treeId, filter, callback) {
var treeElem = $('#' + treeId), filterElem = $(filter);
if (!filterElem.length || !filterElem.length) {
return;
}
filterElem.keyup(
function (event) {
var that = this;
var value = $(that).val().trim().toLocaleLowerCase();//不区分⼤⼩写
var HIDE = 'layui-hide';
var hintClass = 'search_hit';
/
/ 先恢复现场
treeElem.find('.' + HIDE).removeClass(HIDE);
treeElem.find('.' + hintClass).removeClass(hintClass).each(function (index, item) {
item = $(item);
item.html(item.data('textOld')).data('textOld', null);
});
// 如果有值筛选开始
if (value) {
layui.each(treeElem.find('cite'), function (index, elem) {
elem = $(elem);
var textTemp = ();
if (LocaleLowerCase().indexOf(value) === -1) {  //不区分⼤⼩写
// 不存在就隐藏
elem.closest('li').addClass(HIDE);
} else {
// 命中就添加⼀个class
elem.addClass(hintClass)
.data('textOld', textTemp)
.place(new RegExp(value, 'g'), '<span class="search_hint_text">' + value + '</span>'));
});
layui.each(treeElem.find('.' + hintClass), function (index, elem) {
elem = $(elem);
elem.parents('li').removeClass(HIDE);
elem.parents('ul').each(function (i, item) {
if (!$(item).hasClass('layui-show')) {
$(item).parent('li').find('>i').click();
}
});
elem.parents('ul').parent('li').removeClass(HIDE);
});
}
typeof callback === 'function' && callback.call(that, treeElem, filterElem, treeElem.find('.' + hintClass).length);    }
);
};
tree({
elem: '#layTree' //指定元素
,branchExtent:["Ico_fold","Ico_launch"] //树形折叠图标第⼀个是折叠样式，第⼆个展开样式
,target: '_blank' //是否新选项卡打开（⽐如节点返回href才有效）
,check: 'checkbox'
,checkboxName: 'ck'//复选框的name属性值
,checkboxStyle: ""
,drag: true
, nodes: [ //节点
{
name: '常⽤⽂件夹'
,id: 1
,alias: 'changyong'
,checked: true
,data:{
text:123,//data-text ⽤于存储数据
ceshi:456}
, children: [
{
name: '所有未读'
, id: 11
,
href: 'www.layui/'
, alias: 'weidu'
, checked: true
,leaf:"Ico_point1" //css样式
,data:{}
},
{
name: '置顶邮件'
,id: 12
,leaf:"Ico_point2"
,data:{}
}, {
name: '邮件标签邮件'
,id: 13
,leaf:"Ico_point3"
,data:{}
,children: [
{
name: '所有未读'
, id: 11
, href: 'www.layui/'
, alias: 'weidu'
,
checked: true
, leaf:"Ico_point1" //css样式
,data:{}
},
name: '置顶邮件'
,id: 12
,leaf:"Ico_point2"
,data:{}
}, {
name: '邮件标签邮件'
,id: 13
,
leaf:"Ico_point3"
,data:{}
}
]
}
]
}
]
,click: function(node){
console.log(node) //node即为当前点击的节点数据
var as= $("#layTree").find('a');
$.each(as,function (index,obj) {
if($(obj).children("cite").text()=='置顶邮件') {
console.log($(obj).parent());
$(obj).parent().append("<ul class=\"layui-show\"><li><i style=\"paddling-left: 28px;\"></i><input type=\"checkbox\" name=\"ck\" checked=\"checke
//element.init();
// der();
return false;
}
})
},
onchange: function (event,item){//当当前input发⽣变化后所执⾏的回调
console.log(item); //item即为当前点击的节点数据
console.log(event); //事件源
}
,rightClick:function(event,elem) {
console.log("你的⿏标右击了我！"+elem);
console.log(elem);
event.preventDefault();
return false;
}
});
tree.syncLayuiTreeFilter('layTree', '[name="searchTree"]', function (treeElem, filterElem, hitNumbers) {
console.log('hitNumbers', hitNumbers);
layer.msg('到' + hitNumbers + '个节点');
});
jquery是什么功能组件tree.js 源码
//扩展⽇志  author:wangxianyang
//1，增加复选框并且加上了事件回调和参数传递
//2，增加了折叠图标和叶⼦图标的⾃定义扩展
//3，增加了右击菜单事件和参数传递
//4，增加了tree的搜索功能（模糊匹配不区分⼤⼩写）
;
layui.define("jquery",
function(e) {
"use strict";
var o = layui.jquery,
a = layui.hint(),
r = "layui-tree-enter",
this.options = e
},
t = {
arrow: ["", ""],
checkbox: ["", ""],
radio: ["", ""],
branch: ["", ""],
leaf: ""
},
branchExtent,//折叠图标扩展
leafExtent="",//叶⼦图标扩展
leftClick=true,
num = 1;
i.prototype.init = function(e) {
var o = this;
branchExtent=o.options.branchExtent||["",""];
e.addClass("layui-box layui-tree"),
o.options.skin && e.addClass("layui-tree-skin-" + o.options.skin),
<(e),
<(e)
//e.preventDefault();
false;
},
= function(e, a) {
var r = this,
i = r.options,
n = a || i.nodes;
layui.each(n,
function(a, n) {
var id = r.uuid();
n.id = id;
//console.log(n.data);
if (n.children) {
layui.each(n.children,
function(index, item) {
item.pid = n.id;
});
}
var l = n.children && n.children.length > 0,
c = o('<ul class="' + (n.sprea
d ? "layui-show": "") + '"></ul>'),
s = o(["<li " + (n.spread ? 'data-spread="' + n.spread + '"': "") + ">",
function() {
return l ? '<i class="layui-icon layui-tree-spread">' + (n.spread ? t.arrow[1] : t.arrow[0]) + '</i>': '<i ></i>';
} (),
function() {
var eleStr = i.check && i.check == "checkbox" ? '<input type="checkbox" name="' + i.checkboxName + '" ' + ((n.checked && n.checked == true) ? '                          if (eleStr.length > 0) {
if (n.data && String.call(n.data) == "[object Object]") {
for (var attr in n.data) {
eleStr += ' data-' + attr + '=' + n.data[attr];
}
}
eleStr += ' />';
}
return eleStr;
} (),
function() {
//debugger;
//return '<a href="' + (n.href || "javascript:;") + '" ' + (i.target && n.href ? 'target="' + i.target + '"': "") + ">" + ('<i class="layui-icon layui-tree-' + (l ? "b                          return '<a href="' + (n.href || "javascript:;") + '" '
+ (i.target && n.href ? 'target="' + i.target + '"': "") + ">"
+ ('<i class="layui-icon ' + (l ? n.spread ? branchExtent[1] : branchExtent[0] : n.leaf) + '">'
+ "</i>") + ("<cite>" + (n.name || "未命名") + "</cite></a>")
} (), "</li>"].join(""));

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。