francytree插件实现复选框多选，获取子节点的同时也获取父节点的功能

最新推荐文章于 2024-05-10 09:49:59 发布
最新推荐文章于 2024-05-10 09:49:59 发布
阅读量934 收藏 1
点赞数
分类专栏： 前端开发 文章标签： js francytree
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k3351455/article/details/90046402
版权
本文介绍了如何利用francytree插件进行复选框多选操作，特别是在selectMode: 3模式下，即使子节点未全选也能获取父节点。通过修改源码jquery.fancytree.js中的fixSelection3FromEndNodes方法，实现了所需功能。通过阅读和修改源码，可以更好地理解和定制框架与插件。
摘要由CSDN通过智能技术生成

Francytree是一个功能强大的插件，对于选择框、复选框和模态框有着良好的显示操作效果，下面，将从一个改动其源码实现自己想要的例子来解析这个插件。

1、francytree的官网：http://wwwendt.de/tech/fancytree/demo/

它有三种模式： selectMode: 1, selectMode: 2, selectMode: 3,

各个模式实现的效果图如下所示：

 selectMode: 1,只能选中其中一个，不能多选

 selectMode: 2,可以选中多个，父目录和子目录可以同时选中

selectMode: 3,可以选中多个，并且选中父目录后可以将子目录全选，但子目录没有选全，则不能选中父目录

2、由于项目上的需要，需要改其源码变成自己想要的效果，即selectM

最低0.47元/天 解锁文章
学习和运动
关注
专栏目录
从官网整理制作的Fancytree文档
07-28
最近在做表格树,找到了国外的这个jquery插件,发现功能挺好用的,从官网上整理了文档,以供查阅
js树形插件fancytree的使用
热门推荐
morris
03-20 2万+
1.1. fancytree简介 Fancytree是一个 JavaScript 动态树形jQuery插件，支持持久化，键盘操作，复选框，表格，拖放，以及延迟加载。 github地址: https://github.com/mar10/fancytree 演示地址: http://wwwendt.de/tech/fancytree/demo/ 1.2. 使用实例 目录结构:
Fancytree Javascript Tree TreeTable 树介绍和使用
weixin_30718391的博客
07-13 457
Fancytree是一个非常棒的Javascript控件，功能强大，文档健全。在做Javascript Tree控件选型时，主要基于以下几点选择了Fancytree 在Javascript Tree控件中，Fancytree的排名非常靠前，说明这个控件的用户使用量多、口碑好，当出现问题时在StackOverflow中容易找到答案 支持checkbox选择框 支持Tree Table c...
超凡的树形视图组件 - Fancytree
最新发布
gitblog_00077的博客
05-10 359
超凡的树形视图组件 - Fancytree 项目地址:https://gitcode.com/mar10/fancytree 1、项目介绍 Fancytree 是一款功能强大的JavaScript树视图插件，它是DynaTree 1.x的继承者，提供了键盘导航、内联编辑、筛选、复选框、拖放以及延迟加载等功能。此项目由Marc Wendt维护，并已经过多次更新和优化，确保了良好的性能和易用性。 2...
【Fancytree】------- Fancytree 使用
皮皮冰要做大神
04-12 1973
1.css文件 (备注 只是重要代码部分 但是会点的人都知道怎么改 怎么知道用这个代码 读懂代码) <link href="/libs/layui/v2.4.5/css/layui.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="/libs/bootstrap/c...
带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选
11-13
当子节点的复选框状态改变时，也会影响到它的父节点，这涉及到“级联选择”或“联动选择”的逻辑。 4. **控制父节点（Controlling Parent Nodes）**： 当用户勾选或取消一个子节点的复选框时，我们需要判断该操作...
【Fancytree】------- Fancytree 点击列表转化数组示例代码
皮皮冰要做大神
04-12 307
var dataarray=[]; function datalist(data) { for(var i=0;len=data.length,i<len;i++){ if(data[i]["children"]!=null && data[i]["children"]!="null" && data...
【FancyTree】------- FancyTree 实现添加数据保持原样树结构并且同步数据
皮皮冰要做大神
11-09 759
1.这是添加不合并保持展开代码; //key 唯一的 所以要把获取的数据ID 赋值给key 呀 var __menunode = $("#treeviewMenu").fancytree("getTree").getNodeByKey(Key); // console.log(__menunode); // c...
Fancytree Javascript Tree的入门使用
weixin_30471065的博客
08-10 593
一、概念----是做什么的能干什么 　　　Fancytree是一个Javascript控件，它依赖于: <script src="jquery.js"></script> <script src="jquery-ui.min.js"></script> <link href="ui.fancytree.mi...
Tree 功能强大,包含checkbox,自动选择子节点和父节点.
IT忍者神龟
06-06 939
1、支持IE 和FireFox,不支持Opera 2、JavaScript代码来源dhtmlXTree(fancyTree)。树的节点是来源于xml文件(这个文件可以动态生成)。新增加了节点的链接功能。 3、节点的增加/删除是使用ajax技术,也是新增加的功能。本来是在JSP里使用的（JSP里没有TreeView控件），后来用asp.net写了一下。 4、包括CheckBOx,选择节点的时候
Apex-Fancy-Tree-Select:Oracle APEX的花式树插件
05-26
花梢树选择 该插件用于使用选择选项绘制FancyTree。 可以将所选节点设置为不同的APEX项目。 它还具有将其用作只读树的选项，并且可以在每次刷新具有相同树的页面时在客户端的本地存储中缓存大树，以节省加载数据。 也可以使用搜索字段过滤树。 对于工作的演示，只需单击： 如果你喜欢我的东西，如果你给我喝杯咖啡会很好
fancytree：JavaScript树视图树网格插件，支持键盘，内联编辑，过滤，复选框，拖放和延迟加载
02-03
花式树 Fancytree（ 续集）是一个JavaScript树视图/树网格插件，支持键盘，内联编辑，过滤，复选框，拖放和延迟加载。 状态 有关详细信息，请参见。 开始使用 。 。 如有疑问，或 。 玩 ， 或 。 ES6快速入门 import $ from "jquery" ; import 'jquery.fancytree/dist/skin-lion/ui.fancytree.less' ; // CSS or LESS import { createTree } from 'jquery.fancytree' ; import 'jquery.fancytree/dist/modules/jquery.fancytree.edit' ; import 'jquery.fancytree/dist/modules/jquery.fancytree.filter' ; const tree = createTree ( '#tree' , { extensions : [ 'edit' , 'filter' ] , source : { ... } , .
fancyTree学习笔记
cr196的博客
08-04 5687
PS：学习并使用Fancytree控件过程中，通过阅读官方指导文档发现的该控件节点的可配置内容及其它常用的、方便使用的节点操作的API。 一．Fancytree控件节点的可配置项如下： $("#selector").fancytree({ activeVisible: true, // Make sure, active nodes are visible (expanded)
fancytree 与后台通讯获取数据，并见设置选中，折叠，图标等属性
qq_39490664的博客
12-06 357
fancytree 与后台通讯获取数据，并见设置选中，折叠，图标等属性
FancyTree 添加数据打开树并更新添加后的数据
qq_36798131的博客
03-30 537
fancytree的添加数据后自动打开树逻辑如下： 1、新增数据，更新树里的数据。 2、更新完树中数据后，将树打开。代码如下： $.get(url,function(ret){ 通过ajax获取树数据（注：该处获得的数据格式为带树结构的数据） var tree = $('#attachment_tree').fancytree('getTree'); 获取树结构 tree.reload(ret); 刷新树（可以把将新的数据填充到树结构中） tree.g...
【Fancytree】------- Fancytree 树结构使用示例代码
皮皮冰要做大神
05-09 1087
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>督导首页</title> <link href="/libs/layui/v2.4.5/css/layui.css" rel="stylesheet" t...
Fancytree实例
weixin_30628801的博客
08-10 493
一、实例 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl...
存档＆改造【06】Apex-Fancy-Tree-Select花式树的使用&误删页数据还原（根据时间节点导出导入）
clover_oreo的博客
10-13 403
之前一直想实现厂区-区域-产线之间的级联选取，于是导入插件Apex-Fancy-Tree-Select花式树现在则是在Oracle Apex中的应用。
xm-select树结构选中父级时将所有子级也选中
qq_39280563的博客
04-19 2512
xmselct选中父级默认也选中所有子级,且在选择回显框内显示父级
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值