miniUI tree 过滤（filter）的问题

最新推荐文章于 2025-04-16 18:01:19 发布
原创 最新推荐文章于 2025-04-16 18:01:19 发布 · 6.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

针对需求，要实现miniUI Tree组件在过滤后只允许勾选可见节点。在实现过程中遇到挑战，如缺少判断节点是否过滤的标识，以及树形结构的删除操作需从叶子节点向上处理，而miniUI提供的遍历方法不适用于多叉树的深度优先遍历。为解决这些问题，需要自行编写深度优先遍历算法，并处理过滤后节点的状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

    通过关键字搜索节点并显示结果集，miniUI tree 提供了过滤的方法：

    QQ截图20160331114531.png 


    但这个过滤实质是隐藏掉其他节点，对这些隐藏节点的操作都有效。这样在树设置为联动的时候，就会有问题， 具体操作 ：过滤后，勾选“客户”，下级节点联动勾选，去掉“财政部”勾选状态，就是下边这种
最低0.47元/天 解锁文章
手把手教你实现 Tree 组件搜索过滤功能
JavaShark的博客
07-19 1762
树节点的搜索功能主要是为了方便用户能够快速查找到自己需要的节点。过滤功能不仅要满足搜索的特性，同时还需要隐藏掉与匹配节点同层级的其它未能匹配的节点。与搜索过滤字段匹配的节点需要进行标识，和普通节点进行区分子节点匹配时，其所有父节点需要展开，方便用户查看层级关系对于大数据量，采用虚拟滚动时，搜索过滤完成后滚动条需滚动至第一个匹配节点的位置搜索会将匹配到的节点高亮。...
miniui 菜单树过滤
loveLifeLoveCoding的博客
05-04 2012
官方demo<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ..
关于miniui框架中的前台grid过滤
junebubble的博客
12-10 1453
关于miniui框架中的前台grid过滤前言实现方式方式一方式二查询前查询后全部代码关键代码 前言 项目用的前端框架比较老，在做项目迭代的时候，前台表格的数据无分页并已经为固定数据，搜索条件想要在前台进行筛选。 在官网进行搜索，官网给出的FilterRow并不适用，该筛选方式仍旧需要调用后台接口传参进行筛选，如图所示。 然后想到了之前前台筛选treeGrid的方式，进行了尝试，果然异曲同工。 实现方式 方式一 该方式简单粗暴，根据筛选条件直接将现有的data进行匹配对比，然后重新使用grid.loadDa
el-tree组件使用过滤时，不展示筛选目标的子节点
最新发布
qq_45020145的博客
04-16 282
【代码】el-tree组件使用过滤时，不展示筛选目标的子节点。
Extjs TreeFilter 根据关键字过滤树
01-21 855
jQuery MiniUI 开发教程 树形控件 树操作：过滤树（十一） 过滤树                                参考示：过滤树                             filter节点过滤             tree.filter(function (node) {     var text = node.text ? no...
vue中el-tree树形组件利用filter和 filterNode方法实现模糊搜索
热门推荐
weixin_43312391的博客
03-17 1万+
实现效果： 初始状态： 模糊搜索效果： 实现方法： template中： <el-input placeholder="输入关键字" v-model="filterText"> </el-input> <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNod..
element-ui Tree 树形控件 过滤保留子级并获取过滤后的数据 多选改单选
djh052900的博客
01-02 2003
element-ui Tree 树形控件 过滤保留子级并获取过滤后的数据 多选改单选
vue+elementUI通过关键字过滤树节点
qq_36715887的博客
08-15 2071
一、效果图 1、初始界面 2、添加搜索条件 运维 3、清除搜索条件 二、直接上代码，然后解释下代码吧 <template> <div style="width: 450px"> <el-input placeholder="输入部门名称进行搜索..." prefix-icon="el-icon-search" v-model="filterText" size="mini"> ...
实战：element Tree 树形控件之过滤树节点
qingzhen的博客
11-02 3832
效果图： 重点： 在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为输入的关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。具体如下： 在这里插入代码片
树形控件加入筛选功能（弹窗中实现）
weixin_43472754的博客
03-17 1541
filter-node-method :树节点是可以被过滤的,其值为过滤函数，对树节点进行筛选时执行， 返回false则表示这个节点会被隐藏。node-key：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的，设置目前勾选的节点或者特殊场景需要使用。.getCheckedNodes(true, false) 可以获取选中的子节点。empty-text 内容为空的时候展示的文本，可以设置为加载中或者数据为空。show-checkbox：节点是否可被选择，默认值false。设置默认展开和默认选中的节点。
jQuery MiniUI 开发教程 树形控件 树操作：过滤树（十一）
iteye_4698的博客
12-11 478
[b]过滤树[/b] [img]http://www.miniui.com/docs/api/images/filtertree.gif[/img] 参考示例： [url=http://www.miniui.com/demo/tree/filtertree.html]过滤树[/url] [b]filter节点过滤[/b] tree.filter(function (node) { ...
前端 -- 树结构过滤（数遍历查询）
sodakii的博客
09-05 1481
树结构的复杂性决定了不能通过一次遍历解决，那么肯定需要用到递归调用
miniui tree 根据名称或者编码查询
xiang.y.s 的博客
06-02 2892
工作上有这样的需求 使用 miniui 的树结构，要查询某一节点。 // 通过查询按钮触发事件searchDept.on('click', function (e) { var code = mini.get("dept_code").getValue(); var name = mini.get("dept_name").getValue(); var searchTr
miniui查询并筛选
Smile yourlife
07-16 1931
通过点击查询，已达到对数据做筛选的效果，这里只需要在sql加上where过滤掉即可；原本以为要按照选择的作为条件传到后台再次查询，其实不需要那么麻烦。只是效果上不一样。 如图： 下面是一些代码与sql： ...
elment树结构tree增加搜索过滤框
小码蚁
10-12 4238
官方文档： <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-no...
elementui el-tree使用及过滤搜索
LiX07的博客
11-10 1064
elementui下拉框子节点过滤保存父节点及子节点 组件应用部分 **需绑定 :filter-node-method=“filterNode” <section class="head-container"> <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
ajax树形下拉选择框,树形下拉框实现 mini-treeselect
weixin_30219823的博客
08-05 416
追求效率，直接进入主题吧…..效果： 前台代码简析：Textfield：显示文本值valuefield：idparentfield：父类编码expand默认全部展开后台代码需要添加Newtonsoft.Json.dll引用添加一般处理程序AjaxService.ashxpublic voidProcessRequest(HttpContext context){context.Response.C...
miniUI treeGrid 的数据加载——对上一次发的帖子的修改和改进
qq_42307562的博客
11-01 1255
treeGrid效果图： 1. 从上次发的帖子中知道其核心就是到底放什么结构的数据进去，并且知道其结构类型都是List<Map<String,Object>>类型，但是有两种结构方式的数据： 在这里引用上次发的数据展示 这里有两种数据结构我们分别把它们命名： 第一种，父节点中没有子节点的数据结构 data 如下：命名noChildrenListA: var data= [...
el-tree树形节点过滤
qq_36093530的博客
02-20 3730
el-tree过滤父子节点，查询到父节点，父节点默认不展开，子节点不过滤掉；查询到子节点，父节点默认展开
前端tree过滤
06-01
前端 tree 过滤一般可以通过以下步骤实现： 1. 遍历整个树结构，获取每...这个函数接受两个参数，treeData 是整个树结构，filterText 是过滤条件。函数会返回一个新的树结构，包含所有符合条件的节点和它们的父节点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值