網站首頁 編程語言 正文
實現搜索節點并展開
//模擬數據1
data1 = [
{
title: '江西',
id: 1,
children: [
{
title: '南昌',
id: 1000,
children: [
{
title: '青山湖區',
id: 10001
},
{
title: '高新區',
id: 10002
}
]
},
{
title: '九江',
id: 1001
},
{
title: '贛州',
id: 1002
}
]
},
{
title: '廣西',
id: 2,
children: [{
title: '南寧',
id: 2000
},{
title: '桂林'
,id: 2001
}]
},{
title: '陜西'
,id: 3
,children: [{
title: '西安'
,id: 3000
},{
title: '延安'
,id: 3001
}]
}]
html部分:
<div class="demoTable">
<div class="layui-inline">
<input type="text" id="inputSearch" class="layui-input" autocomplete="off" />
</div>
<button class="layui-btn" id="btn_query">搜索</button>
</div>
<div id="test1" class="demo-tree demo-tree-box" style="width: 500px; height: 1000px; overflow: scroll;"></div>
//js代碼部分
//開啟節點操作圖標,增加、修改、刪除
tree.render({
elem: '#test13',
id: 'demotree',//設置id方面后面的重載操作
data: data1,
onlyIconControl: true, //是否僅允許節點左側圖標控制展開收縮
click: function (obj)
{
layer.msg(JSON.stringify(obj.data));
}
});
// 回車事件
$('#inputSearch').bind('keypress', function (event) {
if (event.keyCode == "13") {
var value = $(this).val();
//首選應將文本的顏色恢復正常
var node = $("#test13");
node.find('.layui-tree-txt').css('color', '');
//重載樹,使得之前展開的記錄全部折疊起來
tree.reload('demotree', {});
if (value) {
$.each(node.find('.layui-tree-txt'), function (index, elem) {
elem = $(elem);
let textTemp = elem.text();
if (textTemp.indexOf(value) !==-1) {
elem.addClass("tree-txt-active");
elem.filter(':contains(' + value + ')').css('color', '#FFB800'); //搜索文本并設置標志顏色
}
});
$.each(node.find('.tree-txt-active'), function (index, elem){
elem = $(elem);
// 展開所有父節點
elem.parents('.layui-tree-set').each(function (i, item) {
if (!$(item).hasClass('layui-tree-spread')) {
$(item).find('.layui-tree-iconClick:first').click();
}
});
});
}
}
});
原文鏈接:https://blog.csdn.net/weixin_38897313/article/details/126422236
- 上一篇:沒有了
- 下一篇:沒有了
相關推薦
- 2023-05-13 python中flatten()函數用法詳解_python
- 2022-05-15 ASP.NET?CORE實現跨域_實用技巧
- 2023-02-25 Golang合并yaml文件過程逐步講解_Golang
- 2022-10-23 Linux服務器VPS的Windows?DD包詳細的制作教程_Linux
- 2022-06-01 Go中的gRPC入門教程詳解_Golang
- 2022-03-20 ubuntu開機自啟動服務設置_Linux
- 2022-05-12 C++深淺拷貝和string類的兩種寫法詳解_C 語言
- 2023-03-05 Redis緩存工具封裝實現_Redis
- 欄目分類
-
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支