layui树形图-搜索子节点

已于 2022-06-08 15:36:45 修改
阅读量500 收藏 1
点赞数
分类专栏： jquery 文章标签： layui 前端
于 2022-06-08 15:32:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mumudezhi/article/details/125185101
版权

在渲染树状图时定义ID 方便获取树状图

 

我这里在外面加了一个文本框框 将需要查询的数据填写进去 然后点击查询

 

获取文本框内容 然后重载树形组件 重载的目的 是可以每次查询时就把树形组件收起来

先把所有的文本颜色恢复正常

将所有对应的文本查询出来 并添加字体颜色 

注：这个查询方法会把所有与搜索内容一样的文本全部查询出来 如果太多相同的节点 只会展开一个，其他的文本字体颜色也会被更改

 找到文本所在节点 展开所有父节点

完整代码如下

mumudezhi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui--tree--tree搜索功能
唯爱赞多的博客
02-06 845
实现layui树以及搜索功能
layui的树（tree）获取所有选中的节点和点击表格某一项显示选中节点
magezhitu的博客
06-08 3759
一开始纠结这个问题，看了一下官网的文档； 我一开始真以为就写在下面这个地方，试了一下发觉不对啊 后来经过了一系列的战斗和查资料（发觉网上有些也写得乱，索性这次记录一下） tree.render({ elem: '#test1', data: data1, id: 'field', click: function(obj) { }, //关键就在这个oncheck，直接写在里面就行了 oncheck
改造layui-树（tree）组件支持树的关键字搜索操作
最新发布
qiuweifan的博客
06-02 336
layui的tree控件没有搜索功能。整理备忘下。
LayUI Tree 组件扩展实现（搜索功能，复选框，自定义节点图标，右击菜单）（附带源码）
热门推荐
qq_27532167的博客
04-09 1万+
最近项目选项前端技术选型选择了LayUI，没选到的是tree组件的功能实在太弱了，没办了，只能自己修改了源码，目前实现了以下功能，github还没有时间更新敬请期待。那我们来看看扩展功能吧： 一、扩展功能 1，增加了目录树的搜索功能 2，增加了目录树的复选框和事件回调的实现 3，增加了根节点图标和叶子图标自定义设置。 4，增加右键菜单和事件回调。 让我妈看一下效果图吧 搜索功能效果...
layui tree组件实现搜索节点并展开
weixin_38897313的博客
08-19 1818
【代码】layui tree组件实现搜索节点并展开。
layui tree 对节点进行搜索
joke123x的博客
12-14 293
需要在使用layui的tree的界面添加的查询代码方法。LayUI的tree对节点进行搜索的效果图。在代码的详细使用如下。
基于layui实现树形穿梭框
03-18
6. **树形节点的处理**：在layui中，我们可以使用`layui.tree`模块来渲染树形结构，每个节点都可以包含子节点，可以通过设置`spread`属性来控制节点是否展开。在穿梭框中，我们需要确保用户选择的不仅仅是叶子节点，...
基于layui实现带搜索功能的树形穿梭框
12-19
本项目“基于layui实现带搜索功能的树形穿梭框”是layui框架的一个扩展应用，旨在提供一种高效的数据筛选和选择方式，尤其适用于需要在大量数据中进行分类和关联操作的场景。 穿梭框（Transfer）是一种常见的UI组件...
支持layui树编辑的插件，也可以作为树形表格
03-26
在实际使用过程中，开发者可以通过API调用来控制树形结构的动态行为，例如展开/折叠节点、选中节点、添加子节点等。这些API通常会与后端接口相结合，实现实时的数据更新和交互。此外，对于不熟悉layui或者JavaScript...
layui扩展组件之树形下拉多选组件
12-19
**layui扩展组件之树形下拉多选组件详解** 在前端开发中，用户界面的交互性和易用性是至关重要的。layui是一个轻量级、模块化的前端框架，它提供了丰富的组件来帮助开发者快速构建优雅的网页应用。在这个场景中，...
Layui的eleTree树式选择器，分单选和多选，带搜索功能
06-09
eleTree是基于Layui框架的一个扩展组件，它以树形结构展示数据，支持多种交互操作，包括展开/折叠节点、选择节点、拖拽节点等。eleTree设计简洁，易用性强，与Layui的其他组件兼容性良好，可以无缝集成到Layui项目中...
利用layui完成树状图
weixin_44554896的博客
07-17 6046
开发工具与关键技术：Visual Studio 2015 layui 作者：孙水兵 撰写时间：2019年7月17 一、 达到的效果 二、 涉及的表格 用户类型表（SYS_UserType）、权限表（PW_Jurisdiction）、详细模块表（SYS_DetailModular）、模块表（SYS_Modular）。其中详细模块表中包含的是模块下面的一些子页面的名称。而权限表是用来连接用户表...
【js前端实现layui搜索树结构数据 】
m0_55546349的博客
04-28 460
js前端实现layui搜索树结构数据
layui tree支持搜索
Think88666的博客
12-09 773
本人用的layui 2.x ，该版本的tree是直接支持搜索的，只需要开启 showSearch: true,甚至可以不用写搜索框 代码如下： <script> layui.use(['tree', 'layer'], function () { var layer = layui.layer , $ = layui.jquery , tree ...
layui.tree组件使用以及搜索节点功能
Welcome to my blog
08-14 5907
由于项目树形节点比较多需要增加节点搜索功能，所以研究了一下加上社区伙伴的支持，目前功能可以简单实现但细节还需要修改，添加上了组件的基本使用方法和属性，现在分享出来~ HTML： <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" type="button" lay-demo...
Layui Tree树节点：模糊查询高亮，获取选中节点，增删改
qq_45904018的博客
04-06 1999
layui一般用于权限管理比较多，但不管博客们使用在哪个方向上，这里给你们一套完整的组件方便直接使用。Layui官网还是有很多案例。
layui树 获取所有选中的节点
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
07-29 1万+
layui树 获取所有选中的节点 看文档太马虎了，搞好之后记录一下 layui.use('tree', function(){ var tree = layui.tree; //渲染 写法一 tree.render({ elem: '#trees', //绑定元素 showCheckbox:true, id...
element tree 点击某个节点，获取该节点的所有子节点的id
Lccccb的博客
03-10 2620
html中 <el-tree :data="list" :props="defaultProps" @node-click="handleNodeClick"></el-tree> data中注册 list: [{ id: 1, label: '一级 1', children: [{ id: 2, label: '二级 1-1', children: [{
获取树形结构中，父节点下所有子/孙节点（递归方式）
百里杨的博客
12-28 2699
利用了递归方式，对形参parent节点下的所有节点进行遍历，并将该parent节点下所有子/孙节点，全部添加到一个List中，并返回给调用者。最后，分别打印输出China、SiChuan、GuangDong节点下的所有子/孙节点名称。这个类的函数比较简单，就是利用TreeItem类型，彼此依次添加，就可以形成树形结构。
if (d.groundingState == 0 || d.groundingState == 3) {//layui-btn-disabled edit result = `<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="add">上架</a> <a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-disabled">下架</a> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>` } else if (d.groundingState == 1) { result = `<a class="layui-btn layui-btn-xs layui-btn-disabled edit">编辑</a> <a class="layui-btn layui-btn-xs layui-btn-disabled edit">上架</a> <a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-disabled">下架</a> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>` } else if (d.groundingState == 2) { result = `<a class="layui-btn layui-btn-xs layui-btn-disabled edit">编辑</a> <a class="layui-btn layui-btn-xs layui-btn-disabled edit">上架</a> <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">下架</a> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>` } else if (d.groundingState == 4 || d.groundingState == 5) { result = `<a class="layui-btn layui-btn-xs layui-btn-disabled edit">编辑</a> <a class="layui-btn layui-btn-xs layui-btn-disabled edit">上架</a> <a class="layui-btn layui-btn-xs layui-btn-disabled">下架</a> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>` }优化一下
06-09
可以将重复出现的代码进行封装，减少代码的冗余。例如，可以将按钮的class属性提取出来，写成一个变量，然后在生成按钮时直接使用该变量。同时，也可以使用模板字符串来简化代码。优化后的代码如下： ```javascript const btnDisabledClass = "layui-btn layui-btn-xs layui-btn-disabled"; const editBtn = `<a class="layui-btn layui-btn-xs edit">编辑</a>`; const addBtn = `<a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="add">上架</a>`; const delBtn = `<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">下架</a>`; const detBtn = `<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>`; if (d.groundingState == 0 || d.groundingState == 3) { result = `${editBtn} ${addBtn} <a class="${btnDisabledClass}">下架</a> ${detBtn}`; } else if (d.groundingState == 1) { result = `<a class="${btnDisabledClass} edit">编辑</a> <a class="${btnDisabledClass} edit">上架</a> <a class="${btnDisabledClass}">下架</a> ${detBtn}`; } else if (d.groundingState == 2) { result = `<a class="${btnDisabledClass} edit">编辑</a> <a class="${btnDisabledClass} edit">上架</a> ${delBtn} ${detBtn}`; } else if (d.groundingState == 4 || d.groundingState == 5) { result = `<a class="${btnDisabledClass} edit">编辑</a> <a class="${btnDisabledClass} edit">上架</a> <a class="${btnDisabledClass}">下架</a> ${detBtn}`; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值