zTree实现多选树

最新推荐文章于 2024-03-13 18:13:06 发布
VIP文章 最新推荐文章于 2024-03-13 18:13:06 发布
阅读量1.8w 收藏 2
点赞数 4
分类专栏： JQuery HTML zTree 文章标签： zTree jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/you23hai45/article/details/26150809
版权

zTree实现多选树


1、实现源码

<!DOCTYPE html>
<html>
<head>
	<title>多选树</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../css/demo.css">
	<link rel="stylesheet" type="text/css" href="../../../css/zTreeStyle/zTreeStyle.css">
	<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.core-3
最低0.47元/天 解锁文章
翱翔天地
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
zTree实现多选下拉框
08-14
使用zTree实现的可以多选的下拉框控件Demo
jQuery插件zTree实现的多选树效果示例
12-03
本文实例讲述了jQuery插件zTree实现的多选树效果。分享给大家供大家参考，具体如下： 1、实现代码： <!DOCTYPE html> <html> <head> <title>多选树</title> <meta ...
el-tree 多选全部禁用
最新发布
weixin_41843107的博客
03-13 319
【代码】el-tree 多选全部禁用。
ztree树插件- 树形多选结构展示
chang@博客
08-20 2035
1、首先导入Bootstrap js、样式 <link rel="stylesheet" href="../../static/common/ztree/css/metroStyle/metroStyle.css" /> <script src="/static/common/ztree/js/jquery.ztree.all.min.js"></script>...
Ztree多选
lovely960823的博客
10-22 1025
记录一下Ztree的实现 效果图 上代码 <link rel="stylesheet" href="/static/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"> <script src="/static/ztree/js/jquery.ztree.core.js"></script> <s...
[js][zTree]zTree树组件shift多选功能的实现
王德封-逐浪
04-11 6366
最近在研究ZTree树组件，学习了很多功能，包括右键菜单、shift多选等功能，shift多选功能网上资料比较少，所以记录下来。 首先，要正常使用zTree，当然少不了引入它的js、css文件； 其次，正常初始化一棵树，可以参考官方网站哦； 最后，实现shift多选，代码如下 1）定义一个全局变量：var nodes=null; 2）使用回调函数beforeClick
vue中使用zTree实现文件多选
唐先森的博客
05-14 857
前言 文章链接：https://tzy1997.com/articles/zt1442re/ zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。 优点如下： zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、S
jQuery ztree实现动态树形多选菜单
10-21
主要介绍了jQuery ztree实现动态树形多选菜单，ztree动态树形菜单，初始化加载和延迟加载，感兴趣的小伙伴们可以参考一下
ztree.js 实现下拉单选和多选的例子
zookevin的博客
03-02 2110
ztree 实现多层级下拉效果。
zTree下拉菜单多级菜单多选实现
weixin_34269583的博客
03-06 1274
惯例，先上图： 这是在一个项目中，为了满足样式美观、多级菜单以及多选而将zTree插件更改过后的效果。 在实际的开发过程中，本来zTree也是可以满足需求的，但是zTree多选的话需要checkbox选择框，这样导致样式风格和项目总体不一致。下面是根据ztree所修改的内容。 如上图 这是个outlook样式的菜单。 我们只需要简单的右键，查看代码，就可以把源码拿下来看看。 我们...
简单zTree树形，支持单选、多选、移动实例
06-27
简单树形菜单，CheckBox,Radio选择，支持单选，多选，及树形移动实例
结合ztree的下拉框树形结构数据多选，单选
07-12
结合ztree制作的下拉框，数据多级显示，通过配置实现多选或单选，数据可以是固定数据或ajax动态加载
jQuery+bootstrap+ztree多选下拉树
08-14
事先声明下（代码非常杂乱，并未写成插件，方法都是非常low的方法），这个是模拟bootstrap的插件select-picker插件完成的多选下拉树，类似picker中，这个也可以输入进行查询，因为项目特殊需要，里面都是直接id命名死并使用的，如果你的项目也有这种特殊需求，可以拿来看看，只筛选到最后一个级别，（不过作用和风格都和bootstrap类似）自己看着下载吧
带搜索框和带多选框的ztree
11-13
带搜索框和支持多选的ztree。可以通过搜索框实现ztree的模糊查询。可以进行ztree多选。
区域树显示区域（多级，多选，回显）
生活就是不断学习
11-29 1902
因为select2，在三层之后无法选中，所以改变思路，通过ztree去渲染区域下拉选择的功能 渲染后的区域树有，选择某一父节点后，区域树选中的值会在文本框中显示，取消选中将从文本框中移除，其下子节点显示被选中状态单不可被选中，整个过程用递归的方式将父节点下所有子节点遍历设置状态，每次刷新后，下拉框数据保持不变，选中的值依旧选中 数据可以采用异步加载或者同时加载，因为是只有单个省的数据，所以直接将所...
zTree选中全部节点
qq_41829337的博客
07-21 909
zTree选中全部节点
java ztree_java+ztree实现两棵树之间的相互移动
06-02
您好，我理解您的问题是想要使用Java和ztree实现两棵树之间的相互移动。 首先，您需要引入ztree的 JavaScript 和 CSS 文件。 然后，您需要在页面中创建两个 ztree，分别表示两棵树。可以通过 AJAX 加载树节点数据，也可以在页面中直接定义节点数据。 接着，您需要为两个 ztree 绑定拖拽事件。在拖拽结束后，通过获取被拖拽节点的信息，将节点从一棵树中移除，并添加到另一棵树中。 以下是一个简单的示例代码： ```javascript // 定义 ztree 的配置 var setting = { view: { dblClickExpand: false }, data: { key: { name: "nodeName" }, simpleData: { enable: true, idKey: "nodeId", pIdKey: "parentNode", rootPId: null } }, callback: { onDrop: function(event, treeId, treeNodes, targetNode, moveType) { // 获取被拖拽节点的信息 var node = treeNodes[0]; var nodeId = node.nodeId; var nodeName = node.nodeName; var parentNode = node.parentNode; // 将节点从一棵树中移除 var treeObj = $.fn.zTree.getZTreeObj(treeId); treeObj.removeNode(node); // 添加节点到另一棵树中 var targetTreeObj = $.fn.zTree.getZTreeObj(targetNode.treeId); var targetNodeObj = targetTreeObj.getNodeByTId(targetNode.tId); targetTreeObj.addNodes(targetNodeObj, { nodeId: nodeId, nodeName: nodeName, parentNode: targetNodeObj.nodeId }); } } }; // 创建两个 ztree var tree1Nodes = [ {nodeId: 1, nodeName: "节点1", parentNode: null}, {nodeId: 2, nodeName: "节点2", parentNode: 1}, {nodeId: 3, nodeName: "节点3", parentNode: 1} ]; var tree2Nodes = [ {nodeId: 4, nodeName: "节点4", parentNode: null}, {nodeId: 5, nodeName: "节点5", parentNode: 4}, {nodeId: 6, nodeName: "节点6", parentNode: 4} ]; $.fn.zTree.init($("#tree1"), setting, tree1Nodes); $.fn.zTree.init($("#tree2"), setting, tree2Nodes); ``` 在上面的示例代码中，我们定义了一个名为 `setting` 的 ztree 配置对象，并将其应用到两个 ztree 上。在 `onDrop` 回调函数中，我们获取被拖拽节点的信息，并将其移动到目标树中。 希望这个示例可以帮助到您。如果您有任何问题，请随时提出。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值