tree.html
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>tree</title> | |
| <link rel="stylesheet" href="../res/layui/css/layui.css"> | |
| <style> | |
| .center { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| margin: -150px 0 0 -200px; | |
| width: 400px; | |
| height: 300px; | |
| border: 1px solid whitesmoke; | |
| } | |
| .current { | |
| background-color: #dbeef5 | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="center"> | |
| <input id="search"> | |
| <div id="test1"></div> | |
| </div> | |
| <script src="../res/layui/layui.js"></script> | |
| <script> | |
| layui.use('tree', function () { | |
| let tree = layui.tree, | |
| $ = layui.$; | |
| const data = [{ | |
| title: '湖北' //一級菜單 | |
| , children: [{ | |
| title: '武漢' //二級菜單 | |
| , children: [{ | |
| title: '江漢區' //三級菜單 | |
| }, { | |
| title: '洪山區' //三級菜單 | |
| }, { | |
| title: '江岸區' //三級菜單 | |
| }, { | |
| title: '漢陽區' //三級菜單 | |
| }] | |
| }] | |
| }, { | |
| title: '浙江' //一級菜單 | |
| , children: [{ | |
| title: '杭州' //二級菜單 | |
| , children: [{ | |
| title: '西湖區' //三級菜單 | |
| }, { | |
| title: '上城區' //三級菜單 | |
| }, { | |
| title: '下城區' //三級菜單 | |
| }, { | |
| title: '濱江區' //三級菜單 | |
| }] | |
| }] | |
| }, { | |
| title: '陝西' //一級菜單 | |
| , children: [{ | |
| title: '西安' //二級菜單 | |
| }] | |
| }]; | |
| //渲染 | |
| tree.render({ | |
| elem: '#test1' //綁定元素 | |
| , data: data | |
| , onlyIconControl: true | |
| , click: function (obj) { | |
| layer.msg(obj.data.title); | |
| } | |
| }); | |
| // 樹點擊樣式修改 | |
| $("body").on("click", ".layui-tree-txt", function () { | |
| $(".layui-tree-entry").removeClass("current"); | |
| $(this).parent().parent().addClass("current"); | |
| }); | |
| // treeId: tree所在的容器的id | |
| // filter: 對應的搜索框的selector或者dom對象 | |
| // callback: 回調 參數(樹節點jquery對象, 輸入框對象, 匹配到的節點數量) | |
| tree.syncLayuiTreeFilter = function (treeId, filter, callback) { | |
| let treeElem = $('#' + treeId), filterElem = $(filter); | |
| if (!filterElem.length || !filterElem.length) { | |
| return; | |
| } | |
| // 搜索框的監聽事件按實際需求來 | |
| filterElem.unbind('change').change(function () { | |
| let that = this; //this; | |
| let value = $(that).val().trim(); | |
| let HIDE = 'layui-hide'; | |
| let hintClass = 'search_hit'; | |
| // 先恢復現場 | |
| treeElem.find('.' + HIDE).removeClass(HIDE); | |
| treeElem.find('.' + hintClass).removeClass(hintClass) | |
| // 如果有值篩選開始 | |
| if (value) { | |
| $.each(treeElem.find('.layui-tree-txt'), function (index, elem) { | |
| elem = $(elem); | |
| let textTemp = elem.text(); | |
| if (textTemp.indexOf(value) === -1) { | |
| // 不存在就隱藏 | |
| elem.closest('.layui-tree-set').addClass(HIDE) | |
| } else { | |
| // 命中就添加一個class | |
| elem.addClass(hintClass) | |
| } | |
| }); | |
| $.each(treeElem.find('.' + hintClass), function (index, elem) { | |
| elem = $(elem); | |
| // 取消隱藏所有父節點 | |
| elem.parents('.layui-tree-set').removeClass(HIDE); | |
| // 展開所有父節點 | |
| elem.parents('.layui-tree-set').each(function (i, item) { | |
| if (!$(item).hasClass('layui-tree-spread')) { | |
| $(item).find('.layui-tree-iconClick :first').click(); | |
| } | |
| }); | |
| }); | |
| } | |
| typeof callback === 'function' && callback.call(that, treeElem, filterElem, treeElem.find('.' + hintClass).length); | |
| }); | |
| }; | |
| tree.syncLayuiTreeFilter('test1', '#search', function (treeElem, filterElem, hitNumbers) { | |
| console.log('hitNumbers', hitNumbers); | |
| layer.msg('找到' + hitNumbers + '個節點'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
效果演示
主體實現
// treeId: tree所在的容器的id
// filter: 對應的搜索框的selector或者dom對象
// callback: 回調 參數(樹節點jquery對象, 輸入框對象, 匹配到的節點數量)
tree.syncLayuiTreeFilter = function (treeId, filter, callback) {
let treeElem = $('#' + treeId), filterElem = $(filter);
if (!filterElem.length || !filterElem.length) {
return;
}
// 搜索框的監聽事件按實際需求來
filterElem.unbind('change').change(function () {
let that = this; //this;
let value = $(that).val().trim();
let HIDE = 'layui-hide';
let hintClass = 'search_hit';
// 先恢復現場
treeElem.find('.' + HIDE).removeClass(HIDE);
treeElem.find('.' + hintClass).removeClass(hintClass)
// 如果有值篩選開始
if (value) {
$.each(treeElem.find('.layui-tree-txt'), function (index, elem) {
elem = $(elem);
let textTemp = elem.text();
if (textTemp.indexOf(value) === -1) {
// 不存在就隱藏
elem.closest('.layui-tree-set').addClass(HIDE)
} else {
// 命中就添加一個class
elem.addClass(hintClass)
}
});
$.each(treeElem.find('.' + hintClass), function (index, elem) {
elem = $(elem);
// 取消隱藏所有父節點
elem.parents('.layui-tree-set').removeClass(HIDE);
// 展開所有父節點
elem.parents('.layui-tree-set').each(function (i, item) {
if (!$(item).hasClass('layui-tree-spread')) {
$(item).find('.layui-tree-iconClick :first').click();
}
});
});
}
typeof callback === 'function' && callback.call(that, treeElem, filterElem, treeElem.find('.' + hintClass).length);
});
};
tree.syncLayuiTreeFilter('test1','#search',function (treeElem, filterElem, hitNumbers) {
console.log('hitNumbers', hitNumbers);
layer.msg('找到' + hitNumbers + '個節點');
});
樹的初始化、點擊行樣式修改
layui.use('tree', function () {
let tree = layui.tree,
$ = layui.$;
// 測試數據
const data = [{
title: '湖北' //一級菜單
, children: [{
title: '武漢' //二級菜單
, children: [{
title: '江漢區' //三級菜單
}, {
title: '洪山區' //三級菜單
}, {
title: '江岸區' //三級菜單
}, {
title: '漢陽區' //三級菜單
}]
}]
}, {
title: '浙江' //一級菜單
, children: [{
title: '杭州' //二級菜單
, children: [{
title: '西湖區' //三級菜單
}, {
title: '上城區' //三級菜單
}, {
title: '下城區' //三級菜單
}, {
title: '濱江區' //三級菜單
}]
}]
}, {
title: '陝西' //一級菜單
, children: [{
title: '西安' //二級菜單
}]
}];
//渲染
tree.render({
elem: '#test1' //綁定元素
, data: data
, onlyIconControl: true
, click: function (obj) {
layer.msg(obj.data.title);
}
});
// 樹點擊樣式修改
$("body").on("click", ".layui-tree-txt", function () {
$(".layui-tree-entry").removeClass("current");
$(this).parent().parent().addClass("current");
});
});
點擊修改樣式其實只是加了個背景色，可按自己需要定義
<style>
.current{background-color: #dbeef5}
</style>
轉至：https://blog.csdn.net/zjh19961213/article/details/96427655
https://github.com/at-moon/layui-demo/blob/master/page/tree.html