2023年7月7日发(作者：)

LayUITree组件扩展实现（搜索功能，复选框，⾃定义节点图标，右击菜单）（附带源码）最近项⽬选项前端技术选型选择了LayUI，没选到的是tree组件的功能实在太弱了，没办了，只能⾃⼰修改了源码，⽬前实现了以下功能，github还没有时间更新敬请期待。那我们来看看扩展功能吧：⼀、扩展功能1，增加了⽬录树的搜索功能2，增加了⽬录树的复选框和事件回调的实现3，增加了根节点图标和叶⼦图标⾃定义设置。4，增加右键菜单和事件回调。让我妈看⼀下效果图吧

搜索功能效果右键菜单实现

⼆、让我看⼀下实现源码吧 调⽤⽅式(['tree', 'layer'], function () { var layer = , $ = , tree = ; // 同步(绑定)layui的tree的搜索(过滤)框 // treeId: tree所在的容器的id // filter: 对应的搜索框的selector或者dom对象,尽量要确保是唯⼀的节点，或者真的是要控制这个树的input // callback: 回调 参数(树节点jquery对象, 输⼊框对象, 匹配到的节点数量) yuiTreeFilter = function (treeId, filter, callback) { var treeElem = $('#' + treeId), filterElem = $(filter); if (! || !) { return; } ( function (event) { var that = this; var value = $(that).val().trim().toLocaleLowerCase();//不区分⼤⼩写 var HIDE = 'layui-hide'; var hintClass = 'search_hit'; // 先恢复现场 ('.' + HIDE).removeClass(HIDE); ('.' + hintClass).removeClass(hintClass).each(function (index, item) { item = $(item); (('textOld')).data('textOld', null); }); // 如果有值筛选开始 if (value) { (('cite'), function (index, elem) { elem = $(elem); var textTemp = (); if (leLowerCase().indexOf(value) === -1) { //不区分⼤⼩写 // 不存在就隐藏 t('li').addClass(HIDE); } else { // 命中就添加⼀个class ss(hintClass) .data('textOld', textTemp) .html(e(new RegExp(value, 'g'), '' + value + '')); } } }); (('.' + hintClass), function (index, elem) { elem = $(elem); s('li').removeClass(HIDE); s('ul').each(function (i, item) { if (!$(item).hasClass('layui-show')) { $(item).parent('li').find('>i').click(); } }); s('ul').parent('li').removeClass(HIDE); }); } typeof callback === 'function' && (that, treeElem, filterElem, ('.' + 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: '/' , 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: '/' , 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){ (node) //node即为当前点击的节点数据 var as= $("#layTree").find('a'); $.each(as,function (index,obj) { if($(obj).children("cite").text()=='置顶邮件') { ($(obj).parent()); $(obj).parent().append("

• 0, c = o('
  '), s = o(["
• ", function() { return l ? '' + ( ? [1] : [0]) + '': ''; } (), function() { if ( > 0) { if ( && () == "[object Object]") { for (var attr in ) { eleStr += ' data-' + attr + '=' + [attr]; } } eleStr += ' />'; } return eleStr; } (), function() { //debugger; return '" + ('' + "") + ("" + ( || "未命名") + "") } (), "
"].join("")); var eleStr = && == "checkbox" ? '" + (' 0) { var childUl = en("ul"), checked = d; ("input").prop("checked", checked); } } }, ParentsCheckboxCheck = function(ele) { if (!ele) { return; } var r = this, siblingInputs = gInputs(ele), parentId = ribute("data-parent-id"), parentInput = null, bool = true, childrendInputs = null, hasOneChildrenInputCheck = false; if (parentId != 'undefined') { parentInput = mentById(parentId); childrendInputs = tChildrenInputs(parentInput); } for (var i = 0, len = ; i < len; i++) { if (siblingInputs[i].checked) { bool = false; break; } } if (!childrendInputs || == 0) { hasOneChildrenInputCheck = false; } else { } else { for (var j = 0, len2 = ; j < len2; j++) { if (childrendInputs[j].getAttribute("data-parent-id") != "undefined") { if (childrendInputs[j].checked) { hasOneChildrenInputCheck = true; break; } } } } if (bool && !hasOneChildrenInputCheck) { hecked(parentInput, false); } ParentsCheckboxCheck(parentInput); }, gInputs = function(ele) { var that = this; if (ele) { var parent = Element, parents = Element, childrens = en, siblingInputs = []; } else { return null; } for (var i = 0, len = ; i < len; i++) { if (childrens[i] != parent) { if (childrens[i].children[0].nodeName == "INPUT") { (childrens[i].children[0]); } if (childrens[i].children[1].nodeName == "INPUT") { (childrens[i].children[1]); } } } parent = null; parents = null; childrens = null; return siblingInputs; }, tChildrenInputs = function(ele) { var parent = Element, childrenInputs = []; if (mentsByTagName("ul").length > 0) { var uls = mentsByTagName("ul"); for (var i = 0, len = ; i < len; i++) { var inputs = uls[i].getElementsByTagName("input"); for (var j = 0, len2 = ; j < len2; j++) { (inputs[j]); } } } return childrenInputs; }, hecked = function(ele, checked) { ele && (d = checked); }, sChecked = function(e, checked) { var r = this, i = s, selector = , currentInput = e; currentInput = e; if (currentInput && (me == "INPUT")) { var parentId = ribute("data-parent-id"), parentInput = null; setTimeout(function() { hecked(currentInput, checked); if (parentId) { sChecked(mentById(parentId), checked); } }, 50); } }, rents = function(ele, selector) { var parent = Element, that = this; if ((0, 1) == "#") { if (parent) { if ( != (1)) { rents(parent, selector); } else { return parent; } } } else if ((0, 1) == ".") { if (parent) { var classnameArr = (" "), len = , selectt = (1), hasSelector = false; if (len > 0) { for (var i = 0; i < len; i++) { if (classnameArr[i] == selectt) { hasSelector = true; break; } } } if (!hasSelector) { rents(parent, selector); } else if (hasSelector) { return parent; } } } }, = function() { var that = this, randomStr = ['l', 'a', 'y', 'e', 'r', 'n', 'i'], randomNum = (() * 6); return function() { var str = ""; for (var i = 0; i <= randomNum; i++) { str += randomStr[(() * 6)]; } return "lyn_" + new Date().getTime() + "_" + (num++) + "_" + (++num) + "_" + str; } (); }, = function(e, o) { var a = this, r = s; en("a").on("click", function(e) { //debugger; (e), (o) (o) }) }, = function(e, o) { //debugger; var a = this, r = (s, en(".layui-tree-spread")), i = en("ul"), n = en("a"), l = function() { ("spread") ? (("spread", null), Class("layui-show"), ([0]), (".layui-icon").removeClass(branchExtent[1]).addClass(branchExtent[0])) : (("spread", !0), ss("layui-show"), ([1]), n. }; i[0] && (("click", l), ("dblclick", l)) }, //(".layui-icon").html(Extent[0])):(("spread",!0),ss("layui-show"),([1]), //(".layui-icon").html(Extent[1]))};i[0]&&(("click",l),("dblclick",l))}, = function(e) { var a = this, i = s, t = "layui-tree-drag"; ("i").on("selectstart", function(e) { return ! 1 }), && o(document).on("mousemove", function(e) { var r = ; if () { var i = (, o('
')); tDefault(), o("." + t)[0] || o("body").append(i); var n = o("." + t)[0] ? o("." + t) : i; ss("layui-show").html(en("a").html()), ({ left: + 10, top: + 10 }) } }).on("mouseup", function(ev) { var ee = ; if( && && [0]){ //⾃定义⿏标右击事件 //debugger; [0].oncontextmenu = function(){ //debugger; if(!leftClick){leftClick=true;} if(typeof lick=="function" ){ var oEvent=; if (!oEvent) oEvent=; if (==2) { try { //debugger; leftClick=!leftClick; if(!leftClick) { (e); lick(a,ee); //leftClick=false; } } catch(e) {} opagation(); opagation(); tDefault(); return false; } } } } && (en("a").removeClass(r), && en("a").removeClass(r), = {}, o("." + t).remove()); tDefault(); return false; }) }, = {}, = function(e, a) { var i = this, t = (s, en("a")), n = function() { var t = o(this), n = ; && ( = { item: a, elem: e }, ss(r)) }; ("mousedown", function() { var o = ; = { item: a, elem: e } }), ("mouseenter", n).on("mousemove", n).on("mouseleave", function() { var e = o(this), a = ; && (delete , Class(r)) }) }, e("tree", function(e) { var r = new i(e = e || {}), t = o(); return t[0] ? void (t) : (" 没有找到" + + "元素"); }) })三、更多如果你还需要交流问题，如果你还有不了解的地⽅，如果你需要.NET版本构建tree的后台代码，如果你需要JAVA版本构建tree的后台代码，⼀起学习探讨吧。........可以加⼊我们的基地，我们基地的地址是：450342630（QQ群号）

发布者：admin，转转请注明出处：http://www.yc00.com/web/1688702687a163806.html