需要实现的功能:选中父节点对应子节点全选;不选中父节点,对应子节点也不选中
如下图所示,选中车队,对应车队中车辆也全部选中,以实现车队中所有车辆在地图上的显示。

选中cqupt1,则对应所有成员car1,car2自动选中,地图上显示车队中的所有车辆位置信息

解决办法:

车队对应的id为team_id,车辆对应的id为veh_id,在每个车队中,所有车辆对应同一个team_id

1、首先在TeamTree.aspx.cs文件中
把team_id从父节点函数中传递到子节点函数中,
再给该车队每个成员定义一个共同的标签名称team_id,这样car1/car2/car3三个车有个共同的标签team_id :
sb_TreeNode.Append("<div class='" + strclass + "'><input id='" + entity.team_id + "' type='checkbox' /><span>" + entity.team_name + "</span></div>");
选中team_id,对应的member_id都选中,并传递member_id,而不传递team_id。而上面的程序直接把id传出
对应代码如下:
 /// <summary>
/// 创建子节点
/// </summary>
/// <param name="list">list</param>
/// <returns></returns>
public string GetTreeNode(IList list)
{
Info_Veh_Team info_veh_team = new Info_Veh_Team();
StringBuilder sb_TreeNode = new StringBuilder();
List<Info_Veh_Team> itemNode = IListHelper.IListToList<Info_Veh_Team>(list); int index1 = ;
string strclass = "";
if (itemNode.Count > )
{
sb_TreeNode.Append("<ul>");
foreach (Info_Veh_Team entity in itemNode)
{
if (index1 == )
strclass = "collapsableselected";
else
strclass = "";
sb_TreeNode.Append("<li>");
sb_TreeNode.Append("<div class='" + strclass + "'><input id='" + entity.team_id + "' type='checkbox' id1='" + index1 + "' /><span>" + entity.team_name + "</span></div>"); info_veh_team = info_veh_teamibll.GetEntity(entity.team_id);
StringBuilder where = new StringBuilder();
where.Append("and team_id='" + info_veh_team.team_id + "'");
IList nextlist = info_team_memberibll.GetListWhere(where, null);
sb_TreeNode.Append(GetTreeNodeNext(nextlist, index1));
sb_TreeNode.Append("</li>");
index1++;
}
sb_TreeNode.Append("</ul>");
}
return sb_TreeNode.ToString();
}
/// <summary>
/// 创建子节点
/// </summary>
/// <param name="list">list</param>
/// <returns></returns>
public string GetTreeNodeNext(IList list, int index1)
{
StringBuilder sb_TreeNode = new StringBuilder();
List<Info_Team_Member> itemNode = IListHelper.IListToList<Info_Team_Member>(list);
int index = ;
string strclass = "";
if (itemNode.Count > )
{
sb_TreeNode.Append("<ul>");
foreach (Info_Team_Member entity in itemNode)
{
if (index == )
strclass = "collapsableselected";
else
strclass = "";
sb_TreeNode.Append("<li>");
sb_TreeNode.Append("<div class='" + strclass + "'><input id='" + entity.member_id + "' type='checkbox' name='" + index1 + "' id2='" + index1 + "' id3='" + entity.veh_lpn + "'/><span>" + entity.veh_lpn + "</span></div>");
sb_TreeNode.Append("</li>");
index++;
}
sb_TreeNode.Append("</ul>");
}
return sb_TreeNode.ToString();
}
2、具体的复选框选中在js里面去实现,也就是TeamTree.aspx中去实现(选中父则子全选中)
在TeamTree.aspx中,先是把复选框选中的所有元素保存到数组中,界面点击传出的选中的结果,对应实现应该勾选的各结果
$('.strTree li div input:checkbox').click(function () {//问题:如何实现选中车队,对应成员全部选中,并传对应所有成员的member_id,而不是传team_id

                team_id = document.getElementsByName($(this).attr('id1'));    //通过name   获取name='team_id'的子元素        ($(this).attr('id'))为被选中的车队名
team = document.getElementById($(this).attr('id')); //通过id获取 获取的是被勾选的车队或者车辆的id
if (team.checked) {
for (i = ; i < team_id.length; i++) {
team_id[i].checked = true;
}
} else {
for (i = ; i < team_id.length; i++) {
team_id[i].checked = false;
}
} //alert(team_id.length);
var indexs = [];
var vehIds = [];
$(".strTree li div input:checkbox:checked").each(function (i) { //由于复选框选中多个,所以循环输出
v = document.getElementsByName($(this).attr('id1'));
//alert("v的值" + v.length);
if (v.length == ) {
//vehIds[i] = $(this).attr('id2') + "|" + $(this).attr('id3');
indexs[i] = $(this).attr('id2');
vehIds[i] = $(this).attr('id3');
}
//vehIds[i] = $(this).attr('id'); //attr() 方法设置或返回被选元素的属性值 });
for (var i = ; i < indexs.length; i++) { //清除vehIds[]中的所有空字符串
if (indexs[i] == '' || indexs[i] == null || typeof (indexs[i]) == undefined) {
indexs.splice(i, );
i = i - ;
}
}
for (var i = ; i < vehIds.length; i++) { //清除vehIds[]中的所有空字符串
if (vehIds[i] == '' || vehIds[i] == null || typeof (vehIds[i]) == undefined) {
vehIds.splice(i, );
i = i - ;
}
}
self.vehIds = vehIds;
self.indexs = indexs; var path = 'TeamMap.aspx';
window.parent.frames['target_right'].location = path;
Loading(true);
});

调试结果:

参考实例:
参考网址:
 
 

Web网页树形列表中实现选中父节点则子节点全选和不选中父则子全不选的更多相关文章

  1. 20150812 Asp.net 父窗体获取子窗体的返回值,更新父窗体文本控件(应用)

    1. 父窗体 **************************************** using System;using System.Collections;using System.C ...

  2. C#中treeview的问题,如何区分根节点和子节点以及根节点和根节点的兄弟节点?

    根节点的Level属性为0,一级子节点Level属性为1,二级子节点Level属性为2,以此类推:同级节点可以用索引.名称.文本来区分.用索引区分根节点时,TreeView.Nodes[0]就是第一个 ...

  3. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

  4. zTree实现清空选中的第一个节点的子节点

    zTree实现清空选中的第一个节点的子节点 1.实现源代码 <!DOCTYPE html> <html> <head> <title>zTree实现基本 ...

  5. SqlServer父节点与子节点查询及递归

    在最近老是用到这个SQL,所以记下来了: 1:创建表 CREATE TABLE [dbo].[BD_Booklet]( [ObjID] [int] IDENTITY(1,1) NOT NULL, [P ...

  6. 包含mysql 递归查询父节点 和子节点

    包含mysql 递归查询父节点 和子节点 mysql递归查询,查父集合,查子集合 查子集合 --drop FUNCTION `getChildList` CREATE FUNCTION `getChi ...

  7. Jquery选择器之父节点的子节点

    今天review代码,发现有哥们这么写 var span = $($("span"),$("#main")); 我百思不得其解,$(a,b)又好像在哪里见过,后 ...

  8. cocos2d-x 父节点和子节点执行不同动作

    Test6::Test6() { CCSprite* sp1 = CCSprite::create(s_pPathSister1); CCSprite* sp11 = CCSprite::create ...

  9. ztree 获取当前选中节点的子节点集合

    功能:获取当前选中节点的子节点id集合. 步骤:1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值 ...

随机推荐

  1. spring3——IOC之基于XML的依赖注入(DI )

    我们知道spring容器的作用是负责对象的创建和对象间关系的维护,在上一篇博客中我们讲到spring容器会先调用对象的无参构造方法创建一个空值对象,那么接下来容器就会对对象的属性进行初始化,这个初始化 ...

  2. Android WebView那些坑之上传文件

    最近公司项目需要在WebView上调用手机系统相册来上传图片,开发过程中发现在很多机器上无法正常唤起系统相册来选择图片. 解决问题之前我们先来说说WebView上传文件的逻辑:当我们在Web页面上点击 ...

  3. [SHOI2009] 会场预约 - Treap

    Description PP大厦有一间空的礼堂,可以为企业或者单位提供会议场地.这些会议中的大多数都需要连续几天的时间(个别的可能只需要一天),不过场地只有一个,所以不同的会议的时间申请不能够冲突.也 ...

  4. Java-Maven(一):Maven的简介与安装

    Maven的简介 Maven是什么? Maven是一个项目管理和整合的工具.Maven为开发者提供了一套完整的构建生命周期框架.开发者可以通过Maven更快的自动完成工程的基础构建陪孩子,因为Mave ...

  5. BeautifulSoup重点复习

    html = """ <html><head><title>The Dormouse's story</title>< ...

  6. ubuntu安装mysql并修改编码为utf-8

    参考地址:ubuntu中文 sudo apt-get install mysql-server mysql-client -y # 中途会要求输入一下root用户的密码 编辑/etc/mysql/co ...

  7. jQuery中的for循环var与let的区别

    今天在写jQuery请求接口中发现一个问题: 在用AJAX发送请求中又嵌套了一个AJAX请求,发现在内层请求的success中对第一次success中的循环变量 i 无法获取,具体代码如下: $.aj ...

  8. DDD实战进阶第一波(五):开发一般业务的大健康行业直销系统(实现产品上下文领域层)

    从这篇文章开始,我们根据前面的DDD理论与DDD框架的约束,正式进入直销系统案例的开发. 本篇文章主要讲产品上下文中的领域层的主要实现,先简单讲下业务方面的需求:产品SPU与产品SKU,产品SPU主要 ...

  9. js switch判断 三目运算 while 及 属性操作

    三 目运算:如var a = 10: var b= 12: c = a>b ?a:b; 若成立执行a否则执行b var isHide = true; 若用if判断语句如下 if(isHide) ...

  10. IOS开发-UIDynamic(物理仿真)简单使用

    UIDynamic是从IOS7开始引入的一种新技术,隶属于UIKit框架,我们可以认为是一种物理引擎能模拟和仿真现实生活中的物理现象,比如重力,弹性碰撞等. 可以让开发人员远离物理公式的情况下,实现一 ...