TreeView CheckBox级联选中

最新推荐文章于 2019-07-12 16:32:33 发布
最新推荐文章于 2019-07-12 16:32:33 发布
阅读量1.1k 收藏
点赞数
分类专栏： 常用查询 文章标签： null input java div
 
方法一：子结点选中，父节点也随之选中
前台：
<head></head>之间插入如下Java代码
function  public_GetParentByTagName(element, tagName) 
{
          var  parent  =  element.parentNode;
          var  upperTagName  =  tagName.toUpperCase ();
          // 如果这个元素还不是想要的tag就继续上溯
          while  (parent  &&  (parent.tagName.toUpperCase()  !=  upperTagName)) 
         {
             parent  =  parent.parentNode  ?  parent.parentNode : parent.parentElement;
         } 
          return  parent;
}

 // 设置节点的父节点Cheched——该节点可访问，则他的父节点也必能访问 
function  setParentChecked(objNode)
{ 
          var  objParentDiv  =  public_GetParentByTagName (objNode, " div " );
          if  (objParentDiv == null   ||  objParentDiv  ==   " undefined " ) 
         {
              return ;
         } 
          var  objID  =  objParentDiv.getAttribute ( " ID " );
         objID  =  objID.substring( 0 ,objID.indexOf ( " Nodes " ));
         objID  =  objID + " CheckBox " ;
          var  objParentCheckBox  =  document.getElementById (objID);
          if  (objParentCheckBox == null   ||  objParentCheckBox  ==   " undefined " ) 
         {
              return ;
         } 
          if  (objParentCheckBox.tagName != " INPUT "   &&  objParentCheckBox.type  ==   " checkbox " )
          return ; 
         objParentCheckBox.checked  =   true ;
         setParentChecked (objParentCheckBox);
}

 // 设置节点的子节点uncheched——该节点不可访问，则他的子节点也不能访问 
function  setChildUnChecked(divID)
{ 
          var  objchild  =  divID.children;
          var  count  =  objchild.length; 
          for ( var  i = 0 ;i < objchild.length;i ++ ) 
         {
              var  tempObj  =  objchild [i];
              if (tempObj.tagName == " INPUT "   &&  tempObj.type  ==   " checkbox " ) 
             {
               tempObj.checked  =   false ;
             } 
             setChildUnChecked(tempObj); 
         }
}

 // 设置节点的子节点cheched——该节点可以访问，则他的子节点也都能访问 
function  setChildChecked(divID)
{ 
          var  objchild  =  divID.children;
          var  count  =  objchild.length; 
          for ( var  i = 0 ;i < objchild.length;i ++ ) 
         {
              var  tempObj  =  objchild [i];
              if (tempObj.tagName == " INPUT "   &&  tempObj.type  ==   " checkbox " ) 
             {
             tempObj.checked  =   true ;
             }
             setChildChecked(tempObj); 
         } 
}

 function  CheckEvent()
{

          var  objNode  =  event.srcElement; 

          if (objNode.tagName != " INPUT "   ||  objNode.type != " checkbox " ) 
          return ;

          if (objNode.checked == true ) 
         {
             setParentChecked (objNode);
               var  objID  =  objNode.getAttribute ( " ID " );
            var  objID  =  objID.substring( 0 ,objID.indexOf( " CheckBox " )); 
              var  objParentDiv  =  document.getElementById (objID + " Nodes " );
               if (objParentDiv == null   ||  objParentDiv  ==   " undefined " ) 
             {
             return ;
            } 
             setChildChecked (objParentDiv);
         } 
          else
         {
              var  objID  =  objNode.getAttribute ( " ID " );
            var  objID  =  objID.substring( 0 ,objID.indexOf( " CheckBox " )); 
              var  objParentDiv  =  document.getElementById (objID + " Nodes " );
               if (objParentDiv == null   ||  objParentDiv  ==   " undefined " ) 
             {
              return ;
             } 
             setChildUnChecked (objParentDiv);
         }
}
后台：Page_Load中添加单击事件
         protected   void  Page_Load( object  sender, EventArgs e)
        {
             if  ( ! IsPostBack)
            {
                 this .TreeView1.Attributes.Add( " onclick " , " CheckEvent() " );
            }
        }

方法二：子结点选中，父节点不跟随选中
前台：<head></head>之间插入如下Java代码
function  OnTreeNodeChecked() 
{ 
     var  ele  =  event.srcElement; 
     if (ele.type == ' checkbox ' ) 
    { 
         var  childrenDivID  =  ele.id.replace( ' CheckBox ' , ' Nodes ' ); 
         var  div  =  document.getElementById(childrenDivID); 
         if (div == null ) return ; 
         var  checkBoxs  =  div.getElementsByTagName( ' INPUT ' ); 
         for ( var  i = 0 ;i < checkBoxs.length;i ++ ) 
        { 
             if (checkBoxs[i].type == ' checkbox ' ) 
                checkBoxs[i].checked = ele.checked; 
        } 
    } 
} 
前台页面：
  TreeView添加
OnClick = " OnTreeNodeChecked()
事件
gameWYD
关注
专栏目录
VB.NET中treeview使用方法一
攻城狮的梦想
03-20 1万+
最近发现一控件特有意思，结合网上的教程，研究（难道只有科学家才能用这一词，我等小辈不可以吗？）了一番，这就是treeview控件，我准备从以下几个方面学习它 一、treeview的基本用法及真容（没见过面，就谈不了解，不了解就谈不交朋友，扯远了） 二、treeview的应用实例（网上很少，自已动手，丰衣足食） 三、treeview 与数据库的给合（有点难，我下决心克服它） 环境VS2005
treeview控件中的checkbox级联选择
pengpengcsdn的专栏
09-04 579
treeview控件中的checkbox级联选择。private void setNodeCheckState(TreeNode tn){            foreach(TreeNode t in tn.Nodes)            {                t.Checked = tn.Checked;                setNodeCheckState(
Asp.Net 2.0 TreeView的Checkbox级联操作
学习笔记
11-09 676
1.前言<br />用.Net 做Web应 用, 有一个很大的苦恼就是没有太趁手的TreeView可 用。微软的TreeView仅用作数据显示还行，但服务器控件不停的刷新太影响客户体验。商业化的TreeView（obout treeview / FlyTreeView / Infragistics NetAdvantage Treeview） 都不错，特别是obout treeview短小精干讨人喜欢，但许可证是一个大障碍（公司一般不 会花钱买的）。我一般而言，在TreeView上做事情，用ch
【原】TreeView+Checkbox级联操作（IE/FireFox测试通过）
weixin_33862188的博客
03-10 84
TreeView+Checkbox级联操作 步骤1、前台页面拖放一个Treeview，将其ShowCheckBoxes属性设置为All <asp:TreeViewID="tvCountry"runat="server"ShowCheckBoxes="All"> 步骤2、在后台代码中添加Treeview的特性，使得Treeview控件在单击时触发JavaScr...
TreeView实现级联选择
htsitr2的专栏
09-04 2755
问题 TreeView
TreeView 控件 Checkbox 级联选择
weixin_33816300的博客
02-11 112
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...
C#树形菜单的CheckBox级联选择
07-27
实现树形菜单的CheckBox级联选择功能是增强用户交互性的重要手段，它允许用户通过选择一个节点来自动选中或取消选中其所有子节点，以及可能的父节点。这个特性通常在多级选择场景中非常有用。 首先，我们要理解`...
jQuery的高性能TreeView源码(带CheckBox)
11-17
jQuery的高性能TreeView源码(带CheckBox) 1：支持静态的树，即一次性将全部数据加载到客户端。 2：异步树，即一次只加载一级或若干级节点，子节点可以异步加载数据。 3：Checkbox树（可能是静态树也可能是异步树...
bootstrap treeview级联效果demo
04-05
- 初始化treeview组件，设置必要的参数，如`data-checkbox`用于开启复选框，`data-cascade`用于启用级联勾选。 - 如果需要自定义行为，可以通过监听`check`或`uncheck`事件来处理级联逻辑。 5. **示例代码** ...
bootstrap treeview 树形菜单带复选框及级联选择功能
12-29
具体代码如下所示： <div id=searchTree></div> [removed] var treeData = [{ text: Parent 1, nodes: [{ text: Child 1, nodes: [{ text: Grandchild 1 }, { text: Grandchild 2, ... }
Treeview中checkbox选择问题
03-03
Treeview中的Checkbox选择问题，就是选择子节点中的任何一个，父节点都会被选中；取消父节点Checkbox，所有子节点被取消....
树形控件复选框的级联选择
weixin_30733003的博客
07-12 454
用到TreeView的CheckBox时,通常需要联动操作,即父节点被选中,则子节点全部选中,反之一样,这样的需求用JavaScript实现比较适合,如果用c#代码实现这样的效果,性能是不如JavaScript的 贴上代码: Code<scripttype="text/javascript"language="javascript">//checkb...
[导入]TreeView的级联选择（下）
weixin_30484247的博客
11-27 82
书接上回。 选中父节点要比选中子节点稍微复杂一些。 1.如果这个节点原来的状态为未选中，现在选中了，那简单了，找到它的父节点，选中父节点，继续以父节点为起点，继续向上找，直到到达根节点。 2.如果这个节点原来的状态为选中，现在不选了，那么比较麻烦。 2.1如果这个节点的兄弟节点中有选中的，那么父节点的选中与否，就可以用兄弟节点为基础来做了。 2.2如果这个节点的所有兄...
wpf带checkbox的treeview开发
热门推荐
江下飞雪
09-12 1万+
好久没有写博文了，其实也发现没什么可写的，最近又搞起WPF来，其中用到了treeview，有点东西拿来分享一下。 　　treeview默认是不带checkbox的，但让他带checkbox也很简单，设置一下样式即可，当然这不是难点，也不是重点，重点是checked属性怎么关联数据的问题，笔者也是查阅网上诸多大神的示例，其中就使用了绑带数据源的方式，实现动态改变checked状态，笔者也是在此基础
TreeView加载数据库数据的三种方法实现三级联动
nuptsv_ice的专栏
08-13 849
[csharp] view plaincopyprint? "font-size:18px;">方法一：.将所有节点加载到目录树上：   using System;   using System.Collections.Generic;   using System.Linq;   using System.Web;   using System.Web.U
bootstrap treeview级联勾选的正确姿势
hotqin888的专栏
01-06 6530
上一篇文章已经说过它自带级联功能。必须用这个：https://github.com/patternfly/patternfly-bootstrap-treeview $('#tree').treeview({ showCheckbox: true, data: [data], // data is not optional
kendoui treeview树形菜单含有checkbox的选择问题
hikvision_gongyq的博客
05-22 2905
$(document).ready(function(){ var basePath = $('#contextPath').val(); /** * treeview相关的数据 */ String.prototype.bool = function() {      return (/^true$/i).test(this);  };  var commonTreeViews=$("div[...
JS TreeView的Checkbox级联操作
weixin_34337381的博客
03-09 106
1 前言 用.Net 做Web应用, 有一个很大的苦恼就是没有太趁手的TreeView可用。微软的TreeView仅用作数据显示还行，但服务器控件不停的刷新太影响客户体验。商业化的TreeView（obout treeview / FlyTreeView / Infragistics NetAdvantage Treeview）都不错，特别是obout tr...
kendo ui grid checkboxz勾选全部效果
jbgtwang的专栏
07-29 1万+
关键代码片段： 指定kendo ui grid的列 Columns = [                      {template:'', title:'', width:30},                      {field:"name", title:"名字", width:80}                      ]; 定义testI
bootstrap treeview 级联示例
最新发布
10-18
Bootstrap Treeview是一个用于在web应用程序中显示可折叠层次结构数据的插件。级联示例是指当一个节点被选中时，其子节点也会被自动选中。 在使用Bootstrap Treeview插件时，可以通过配置选项来实现级联示例。首先，需要为每个节点添加一个唯一的id属性，用于标识该节点。接下来，要设置节点的checked属性，来确定节点是否选中。 通过设置节点的checkbox属性为true，可以使节点显示复选框。当一个节点被选中时，Bootstrap Treeview会调用onNodeChecked事件，可以在此事件中编写代码来实现级联示例。在该事件中，可以获取到选中节点的id和父节点的id，通过这些信息可以找到子节点的id并设置其checked属性为true，从而实现级联选中。 例如，有一个层次结构如下所示： - 根节点 (id: 1) - 子节点1 (id: 2, parentId: 1) - 孙子节点1 (id: 3, parentId: 2) - 孙子节点2 (id: 4, parentId: 2) - 子节点2 (id: 5, parentId: 1) 当选中根节点时，其下的所有子节点都会自动选中。以下是一个简单的使用Bootstrap Treeview实现级联示例的示例代码： ```javascript $('#treeview').treeview({ data: // treeview的数据源，即层次结构数据 onNodeChecked: function(event, node) { var childrenNodes = $('#treeview').treeview('getSiblings', node.nodeId); // 获取选中节点的所有兄弟节点 $.each(childrenNodes, function(index, childNode) { $('#treeview').treeview('checkNode', [childNode.nodeId, { silent: true }]); // 设置兄弟节点的选中状态 }); } }); ``` 以上代码将树视图实例化为id为"treeview"的元素，设置了onNodeChecked事件回调函数。当一个节点被选中时，回调函数获取其所有兄弟节点，并设置其选中状态为真。这样当选中一个节点时，其所有子节点都会被选中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值