需要实现的功能: 选中父节点对应子节点全选; 不选中父节点, 对应子节点也不选中
如下图所示, 选中车队, 对应车队中车辆也全部选中, 以实现车队中所有车辆在地图上的显示.
选中 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 = 0;
- string strclass = "";
- if (itemNode.Count> 0)
- {
- sb_TreeNode.Append("<ul>");
- foreach (Info_Veh_Team entity in itemNode)
- {
- if (index1 == 0)
- 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 = 0;
- string strclass = "";
- if (itemNode.Count> 0)
- {
- sb_TreeNode.Append("<ul>");
- foreach (Info_Team_Member entity in itemNode)
- {
- if (index == 0)
- 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 = 0; i < team_id.length; i++) {
- team_id[i].checked = true;
- }
- } else {
- for (i = 0; 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 == 0) {
- //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 = 0; i < indexs.length; i++) { // 清除 vehIds[] 中的所有空字符串
- if (indexs[i] == '' || indexs[i] == null || typeof (indexs[i]) == undefined) {
- indexs.splice(i, 1);
- i = i - 1;
- }
- }
- for (var i = 0; i < vehIds.length; i++) { // 清除 vehIds[] 中的所有空字符串
- if (vehIds[i] == '' || vehIds[i] == null || typeof (vehIds[i]) == undefined) {
- vehIds.splice(i, 1);
- i = i - 1;
- }
- }
- self.vehIds = vehIds;
- self.indexs = indexs;
- var path = 'TeamMap.aspx';
- window.parent.frames['target_right'].location = path;
- Loading(true);
- });
调试结果:
参考实例:
http://blog.csdn.net/kissing7/article/details/8920566
参考网址:
来源: https://www.cnblogs.com/wenfb/p/8962572.html