`
ahang8415
  • 浏览: 46711 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

dtree中实现checkbox,父节点和子节点的行为一样

阅读更多

页面:

<div class="zskbgl">
            <div class="zskbgr">
            <form id="movefrm" action="tree!doMoveNode.action">
                <#list nodeList as node>
                    <input type="hidden" name = "menuList[${node_index}].menuId" value = "${node.menuId?c}" />
                    <input type="hidden" name = "menuList[${node_index}].lastuptDttm" value = "${node.lastuptDttm?string('yyyy-MM-dd HH:mm:ss')}" />
                </#list>
               
                <div>
                    <div id="srcTree" class="zsktreepage" style="float:left">
                     <script type="text/javascript">
                        a = new dTree('a');
                        a.config.useCookies=false;
                        <#if dataTypeCd == 1>
                            a.add(0,-1,'知识库(起始点)','javascript: void(0);');
                        <#else>
                            a.add(0,-1,'学习库(起始点)','javascript: void(0);');
                        </#if>
                       
                        <#list nodeList as node>
                            <#if node.parMenuId??>
                                a.add(${node.menuId?c}, ${node.parMenuId?c},'<input type="checkbox" name="check" class="${node.parMenuId?c}" value="${node.menuId?c}" id="ch${node.menuId?c}"  onClick="kmMenu.checkStatus(${node.menuId?c},this)" />${node.menuNm}');
                                <#else>
                                a.add(${node.menuId?c}, 0,'<input type="checkbox" name="check" class="0" value="${node.menuId?c}" id="ch${node.menuId?c}"  onClick="kmMenu.checkStatus(${node.menuId?c}, this)" />${node.menuNm}');
                            </#if>
                           
                        </#list>
                        document.write(a);
                       
                 </script>
                    </div>

 

 

js:

var kmMenu = {

   checkStatus:function(no,chkBox){
        this.checkPar(chkBox);//当子目录选中时,父目录也选中
        var chks = document.getElementsByTagName('input');//得到所有input
        for(var i=0;i <chks.length;i++){
            if(chks[i].name.toLowerCase() == 'check'){//得到所名为check的input
                if(chks[i].className == no){//ID等于传进父目录ID时
                    chks[i].checked = chkBox.checked;//保持选中状态和父目录一致
                    this.checkStatus(chks[i].value,chks[i]);//递归保持所有的子目录选中
                }
            }
        }
    },
   
    checkPar:function(chkBox) {
        if(chkBox.name.toLowerCase() == 'check' && chkBox.checked==false && chkBox.className != 0) {//判断本单击为选中,并且不是根目录,则选中父目录
            var chkObject = document.getElementById("ch"+chkBox.className);//得到父目录对象
           // alert("chkBox.checked:"+chkBox.checked);
            chkObject.checked=chkBox.checked;
            this.checkPar(chkObject);
        }
    }

}

分享到:
评论

相关推荐

    dtree组件 带checkbox

    Checkbox可以是独立的,也可以关联到父节点,实现父节点全选/全取消子节点的选择状态。 3. **实现原理** 实现带Checkbox的dtree,主要涉及以下几个关键步骤: - 创建节点:每个节点包含文字、Checkbox元素以及...

    dtree_checkbox

    1. **数据树(TreeView)基础**:首先,我们需要了解数据树的基本概念,包括节点、父节点、子节点和兄弟节点等。在网页中,数据树可以通过HTML、CSS和JavaScript来构建。 2. **复选框(Checkbox)**:复选框是HTML...

    dtree 框架 还有checkbox 选择框

    { id: 1, text: '父节点1', children: [{ id: 2, text: '子节点1' }, { id: 3, text: '子节点2' }] }, { id: 4, text: '父节点2', checked: true } ]; var dtree = $('#tree').dtree({ data: treeData, ...

    Dtree(checkbox)

    综上所述,DTree结合复选框功能的实现涉及多方面的设计和实现,包括状态管理、默认选中、级联选择、事件处理、UI渲染、数据结构以及性能优化等。这个功能使得用户在操作具有层次关系的数据时更加便捷,特别是在需要...

    带checkbox的dtree

    同时,还需要考虑父节点与子节点的关联选择,例如全选/反选、子节点影响父节点等逻辑。 3. **事件处理**:添加点击事件监听器,当用户点击`checkbox`时,更新节点的选中状态,并可能触发相应的回调函数,供应用程序...

    dtree checkBox

    【dtree checkBox】是一种在数据树(dtree)中实现的功能,它允许用户通过复选框(checkBox)来选择或取消选择树形结构中的节点。这个功能在许多应用中非常常见,例如在文件管理器、组织结构图或者权限设置等场景。...

    dtree_role.rar_dtree checkbox ro

    这个特定的压缩包文件“dtree_role.rar_dtree checkbox ro”似乎关注的是`dtree`的一个特性,即带有复选框(checkbox)的功能,并且进行了性能优化,特别是关于全选、选择父节点以及子节点自动选中的操作。...

    dtree实现的树支持多选

    7. **异步加载**:对于大型数据集,DTree可能需要实现异步加载,只在需要时加载子节点,以优化性能和用户体验。 8. **可扩展性**:优秀的DTree库应提供API供开发者自定义行为,如添加新节点、删除节点、搜索节点等...

    带 checkbox 的 dtree 权限树

    - **权限继承**:在树结构中,父节点的权限通常会默认传递给子节点,除非子节点有特殊设置。 5. **后端接口**: - **获取权限树**:前端需要向后端请求权限树的数据,通常是一个JSON格式的树状结构。 - **保存...

    对带checkbox的dtree树复选操作的一点改进

    1. **复选逻辑**:在标准的dtree中,节点的选中状态可能会导致父节点和子节点的自动同步。例如,当所有子节点被选中时,父节点也会自动被选中;反之,如果父节点被选中,其所有子节点也可能默认被选中。这样的逻辑...

    dtree 加入checkbox

    它不仅更新当前节点的状态,还递归地更新所有子节点和父节点的状态,确保树状结构中相关节点的一致性。 ### checkbox状态同步机制 实现checkbox功能时,最核心的部分在于确保树结构中所有相关节点的复选框状态保持...

    dtree+checkbox

    总的来说,dtree+checkbox是dtree的一个增强版本,通过引入复选框,它为用户提供了更丰富的交互体验,使得在树形结构数据中进行多选操作变得更加直观和便捷。开发者需要具备扎实的JavaScript基础,理解DOM操作,以及...

    对dtree进行的修改加上了checkbox

    3. **级联选择**:父节点的选中状态是否影响其所有子节点。 4. **回溯状态**:当节点被折叠后,如何保存并恢复其展开时的选中状态。 5. **数据同步**:当`dtree`的状态改变时,如何同步到服务器端或者其他的客户端...

    原始dtree+右键dtree+复选框dtree

    3. `dtree_checkbox.js`:复选框dtree的实现,修改了`dtree.js`的源码,加入了复选框元素和相应的逻辑。 4. HTML和CSS文件:用于展示和样式化dtree实例。 5. 示例数据:可能包括JSON或其他格式的数据文件,用于填充...

    dtree的树状导航,没有checkbox例子,有checkbox例子,有全选功能,全部展开功能,全部关闭功能

    1. 数据格式:`dtree`通常需要一个包含父节点、子节点关系的数据结构。 2. 事件绑定:通过监听`dtree`的事件(如节点点击、复选状态变化等),可以实现自定义的业务逻辑。 3. 样式定制:为了满足界面风格统一,`...

    checkbox tree 带checkbox的树

    开发者可以利用各种前端框架或库(如React、Vue、Angular等)实现Checkbox Tree,例如在JavaScript中,有一些专门的库,如`dtree`(可能对应压缩包中的文件),提供了便捷的API和丰富的定制选项,帮助开发者快速构建...

    dTree源码及参数说明

    通过添加复选框,用户可以方便地勾选或取消勾选节点,而相应的逻辑(如父节点根据子节点状态自动调整选中状态)则需要在源码中进行实现或配置。 dTree与JavaScript Tree标签相关,表明它是用JavaScript编写的,适用...

    jstree_checkbox

    2. **层级关联**:节点的选择不仅限于单个节点,还可以根据配置实现父节点与子节点的关联。例如,如果父节点被选中,其所有子节点可能都会被自动选中,反之亦然。这种联动效果简化了用户在处理大量数据时的工作。 3...

    checkBoxTree 树

    这种联动行为是通过事件监听和状态更新来实现的,当子节点状态改变时,会触发父节点状态的更新。 4. **事件处理和状态管理**: 在JavaScript中,通常使用事件监听器来捕获用户对复选框的操作,如`click`事件。然后,...

    树形复选框(dtree)

    在dtree中,每个节点都可以是一个复选框,用户可以展开或折叠节点来查看和选择子节点。 ### 一、dtree的基本概念 1. **节点(Node)**: 在dtree中,每个可选项目都是一个节点,它可以包含文本、图标以及一个复选框...

Global site tag (gtag.js) - Google Analytics