转:zTree树控件入门之checkbox:如何动态设置节点的checkbox选择框启用与禁用状态(chkDisabled)

当一棵树的部分节点根据登入用户角色不同而决定是否启用节点前的checkbox选择框的时候,我们应该如何做呢?也或者如何在页面加载的时候动态根据当前登入用户角色动态切换节点前的checkbox的禁用状态?

针对上列一系列问题,今天这里将做一个统一的讲解:

关于节点前的checkbox选择框是否禁用,是通过属性chkDisabled来决定的,值为true则表示禁用;反之表示启用;

一、初始化设置节点禁用

示例代码如下所示:

var zNodes =[
            { id:1, pId:0, name:"随意勾选 1", open:true},
            { id:11, pId:1, name:"随意勾选 1-1", open:true},
            { id:111, pId:11, name:"disabled 1-1-1", chkDisabled:true},
            { id:112, pId:11, name:"随意勾选 1-1-2"},
            { id:12, pId:1, name:"disabled 1-2", chkDisabled:true, checked:true, open:true},
            { id:121, pId:12, name:"disabled 1-2-1", checked:true},
            { id:122, pId:12, name:"disabled 1-2-2"},
            { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
            { id:21, pId:2, name:"随意勾选 2-1"},
            { id:22, pId:2, name:"随意勾选 2-2", open:true},
            { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
            { id:222, pId:22, name:"随意勾选 2-2-2"},
            { id:23, pId:2, name:"随意勾选 2-3"}
        ];

初始化的时候设置需要禁用前checkbox选择框的节点属性chkDisabled为true即可。

二、动态设置节点前checkbox禁用

动态设置某个节点前checkbox禁用我们是通过方法updateNode(nodeObj)来实现的,将nodeObj的chkDisabled属性值设置为true即可,示例代码如下所示:

var zTree = $.fn.zTree.getZTreeObj("treeDemo");
treeNode.chkDisabled = true;
zTree.updateNode(treeNode);

另外也可以直接使用setChkDisabled(node,disabled,inheritParent, inheritChildren);

示例代码如下所示:

function disabledNode(e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            disabled = e.data.disabled,
            nodes = zTree.getSelectedNodes(),
            inheritParent = false, inheritChildren = false;
            if (nodes.length == 0) {
                alert("请先选择一个节点");
            }
            if (disabled) {
                inheritParent = $("#py").attr("checked");
                inheritChildren = $("#sy").attr("checked");
            } else {
                inheritParent = $("#pn").attr("checked");
                inheritChildren = $("#sn").attr("checked");
            }

            for (var i=0, l=nodes.length; i<l; i++) {
                zTree.setChkDisabled(nodes[i], disabled, inheritParent, inheritChildren);
            }
}

完整实例代码如下所示:

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO - Checkbox chkDisabled</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" src="../../../js/jquery.ztree.exedit-3.5.js"></script>
    -->
    <SCRIPT type="text/javascript">
        <!--
        var setting = {
            check: {
                enable: true,
                chkDisabledInherit: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"随意勾选 1", open:true},
            { id:11, pId:1, name:"随意勾选 1-1", open:true},
            { id:111, pId:11, name:"disabled 1-1-1", chkDisabled:true},
            { id:112, pId:11, name:"随意勾选 1-1-2"},
            { id:12, pId:1, name:"disabled 1-2", chkDisabled:true, checked:true, open:true},
            { id:121, pId:12, name:"disabled 1-2-1", checked:true},
            { id:122, pId:12, name:"disabled 1-2-2"},
            { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
            { id:21, pId:2, name:"随意勾选 2-1"},
            { id:22, pId:2, name:"随意勾选 2-2", open:true},
            { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
            { id:222, pId:22, name:"随意勾选 2-2-2"},
            { id:23, pId:2, name:"随意勾选 2-3"}
        ];

        function disabledNode(e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            disabled = e.data.disabled,
            nodes = zTree.getSelectedNodes(),
            inheritParent = false, inheritChildren = false;
            if (nodes.length == 0) {
                alert("请先选择一个节点");
            }
            if (disabled) {
                inheritParent = $("#py").attr("checked");
                inheritChildren = $("#sy").attr("checked");
            } else {
                inheritParent = $("#pn").attr("checked");
                inheritChildren = $("#sn").attr("checked");
            }

            for (var i=0, l=nodes.length; i<l; i++) {
                zTree.setChkDisabled(nodes[i], disabled, inheritParent, inheritChildren);
            }
        }

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $("#disabledTrue").bind("click", {disabled: true}, disabledNode);
            $("#disabledFalse").bind("click", {disabled: false}, disabledNode);

        });
        //-->
    </SCRIPT>
</HEAD>

<BODY>
<h1>Checkbox chkDisabled 演示</h1>
<h6>[ 文件路径: excheck/checkbox_chkDisabled.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>1、setChkDisabled 方法操作说明</h2>
                <ul class="list">
                <li>setChkDisabled 方法可以设置节点 checkbox / radio 禁用 或 取消禁用,详细请参见 API 文档中的相关内容</li>
                <li><p>试试看:<br/>
                    禁用时:<input type="checkbox" id="py" class="checkbox first"/><span>关联父</span>
                    <input type="checkbox" id="sy" class="checkbox first" checked /><span>关联子</span><br/>
                    取消禁用时:<input type="checkbox" id="pn" class="checkbox first" checked /><span>关联父</span>
                    <input type="checkbox" id="sn" class="checkbox first" checked /><span>关联子</span><br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="disabledTrue" href="#" title="set checkbox to be disabled." onclick="return false;">禁用</a> ]
                    &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="disabledFalse" href="#" title="set checkbox to be abled." onclick="return false;">取消禁用</a> ]
                </li>
                </ul>
            </li>
            <li class="title"><h2>2、setting 配置信息说明</h2>
                <ul class="list">
                <li>这个 Demo 只简单演示 chkDisabled 的使用方法,详细配置信息请参考 ‘Checkbox 勾选操作’</li>
                </ul>
            </li>
            <li class="title"><h2>3、treeNode 节点数据说明</h2>
                <ul class="list">
                <li class="highlight_red">1)、如果某节点禁用 checkbox,请设置 treeNode.chkDisabled 属性,详细请参见 API 文档中的相关内容</li>
                <li>2)、其他请参考 ‘Checkbox 勾选操作’</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</BODY>
</HTML>
时间: 2024-10-01 06:42:27

转:zTree树控件入门之checkbox:如何动态设置节点的checkbox选择框启用与禁用状态(chkDisabled)的相关文章

转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题所以没有动手处理.今天闲来无事琢磨了一下这个需求.我的解决思路如下所示: 1.监听文本框的onkeyup事件:实时传递其值到某个函数: 2.编写某个函数接收文本框的值通过zTree的模糊查找方法getNodesByParamFuzzy(key,value)获得: 3.将匹配到的节点列表结合重新赋值给

转:zTree树控件实战篇:针对多个下拉加载zTree树应该如何做出合理的配置

今天有一个zTree的朋友遇到一个非常棘手的问题,才研究zTree树控件两天就被上头催着看成果,很是苦恼.他面对的问题就是页面内多个地方需要下拉在其文本框下方加载zTree树,由于对zTree下拉加载树的一些关键配置以及原理的不太深入导致问题无从查起.今天就来一起聊聊这样一个下拉加载zTree的问题. 一.几个关键的配置需要注意 1.针对不同的下拉选择需要有自己独立控制zTree显示位置以及隐藏相应标签的方法: 2.需要根据所点击事件定位zTree的显示位置: 3.zTree树选择后需要加以判断

Ext树控件第一次勾选父节点子节点没选中

项目中同事提出了这样一个bug,为了解决这个问题,牛逼闪闪的码农登场了,该码农专制各种公交抢上抢下抢座位,专制各种偷鸡摸狗,专制各种广场舞大妈扰民,专制各种不服,总之哪里有不平哪里就有撒哥的身影 扯淡结束,进入今天的正题 问题: 第一次勾选父节点子节点竟然没选中,逆天了啊 初步分析: 可能是之前代码的逻辑错误造成的,随进入调试阶段... 调试中发现该参数为空(原来写代码的也太没素质了), 没有内容然后想到没有内容导致下面的子节点不能便利出来,所以出来后没有选中,嘿嘿 然后加上该参数,接着查看然后

转:zTree树控件key配置之title:zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该节点的全称,这里我们以title名称为例吧,示例代码如下所示: view sourceprint? 1.{ id:233, pId:23, name:"叶子节点233...",title:"叶子节点23333434343434"}, 2.{ id:234, pId:23

100行代码解析Dojo树控件拖拽案例

案例设定: 创建2个树控件,左右排列. 使用拖动的方式,将树节点从左侧树控件拖拽的右侧树控件. 拖拽过程中右侧树控件要进行验证,确认是否可以方式拖拽中的节点. 放置的处理,识别要放置的节点,获取其信息并动态创建新的节点(基于基础类型进行实例化的过程). 右侧树控件内(实例化之后的节点),同类型节点间支持拖动排序. Dojo版本 1.10.3 图例1:创建2个树控件,左右排列. 图例2.3: 使用拖动的方式,将树节点从左侧树控件拖拽的右侧树控件. 拖拽过程中右侧树控件要进行验证,确认是否可以方式拖

基于MVC+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验. 在很多界面设计上,我们可能都需要引入树列表控件,这个控件可以用zTree来实现,也

基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验. 在很多界面设计上,我们可能都需要引入树列表控件,这个控件可以用zTree来实现,也

(转)基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

http://www.cnblogs.com/wuhuacong/p/3669575.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面

Android 实现自定义多级树控件和全选与反选的效果

博文开始之前,首先要感谢大牛:(lmj623565791),本博文是在其博文http://blog.csdn.net/lmj623565791/article/details/40212367基础上进一步的修改而来. 本博文主要是利用ListView实现多级树控件,并通过CheckBox来对各节点的全选与反选的功能,首先来看一下效果: 对于多级树的显示其实就是通过数据中各个节点的关系,通过不同的缩进来达到树的效果.而数据中主要要把握id,父节点pId,name的关系,来显示其效果. 代码实现如下