开发者社区> 风月无边> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery.ztree增加checkbox选项(可选以及不可选)

简介: 有一棵树,我们只需要其中几个节点可以通过勾选前面checkbox来对其进行操作,且这个操作需要动态执行。应该如何实现呢? ==========》 面对这样一个需求,如果我们使用的是zTree树控件,那么将会变得非常地简单。 面对这样一个需求,如果我们使用的是zTree树控件,那么将会变得非常地简单。 1、引入ztree树相关的js文件
+关注继续查看

有一棵树,我们只需要其中几个节点可以通过勾选前面checkbox来对其进行操作,且这个操作需要动态执行。应该如何实现呢?

默认情况下zTree树节点无checkbox选择框==========》动态设置每一个节点均有选择框checkbox

面对这样一个需求,如果我们使用的是zTree树控件,那么将会变得非常地简单。

面对这样一个需求,如果我们使用的是zTree树控件,那么将会变得非常地简单。

1、引入ztree树相关的js文件


1.<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
2.<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
3.<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
4.<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
5.<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>


注意excheck.js文件是一定要引入的,要不然会导致节点前的checkbox无法显示和操作。

2、默认设置每一个节点的nocheck属性值为true

nocheck表示无checkbox选择框,属性值设置为true,表示不会显示节点前面的checkbox选择框。所以需要我们在提供节点数据给zTree树控件之前设置好每一个节点的nocheck值为true,示例数据形如:


01.//ztree用于初始化的静态数据       
02.var zNodes = [
03.{ id: 1, pId: 0, name: "随意勾选 1", nocheck: true },
04.{ id: 11, pId: 1, name: "随意勾选 1-1", nocheck: true },
05.{ id: 111, pId: 11, name: "无 checkbox 1-1-1", nocheck: true },
06.{ id: 112, pId: 11, name: "随意勾选 1-1-2", nocheck: true },
07.{ id: 12, pId: 1, name: "无 checkbox 1-2", nocheck: true },
08.{ id: 2, pId: 0, name: "随意勾选 2", nocheck: true },
09.];


3、动态设置节点前显示checkbox

想要让某个节点显示checkbox选择框,就必须要更新其nocheck属性值为false即可。核心方法如下所示:


01.//过滤节点的机制 直接return node表示不做任何过滤
02.function filter(node) {
03.return node;
04.}
05. 
06.///动态设置zTree的所有节点有checkbox
07.function DynamicUpdateNodeCheck() {
08.var zTree = $.fn.zTree.getZTreeObj("treeDemo");
09.//根据过滤机制获得zTree的所有节点           
10.var nodes = zTree.getNodesByFilter(filter);
11.//遍历每一个节点然后动态更新nocheck属性值
12.for (var i = 0; i < nodes.length; i++) {
13.var node = nodes[i];
14.node.nocheck = false//表示显示checkbox
15.zTree.updateNode(node);
16.}
17.}


完整示例代码如下所示:

<!DOCTYPE html>
<html>
<head>
    <title>ZTREE DEMO - 默认zTree几点无checkbox动态设置节点checkbox出现</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-3.5.js"></script>
    <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript">
		<!--
        var setting = {
            check: {
                enable: true,
                nocheckInherit: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        //ztree用于初始化的静态数据        
        var zNodes = [
	        { id: 1, pId: 0, name: "随意勾选 1", nocheck: true },
	        { id: 11, pId: 1, name: "随意勾选 1-1", nocheck: true },
	        { id: 111, pId: 11, name: "无 checkbox 1-1-1", nocheck: true },
	        { id: 112, pId: 11, name: "随意勾选 1-1-2", nocheck: true },
	        { id: 12, pId: 1, name: "无 checkbox 1-2", nocheck: true },
	        { id: 2, pId: 0, name: "随意勾选 2", nocheck: true },
        ];

        //过滤节点的机制 直接return node表示不做任何过滤
        function filter(node) {
            return node;
        }

        ///动态设置zTree的所有节点有checkbox
        function DynamicUpdateNodeCheck() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            //根据过滤机制获得zTree的所有节点            
            var nodes = zTree.getNodesByFilter(filter);
            //遍历每一个节点然后动态更新nocheck属性值
            for (var i = 0; i < nodes.length; i++) {
                var node = nodes[i];
                node.nocheck = false; //表示显示checkbox
                zTree.updateNode(node);
            }
        }

        ///页面加载后初始化zTree数据且默认展开所有节点
        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes).expandAll(true);
        });
		//-->
	</script>
</head>
<body>
    <h1>
        Checkbox nocheck 演示</h1>
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree">
            </ul>
        </div>
        <div class="right">
            <p>
                默认情况下设置任何节点无checkbox选择框,需要配置每一个节点的nocheck属性为true即可。</p>
            <p>
                zTree加载完成后通过updateNode(node)方法动态更新节点的nocheck属性为false,则节点将会显示checkbox。</p>
            <h3>
                STEP DAY</h3>
            <div>
                <input type="button" value="动态设置节点有checkbox" onclick="DynamicUpdateNodeCheck()" />
            </div>
        </div>
    </div>
</body>
</html>



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
基于 jQuery 实现的精致作品集图片导航效果
  今天,我们要用 jQuery 来创建一个作品集图像的导航模板。我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览。任一箭头或当前图像下方的小盒子可以作为导航使用。     在线演示     下载源码   您可能感兴趣的相关文章 网站开发中很有...
780 0
分享8款精美的jQuery图片播放插件
本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究。废话不多说了,直接上这些插件。 1、3D轮播相册 这款3D相册插件利用了HTML5特性,让相片播放具有了3D效果,浏览器有限制哦。
1116 0
Croppic – 免费开源的 jQuery 图片裁剪插件
  Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要。只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能。因为使用了 HTML5 FormData  对象,所以目前只支持 IE 10+、Chrome 和 Firefox 等现代浏览器。
1088 0
TwentyTwenty – 使用 jQuery 实现图片对比功能
  这是一款非常棒的图片对比工具,能够方便的应用到你的网站中。其基本思路是把两张图片层叠在一起,当你拖动滑竿的时候,利用 CSS clip 裁剪图片,进行形成视觉对比效果。 您可能感兴趣的相关文章 Metronic – 基于 Bootstrap 响应式后台管理模板 HTML Inspec...
1005 0
基于jquery的图片展示--卡牌翻转效果
原文 http://www.cnblogs.com/daynow/archive/2013/04/29/3051233.html   卡牌翻转效果是一种很好玩的效果,是我用Jquery实现的一种效果,跟Flash实现的效果几乎一模一样。
1161 0
网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
  图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你。
1722 0
[转贴]使用jQuery自动缩图片 - [jQuery]
具体思路: 通过具体容器取得容器内所有图片 循环检查所有图片长宽 对超过的图重新定高度. 直接写成一个扩展好了,以后可以直接用. jquery.fn.ImageAutoSize = function(width,height){    $("img",this).
896 0
+关注
风月无边
java,架构方面专家
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载