现在位置首页 / 前端开发 /正文

ztree控制checkbox可选或者不可选

作者: IT小兵 | 2016年6月1日| 热度:℃ | 评论: |参与:

在上一篇[ztree checkbox使用和修改样式]中,介绍了ztree的checkbox怎么修改属性。本文说一下ztree控制checkbox可选或者不可选。

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

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

<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>

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

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

nocheck表示无checkbox选择框,属性值设置为true,表示不会显示节点前面的checkbox选择框。所以需要我们在提供节点数据给zTree树控件之前设置好每一个节点的nocheck值为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 },
 
];

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

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

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);
 
}
 
}

4、ztree显示选中节点

//初使化所有被选中的节点
		function initChecked(){
				var zTree = $.fn.zTree.getZTreeObj("resTree");
				var orgId = $("#orgId").val();
				if(orgId!=null && orgId !=''){
					var node = zTree.getNodeByParam("orgId", orgId, null);   //得到选中节点
					zTree.checkNode(node, true, true);     <span style="white-space:pre">			</span> //显示选中节点
					zTree.selectNode(node);<span style="white-space:pre">					</span> //打开选中节点的父节点
				}
		}

完整代码:

<!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>


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询