需要實現的功能:選中父節點對應子節點全選;不選中父節點,對應子節點也不選中 如下圖所示,選中車隊,對應車隊中車輛也全部選中,以實現車隊中所有車輛在地圖上的顯示。 選中cqupt1,則對應所有成員car1,car2自動選中,地圖上顯示車隊中的所有車輛位置信息 解決辦法: 車隊對應的id為team_id ...
需要實現的功能:選中父節點對應子節點全選;不選中父節點,對應子節點也不選中
如下圖所示,選中車隊,對應車隊中車輛也全部選中,以實現車隊中所有車輛在地圖上的顯示。

選中cqupt1,則對應所有成員car1,car2自動選中,地圖上顯示車隊中的所有車輛位置信息
解決辦法:車隊對應的id為team_id,車輛對應的id為veh_id,在每個車隊中,所有車輛對應同一個team_id
1、首先在TeamTree.aspx.cs文件中 把team_id從父節點函數中傳遞到子節點函數中,
1 /// <summary> 2 /// 創建子節點 3 /// </summary> 4 /// <param name="list">list</param> 5 /// <returns></returns> 6 public string GetTreeNode(IList list) 7 { 8 Info_Veh_Team info_veh_team = new Info_Veh_Team(); 9 StringBuilder sb_TreeNode = new StringBuilder(); 10 List<Info_Veh_Team> itemNode = IListHelper.IListToList<Info_Veh_Team>(list); 11 12 int index1 = 0; 13 string strclass = ""; 14 if (itemNode.Count > 0) 15 { 16 sb_TreeNode.Append("<ul>"); 17 foreach (Info_Veh_Team entity in itemNode) 18 { 19 if (index1 == 0) 20 strclass = "collapsableselected"; 21 else 22 strclass = ""; 23 sb_TreeNode.Append("<li>"); 24 sb_TreeNode.Append("<div class='" + strclass + "'><input id='" + entity.team_id + "' type='checkbox' id1='" + index1 + "' /><span>" + entity.team_name + "</span></div>"); 25 26 info_veh_team = info_veh_teamibll.GetEntity(entity.team_id); 27 StringBuilder where = new StringBuilder(); 28 where.Append("and team_id='" + info_veh_team.team_id + "'"); 29 IList nextlist = info_team_memberibll.GetListWhere(where, null); 30 sb_TreeNode.Append(GetTreeNodeNext(nextlist, index1)); 31 sb_TreeNode.Append("</li>"); 32 index1++; 33 } 34 sb_TreeNode.Append("</ul>"); 35 } 36 return sb_TreeNode.ToString(); 37 } 38 /// <summary> 39 /// 創建子節點 40 /// </summary> 41 /// <param name="list">list</param> 42 /// <returns></returns> 43 public string GetTreeNodeNext(IList list, int index1) 44 { 45 StringBuilder sb_TreeNode = new StringBuilder(); 46 List<Info_Team_Member> itemNode = IListHelper.IListToList<Info_Team_Member>(list); 47 int index = 0; 48 string strclass = ""; 49 if (itemNode.Count > 0) 50 { 51 sb_TreeNode.Append("<ul>"); 52 foreach (Info_Team_Member entity in itemNode) 53 { 54 if (index == 0) 55 strclass = "collapsableselected"; 56 else 57 strclass = ""; 58 sb_TreeNode.Append("<li>"); 59 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>"); 60 sb_TreeNode.Append("</li>"); 61 index++; 62 } 63 sb_TreeNode.Append("</ul>"); 64 } 65 return sb_TreeNode.ToString(); 66 }
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 參考網址: http://www.codeweblog.com/jquery%e6%93%8d%e4%bd%9c%e4%b8%89%e5%a4%a7%e6%8e%a7%e4%bb%b6-%e4%b8%8b%e6%8b%89-%e5%8d%95%e9%80%89-%e5%a4%8d%e9%80%89-%e7%9a%84%e6%96%b9%e6%b3%95/ http://www.codeweblog.com/jquery%e6%93%8d%e4%bd%9c%e5%a4%8d%e9%80%89%e6%a1%86-checkbox-%e7%9a%8412%e4%b8%aa%e5%b0%8f%e6%8a%80%e5%b7%a7%e6%80%bb%e7%bb%93/ http://www.cnblogs.com/Chen-XiaoJun/p/5753911.html