使用ztree实现单选与复选结合的功能效果

最新推荐文章于 2022-04-20 17:07:40 发布
最新推荐文章于 2022-04-20 17:07:40 发布
阅读量647 收藏 3
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kiruthika/article/details/111850181
版权

第一种：一级目录复选框 和 二级目录单选框的结合
在这里插入图片描述

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ZTREE DEMO - checkbox & radio</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
	<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
	
	<SCRIPT type="text/javascript">
		<!--
		var IDMark_A = "_a";
		var setting = {
			view: {
				addDiyDom: addDiyDom
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};

		var zNodes =[
			{ id:1, pId:0, name:"父节点 1", open:true},
			{ id:11, pId:1, name:"叶子节点 1-1"},
			{ id:12, pId:1, name:"叶子节点 1-2"},
			{ id:13, pId:1, name:"叶子节点 1-3"},
			{ id:2, pId:0, name:"父节点 2", open:true},
			{ id:21, pId:2, name:"叶子节点 2-1"},
			{ id:22, pId:2, name:"叶子节点 2-2"},
			{ id:23, pId:2, name:"叶子节点 2-3"},
			{ id:3, pId:0, name:"父节点 3", open:true},
			{ id:31, pId:3, name:"叶子节点 3-1"},
			{ id:32, pId:3, name:"叶子节点 3-2"},
			{ id:33, pId:3, name:"叶子节点 3-3"}
		];

		function addDiyDom(treeId, treeNode) {
			var aObj = $("#" + treeNode.tId + IDMark_A);
			if (treeNode.level == 0) {
				var editStr = "<input type='checkbox' class='checkboxBtn' id='checkbox_" +treeNode.id+ "' οnfοcus='this.blur();'></input>";
				aObj.before(editStr);
				var btn = $("#checkbox_"+treeNode.id);
			if (btn) btn.bind("change", function() {checkAccessories(treeNode, btn);});
			} else if (treeNode.level == 1) {
				var editStr = "<input type='radio' class='radioBtn' id='radio_" +treeNode.id+ "' name='radio_"+treeNode.getParentNode().id+"' οnfοcus='this.blur();'></input>";
				aObj.before(editStr);
				var btn = $("#radio_"+treeNode.id);
				if (btn) btn.bind("click", function() {checkBrand(treeNode, btn);});
			}
		}

		function checkAccessories(treeNode, btn) {
			var checkedRadio = getCheckedRadio("radio_"+treeNode.id);
			if (btn.attr("checked")) {
				if (!checkedRadio) {
					$("#radio_" + treeNode.children[0].id).attr("checked", true);
				}
			} else {
				checkedRadio.attr("checked", false);
			}
		}

		function checkBrand(treeNode, btn) {
			if (btn.attr("checked")) {
				var pObj = $("#checkbox_" + treeNode.getParentNode().id);
				if (!pObj.attr("checked")) {
					pObj.attr("checked", true);
				}
			}
		}

		function getCheckedRadio(radioName) {
			var r = document.getElementsByName(radioName);
			for(var i=0; i<r.length; i++)    {
				if(r[i].checked)    {
					return $(r[i]);
				}
			}
			return null;
		}

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
		//-->
	</SCRIPT>
	<style type="text/css">
	  .radioBtn {height: 16px;vertical-align: middle;}
	  .checkboxBtn {vertical-align: middle;margin-right: 2px;}
	  </style>
 </HEAD>

<BODY>
<h1>checkbox / radio 共存</h1>
<h6>[ 文件路径: super/checkbox_radio.html ]</h6>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
	<div class="right">
		<ul class="info">
			<li class="title"><h2>实现方法说明</h2>
				<ul class="list">
				<li>zTree 默认的 checkbox 和 radio 是无法共存的，但可以利用 自定义控件 的功能实现此需求，具体需求可以参考 "添加 自定义控件" 的详细说明</li>
				<li class="highlight_red">对于 checkbox / radio 的联动规则，请根据需求制定自己的规则</li>
				</ul>
			</li>
		</ul>
	</div>
</div>
</BODY>
</HTML>

第二种：一级目录单选框 和 二级目录多选框的结合
原创路径：https://blog.csdn.net/JackieLiuLixi/article/details/25596497?utm_source=app在这里插入图片描述

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ZTREE DEMO - checkbox & radio</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="../libs/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="../libs/ztree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../libs/ztree/js/jquery.ztree.core.js"></script>
    <SCRIPT type="text/javascript">
        <!--
        //定义全局zTree,用于使用zTree.getNodesByParam("checked", true, null);取得选择节点
        var zTree;
        var IDMark_A = "_a";
        var setting = {
            view: {
                addDiyDom: addDiyDom
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
 
        var zNodes =[
			{ id:1, pId:0, name:"父节点 1", open:true},
			{ id:11, pId:1, name:"叶子节点 1-1"},
			{ id:12, pId:1, name:"叶子节点 1-2"},
			{ id:13, pId:1, name:"叶子节点 1-3"},
			{ id:2, pId:0, name:"父节点 2", open:true},
			{ id:21, pId:2, name:"叶子节点 2-1"},
			{ id:22, pId:2, name:"叶子节点 2-2"},
			{ id:23, pId:2, name:"叶子节点 2-3"},
			{ id:3, pId:0, name:"父节点 3", open:true},
			{ id:31, pId:3, name:"叶子节点 3-1"},
			{ id:32, pId:3, name:"叶子节点 3-2"},
			{ id:33, pId:3, name:"叶子节点 3-3"}
		];
        
		//判断节点是否在已选择的节点中，判断重复选择
		function isNodeInChecked(curId){
            if(zTree==null){
                return false;
            }
            var selectedNodes=zTree.getNodesByParam("checked", true, null);
            var selectedNode;
            
            if(selectedNodes == null || selectedNodes.length==0){
                return false;
            }
            for(var i=0; i<selectedNodes.length;i++){
                selectedNode = selectedNodes[i];
                if(selectedNode.id==curId){
                    return true;
                }
            }
            return false;
        }
		
        //自定义的树形规则
        function addDiyDom(treeId, treeNode) {
            var aObj = $("#" + treeNode.tId + IDMark_A);
            if (treeNode.level == 0) {
                var editStr = "<input type='radio' class='radioBtn' id='radio_" +treeNode.id+"_"+treeNode.pId+"' οnfοcus='this.blur();'></input>";
                aObj.before(editStr);
                var btn = $("#radio_"+treeNode.id+"_"+treeNode.pId);
                if (btn) {
                    btn.bind("click", function() {checkAccessories(treeNode, btn);});
                } 
            } else {
                var editStr = "<input type='checkbox' class='checkboxBtn' id='checkbox_" +treeNode.id+"_"+treeNode.pId+ "' name='checkbox_"+treeNode.getParentNode().id+"_"+treeNode.pId+ "' οnfοcus='this.blur();'></input>";
                aObj.before(editStr);
                var btn = $("#checkbox_"+treeNode.id+"_"+treeNode.pId);
                if (btn){
                    btn.bind("change", function() {checkBrand(treeNode, btn);});
                    var isNodeInChecked = false;
                    var selectedNodes=null;
                    if(zTree!=null){
                        selectedNodes = zTree.getNodesByParam("checked", true, null);
                    }
                    
                    var selectedNode;
                    //初始化时判断是否需要选择，这里可以去掉或者通过在zNodes中定义中添加checked:tr//ue来代替
                    if(selectedNodes != null && selectedNodes.length > 0){
                        for(var i=0; i<selectedNodes.length;i++){
                            selectedNode = selectedNodes[i];
                            if(selectedNode.id==treeNode.pId){
                                isNodeInChecked = true;
                                break;
                            }
                        }
                    }
                    if(isNodeInChecked){
                        treeNode.checked=true;
                        btn.attr("checked", true);
                    }
                }
            }
        }
		
        function checkAccessories(treeNode, btn) {
            if (btn.attr("checked")) {
                //点击的节点是否在已选的根节点中
                var isRootInChecked = isNodeInChecked(treeNode.id);
                if(!isRootInChecked){
                    //去除其余根节点以及下级节点的选择
                    removeOthers();
                }
                treeNode.checked=true;
                //节点下所有节点都勾选
                setChildSelected(treeNode, btn,true);
            } else {
                treeNode.checked=false;
                setChildSelected(treeNode, btn,false);
            }
        }
		
		//去除其余根节点以及下级节点的选择
		function removeOthers() {
            var selectedNodes=null;
            if(zTree!=null){
                selectedNodes = zTree.getNodesByParam("checked", true, null);
            }
            
            var selectedNode;
            if(selectedNodes == null || selectedNodes.length == 0){
                return;
            }
            for(var i=0; i<selectedNodes.length;i++){
                selectedNode = selectedNodes[i];
                selectedNode.checked=false;
                $("#radio_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false);
                $("#checkbox_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false);
            }
        }
 
		
        function setChildSelected(treeNode, btn,status){
            var children;
            if(treeNode.children==null){
                return true;
            }
            var lenth=treeNode.children.length;
            if(lenth==0){
                return true;
            }
            for(var i=0;i<lenth;i++){
                children = treeNode.children[i];
                $("#checkbox_" + children.id+"_"+children.pId).attr("checked", status);
                children.checked=status;
                btn = $("#checkbox_"+children.id+"_"+children.pId);
                rls = setChildSelected(children, btn,status);
                if(rls){
                    continue;
                }
            }
                
        }
		
        function beforeCheckAccessories(treeNode, btn) {
            var selectedNodes=null;
            if(zTree!=null){
                selectedNodes = zTree.getNodesByParam("checked", true, null);
            }
            
            var selectedNode;
			
            if(selectedNodes == null || selectedNodes.length == 0){
                return;
            }
			
			//alert(zTree.getSelectedNodes().length);
			
            for(var i=0; i<selectedNodes.length;i++){
                selectedNode = selectedNodes[i];
				
				if (selectedNode.getParentNode() == null) {
					if (treeNode.getParentNode() == selectedNode) {
						continue
					}
				} else if (selectedNode != null && treeNode.getParentNode() ==selectedNode.getParentNode()) {
					continue;
				}
				
                selectedNode.checked=false;
                $("#radio_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false);
                $("#checkbox_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false);
            }
        }
        
        function getCheckedBox(checkedName) {
            var r = document.getElementsByName(checkedName);
            for(var i=0; i<r.length; i++)    {
                if(r[i].checked)    {
                    return $(r[i]);
                }
            }
            return null;
        }
 
		// 当选中某一checkbox时选中其上层radio
        function checkBrand(treeNode, btn) {
            if (btn.attr("checked")) {
                var isRootInChecked = isNodeInChecked(treeNode.rootId);
                if(!isRootInChecked){
                    beforeCheckAccessories(treeNode, btn);
                    treeNode.checked=true;
                }
                setParentNodeChecked(treeNode);
                setChildSelected(treeNode,btn,true);
            }else{
                treeNode.checked=false;
                setChildSelected(treeNode,btn,false);
            }
			
			// 如果只剩一个被选中项，则取消该被选项
			var selectedNodes=null;
            if(zTree!=null){
                selectedNodes = zTree.getNodesByParam("checked", true, null);
				if (selectedNodes.length == 1) {
					for(var i=0; i<selectedNodes.length;i++){
						selectedNode = selectedNodes[i];
						$("#radio_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false);
						$("#checkbox_" + selectedNode.id+"_"+selectedNode.pId).attr("checked", false);
					}
				}
            }
        }
		
        //复选框勾选时，将上级节点到根节点都勾选
        function setParentNodeChecked(treeNode) {
            var parentNode;
            if(treeNode==null){
                return true;
            }
            if(treeNode.getParentNode()!=null){
                    parentNode = treeNode.getParentNode();
                    $("#checkbox_" + parentNode.id+"_"+parentNode.pId).attr("checked", true);
                    parentNode.checked=true;
                    return setParentNodeChecked(parentNode);
            }else{
                var pObj = $("#radio_" + treeNode.id+"_"+treeNode.pId);
                if (!pObj.attr("checked")) {
                    treeNode.checked=true;
                    pObj.attr("checked", true);
                }
                return true;
            }
        }
        
 
 
        $(document).ready(function(){
            zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
        //-->
    </SCRIPT>
    <style type="text/css">
      .radioBtn {height: 16px;vertical-align: middle;}
      .checkboxBtn {vertical-align: middle;margin-right: 2px;}
      </style>
 </HEAD>
 
<BODY>
<h1>radio / checkbox  共存</h1>
<h6>[ 文件路径: super/radio_checkbox.html ]</h6>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="right">
        <ul class="info">
            <li class="title"><h2>实现方法说明</h2>
                <ul class="list">
                <li>zTree 默认的 radio   checkbox和是无法共存的，但可以利用 自定义控件 的功能实现此需求，具体需求可以参考 "添加 自定义控件" 的详细说明</li>
                <li class="highlight_red">对于radio /checkbox  的联动规则，请根据需求制定自己的规则</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</BODY>
</HTML>
贝塔贝卡贝
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery ztree实现树的搜索功能
10-22
主要为大家详细介绍了jquery ztree实现树的搜索功能，zTree是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的Tree插件，对ztree感兴趣的小伙伴们可以参考一下
zTree实现节点修改的实时刷新功能
08-31
zTree实现节点修改的实时刷新功能 zTree是一个功能强大且灵活的JavaScript树插件，能够满足各种树形结构的需求。在实际应用中，经常会遇到动态操作树各节点的需求，例如增加、删除、修改节点等。因此，zTree实现...
ztree实现单选，以及点击事件和勾选事件区别
ernesto的博客
08-22 2475
<ul id="treeDemo" class="ztree"></ul> 说明：1、chkboxType:{ "Y" : "", "N" : "" }表示ztree为单选，且父子没有联动关系； 2、onCheck: zTreeOnCheck,onClick:zTreeOnCheck点击事件和勾选事件指向同一个函数； 3、chkStyle：radio 选择的为ra...
整个ztree树下控制其单选
月来better
12-05 664
一般情况下，项目需求在ztree树形结构中需要获取其多项选数据，但是也存在整个ztree树中只能选择其中一个选项 利用radioType的属性值控制 <link rel="stylesheet" href="./libs/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"> <div class="content_wrap"> <div class="zTreeDemoBackground left">
zTree实现树节点单选的两种方式
ernesto的博客
08-22 570
zTree实现树节点单选的两种方式 转自：https://blog.csdn.net/junxiao_chen/article/details/83081825
【ztree系列】完美实现复选框功能
热门推荐
Cherie
08-27 1万+
在权限系统中，大多数的页面都用到了树形结构，其中最常用的便是树资源的加载和单击事件，除此之外ztree还可以实现很多功能。今天以实现复选框的添加功能为例，咱们再来深入的学习下ztree的应用。 一、实例描述        在用户管理模块中，需要给用户添加角色，而用户与角色的之间是一个多对多的关系。这里我们可以先加载两个角色树资源，通过两个树之间数据的交换，从而得到用户所拥有的角色资源，实现效果
用 zTree 方法 勾选 checkbox
Tohsaca Rin
07-26 553
1、beforeCheck / onCheck 事件回调函数控制 利用 beforeCheck / onCheck 事件回调函数 可以控制是否允许 更改 节点勾选状态，这里简单演示如何监控此事件 这里还演示了 checkNode / checkAllNodes 方法触发 beforeCheck / onCheck 事件回调函数的情况，试试看： setting.check.autoCheckTrig...
ztree实现权限横向显示功能
08-30
基于ztree实现权限横向显示功能的解决方案 ...基于ztree实现权限横向显示功能的解决方案可以通过定义数据结构、使用addDiyDom方法和实现级联操作的方法来实现。这种解决方案可以提高性能和用户体验。
jquery ztree实现模糊搜索功能
10-22
在本文中，我们将深入探讨如何使用jQuery库中的ZTree插件实现模糊搜索功能。ZTree是一个功能丰富的jQuery树形插件，它提供了多种操作和显示树形数据的方式，包括搜索功能。模糊搜索允许用户在输入部分关键词时找到...
实例详解ztree在vue项目中使用并且带有搜索功能
10-18
下面将详细介绍如何在Vue环境中使用zTree，并实现搜索功能。 首先，我们需要在HTML模板中设置基本的zTree结构。在`<el-form-item>`标签内，包含了一个输入框（`<input>`）用于用户输入搜索关键词，以及一个按钮（`...
简单zTree树形，支持单选、多选、移动实例
06-27
简单树形菜单，CheckBox,Radio选择，支持单选，多选，及树形移动实例
layui+ztree下拉树，支持单选和多选
09-11
layui+ztree下拉树，支持单选和多选，简单封装方便实用
结合ztree的下拉框树形结构数据多选，单选
07-12
结合ztree制作的下拉框，数据多级显示，通过配置实现多选或单选，数据可以是固定数据或ajax动态加载
ztree 点击文字也可以选中前面的复选框
周振伟的博客
02-10 1万+
分享一个小方法，实现ztree  点击文字，也可以选中前面的  复选框   radio  或者 checkbox 在设置树的时候，加上这句话 callback: {  onClick: function (e, treeId, treeNode, clickFlag) {  zTree.checkNode(treeNode, !treeNode.checked, true);  } 
ztree 数据回显，选择单选按钮或者复选框
xcc_2269861428的博客
07-08 2024
通过ztree的getNodeByParam来实现单选按钮、复选框选中。 如图： 代码实现： var rzTree = $.fn.zTree.getZTreeObj("rtreeDemo"); var rnode = rzTree.getNodeByParam("id", nowConArr[0]); rzTree.checkNode(rnode,true); var ids =...
zTree设置父节点不可选中，只可选中子节点（也可根据需求设置节点选中状态）
魏知非的博客
11-08 1万+
有两种方法：显示check radio 但是不能选中父节点，只能选中子节点；另一种方法是直接不显示父节点的check radio 一、是在callback里写回调方法，都是显示check radio的，有两种情况，一种是不可选择，一种是判断是否是父节点，是的话直接返回 callback: { beforeCheck: this.zTreeBeforeCheck,//在...
zTree的简单使用
afdasfggasdf的博客
12-26 315
一.基本效果 1.导包 &lt;!--直接导入ztree的all包就可以不用导入其他的包了--&gt; &lt;script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"&gt;&lt;/script&gt; &lt;link rel="sty...
vue2 ztree 单选框
linucesss的博客
04-20 828
vue2 ztree 单选框
ztree 点击新增按钮, 当前选中节点 上方 新增 叶子节点
最新发布
06-09
在 zTree 中，可以使用 `addNodes` 方法在指定节点下增加子节点。要在点击新增按钮后在当前选中节点上方增加叶子节点，需要先获取当前选中节点的父节点，然后使用 `addNodes` 方法向父节点下的指定位置插入新节点。 具体步骤如下： 1. 获取当前选中节点的父节点，可以使用 `getParentNode` 方法获取当前节点的父节点对象。 2. 创建新节点，设置节点的 id、name 等属性。 3. 使用 `addNodes` 方法将新节点插入到父节点下。需要指定第一个参数为父节点对象，第二个参数为要插入的节点数组，第三个参数为要插入到的位置，这里指定为当前节点在父节点的位置。 以下是示例代码： ``` // 获取当前选中节点 var selectedNode = zTree.getSelectedNodes()[0]; // 获取当前节点的父节点 var parentNode = selectedNode.getParentNode(); // 创建新节点 var newNode = { id: 'new_node', name: '新增节点' }; // 在父节点下插入新节点 zTree.addNodes(parentNode, newNode, parentNode.children.indexOf(selectedNode)); ``` 这段代码会在选中节点的上方插入一个新节点，节点 id 为 `new_node`，名称为 `新增节点`。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值