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

最新推荐文章于 2023-10-13 19:01:39 发布
最新推荐文章于 2023-10-13 19:01:39 发布
阅读量931 收藏 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 与后台通讯获取数据，并见设置选中，折叠，图标等属性
qq_39490664的博客
12-06 356
fancytree 与后台通讯获取数据，并见设置选中，折叠，图标等属性
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 : { ... } , .
Tree 功能强大,包含checkbox,自动选择子节点和父节点.
IT忍者神龟
06-06 937
1、支持IE 和FireFox,不支持Opera 2、JavaScript代码来源dhtmlXTree(fancyTree)。树的节点是来源于xml文件(这个文件可以动态生成)。新增加了节点的链接功能。 3、节点的增加/删除是使用ajax技术,也是新增加的功能。本来是在JSP里使用的（JSP里没有TreeView控件），后来用asp.net写了一下。 4、包括CheckBOx,选择节点的时候
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的入门使用
weixin_30471065的博客
08-10 590
一、概念----是做什么的能干什么 　　　Fancytree是一个Javascript控件，它依赖于: <script src="jquery.js"></script> <script src="jquery-ui.min.js"></script> <link href="ui.fancytree.mi...
带复选框的多级目录树，复选框的选择控制子节点父节点 全选和反选
11-13
当子节点的复选框状态改变时，也会影响到它的父节点，这涉及到“级联选择”或“联动选择”的逻辑。 4. **控制父节点（Controlling Parent Nodes）**： 当用户勾选或取消一个子节点的复选框时，我们需要判断该操作...
【Fancytree】------- Fancytree 使用
皮皮冰要做大神
04-12 1970
1.css文件 (备注 只是重要代码部分 但是会点的人都知道怎么改 怎么知道用这个代码 读懂代码) <link href="/libs/layui/v2.4.5/css/layui.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="/libs/bootstrap/c...
【Fancytree】------- Fancytree 点击列表转化数组示例代码
皮皮冰要做大神
04-12 306
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...
Apex-Fancy-Tree-Select:Oracle APEX的花式树插件
05-26
花梢树选择 该插件用于使用选择选项绘制FancyTree。 可以将所选节点设置为不同的APEX项目。 它还具有将其用作只读树的选项，并且可以在每次刷新具有相同树的页面时在客户端的本地存储中缓存大树，以节省加载数据。 也可以使用搜索字段过滤树。 对于工作的演示，只需单击： 如果你喜欢我的东西，如果你给我喝杯咖啡会很好
【FancyTree】------- FancyTree 实现添加数据保持原样树结构并且同步数据
皮皮冰要做大神
11-09 759
1.这是添加不合并保持展开代码; //key 唯一的 所以要把获取的数据ID 赋值给key 呀 var __menunode = $("#treeviewMenu").fancytree("getTree").getNodeByKey(Key); // console.log(__menunode); // c...
fancyTree学习笔记
cr196的博客
08-04 5682
PS：学习并使用Fancytree控件过程中，通过阅读官方指导文档发现的该控件节点的可配置内容及其它常用的、方便使用的节点操作的API。 一．Fancytree控件节点的可配置项如下： $("#selector").fancytree({ activeVisible: true, // Make sure, active nodes are visible (expanded)
Fancytree实例
weixin_30628801的博客
08-10 492
一、实例 <!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 387
之前一直想实现厂区-区域-产线之间的级联选取，于是导入插件Apex-Fancy-Tree-Select花式树现在则是在Oracle Apex中的应用。
layui树形组件获取复选框选中的id,禁用选中父节点后自动选中子节点功能
weixin_38897313的博客
09-15 1640
在项目中，tree组件获取选中id后，id也包涵了父节点，回显的时候，父节点选中，子节点也全部选中的问题，以下简单的方法，用oncheck。禁用选中父节点后自动选中子节点功能，可以再layui tree 的oncheck事件里进行更改即可。
JS插件Fancytree使用分享及源码分析
j_bleach的博客
05-20 7247
fancytreefancytree是一款基于jq和jq-ui的树形插件，相比普通的jsTree，fancytree扩展的功能非常的多，除了checkbox选中，拖拽排序等基础的功能，还有节点过滤，即时编辑，tabletree(在列表中展示jstree)，各种键盘事件，以及各种皮肤样式。 插件地址：https://github.com/mar10/fancytree 当前分享版本：2.22.5配
使input文本框不可编辑的3种方法
热门推荐
u010210251的博客
11-08 16万+
今天试了一下使input文本框不可编辑的3种方法，现在总结一下： disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 一起使用。 示例： readonly 属性规定输入字段为只读可复制，但是，用户可以使用Tab键切
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值