JS树形结构筛选和折叠

最新推荐文章于 2024-03-27 18:01:52 发布
最新推荐文章于 2024-03-27 18:01:52 发布
阅读量805 收藏
点赞数
分类专栏： JS小功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/what_happen_to_you/article/details/109616326
版权

JS树形结构筛选和折叠

  1. 效果图
    在这里插入图片描述
    2.筛选
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树结构</title>
    <style>
        ul.tree, ul.tree ul {
    
            list-style-type: none;
            background-color: red;
            margin: 0;
            padding: 0;
        }

        ul.tree ul {
    
            margin-left: 10px;
        }

        ul.tree li {
    
            margin: 0;
            padding: 0 12px;
            line-height: 20px;
            background-color: pink;
            color: #369;
            font-weight: bold;
        }
        ul.tree li:last-child {
    
            background-color: yellow;
        }
    </style>
    <script>

        //搜索
        function search(){
    
            var treedom = document.getElementById("treeDom")
            //1.获取所有的li
            var li =  treedom.getElementsByTagName("li")
            var searchname = document.getElementById("inputsearch").value;
            if (searchname.length>0){
    
                //如果删除就会全部展开，怎么将他全部折叠
                for( var i = 0 ;i< li.length ; i++){
    
                    if(li[i].innerHTML.toUpperCase().indexOf(searchname)>-1){
    
                        li[i].style.display="block";
                        if( li[i].parentElement){
    
                            li[i].parentElement.style.display="block"
                        }
                    }else{
    
                        li[i].style.display="none";
                        if( li[i].parentElement&& li[i].parentElement.style.display !="block"){
最低0.47元/天 解锁文章
放飞放放风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
12-29
数据结构为数组中包含对象–树形结构，用Vue组件的写法实现以下的效果： 树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。 html代码 <div id=table-component-div> <table v-for=item v-bind:list=item></table> </div> 组件模板代码 <script type=text/x-template id=table-component-tem
jQuery折叠展开树形菜单代码
06-24
jQuery折叠展开树形菜单代码是一款多级子菜单折叠展开效果，列表菜单数据封装在data.js里面，直接修改调用即可。
树结构的数据筛选方法
最新发布
weixin_45907435的博客
03-27 669
/处理前数据dwjc: '交警大队',dwjc: '一大队'},dwjc: '二大队'},dwjc: '交警二支队'],],
JS过滤树数据
05-03
NULL 博文链接：https://huangyongxing310.iteye.com/blog/2426007
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
10-23
主要介绍了JS实现无限级网页折叠菜单(类似树形菜单)效果代码,涉及JavaScript基于鼠标事件实现针对页面元素结点的遍历及样式操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
VUE 实现树形结构
10-08
vue 树形结构 添加删除节点 返回ID 可同步到服务器 treelist组件
js 树结构的筛选
ejunda的博客
06-21 1193
js树结构筛选
JS树形结构数据筛选过滤递归算法实现
pixle的博客
09-08 3591
树形结构经常遇到顶部有搜索功能需求，JS树形结构数据筛选过滤递归算法实现
js算法——数组转树形数组，平铺结构转树形结构以及树形数据的筛选
丶扁扁的糖是扁的 的博客
06-10 703
这里基于el-tree的实例进行示例： /** * @description: 数组转成树新 * @param {Array} data * @param {Object} config * @return {Array} jsonTree */ export const getListData = (data, config) =>{ var id = config.id || 'id'; var pid = config.pid || 'pid'; var ch
js无限分级 树_js递归,无限分级树形折叠菜单
weixin_42515101的博客
12-23 108
效果图mysql表结构形式数据data数据第一级是id:0第二级是id:1,name:'广东',pid:0第二级是id:5,name:'广西',pid:0第三级是id:6,name:'玉林',pid:5第三级是id:7,name:'北流',pid:6var data = [{ id: 1, name: '广东', pid: 0 },{ id: 2, name: '广州', pid: 1 },{ i...
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
10-18
通过本文给您演示一下如何有效地使用递归组件，我将通过建立一个可扩展/收缩的树形菜单的来一步步进行。下面通过本文给大家分享用 Vue.js 递归组件实现可折叠的树形菜单，需要的朋友参考下吧
js 树形菜单的折叠收缩
12-03
js 树形菜单的折叠收缩
JS树形结构菜单展开收缩代码.zip
07-04
JS树形结构菜单展开收缩代码是一款基于vue.js树形插件实现的可以扩展实现功能。
可折叠树形菜单代码（带搜索功能）
01-09
jQuery折叠树形菜单代码基于jquery.1.10.2.min.js制作，带搜索功能，搜索关键字，直接显示菜单项，展开收缩树形菜单。
js 实现数组的条件筛选
cuisidong1997的博客
02-11 226
/ 判断每个名字都为Anne?// 判断每个名字都是字符串？
javascript和HTML手机端实现多条件筛选的实战记录（筛选层的展示与隐藏、AJAX传输数组）
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
12-11 1120
是一个 JavaScript 方法，用于将 JavaScript 值（对象、数组、字符串、数字、布尔值等）转换为 JSON 格式的字符串。这个方法属于 JavaScript 的内置对象。，用于处理 JSON 数据。
js 树形结构过滤保持结构
u013790941的博客
01-05 1359
项目中有个要求根据数据的role字段是否包含在数组中进行筛选数据 const permissions = ['admin','system'] const treeData = [ { key:"1", name:"aaa", role:"admin", children:[ { key:"1-1", name:"1-1" role:"system", }, { key:"1-2", name:"1-2" role:"sy
d3.js之树形折叠树
weixin_34370347的博客
09-27 359
1.效果 children和_children 2.技术分解 2.1折叠函数 // (1) 递归调用,有子孙的就把children（显示）给_children（不显示）暂存，便于折叠， function collapse(d) { if (d.children) { console.log(d); d._children = d.children...
html<li>标签树形结构，可展开折叠
05-30
要创建可展开折叠的 HTML 树形结构，可以使用 JavaScript 和 CSS 来实现。一种常见的方法是通过添加类来控制列表项的显示和隐藏。以下是一个基本的例子： ```html 节点1 子节点1 子节点2 节点2 ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值