Web網頁樹形列表中實現選中父節點則子節點全選和不選中父則子全不選

来源:https://www.cnblogs.com/wenfb/archive/2018/04/27/8962572.html
-Advertisement-
Play Games

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


            需要實現的功能:選中父節點對應子節點全選;不選中父節點,對應子節點也不選中
如下圖所示,選中車隊,對應車隊中車輛也全部選中,以實現車隊中所有車輛在地圖上的顯示。

選中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傳出 對應代碼如下:
 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
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言 本篇文章主要講述的是 SpringBoot 整合 Mybatis 、 Druid 和 PageHelper 並實現多數據源和分頁。其中SpringBoot整合Mybatis這塊,在之前的的 "一篇文章" 中已經講述了,這裡就不過多說明瞭。重點是講述在多數據源下的如何配置使用Druid和Page ...
  • 今天遇到一個問題,暫時想不通,趁熱先記下 000:101001:102002:103003:104004:105005:106006:107007:108008:109009:110 000:110001:110002:110003:110004:110005:110006:110007:11000 ...
  • numpy.random.choice(a, size=None, replace=True, p=None) 從給定的一維數組或整數中生成隨機樣本 a 一維數組或整數 size 生成樣本的大小 replace bool類型 False表示樣本中不允許有重覆值 True...... p 給定數組中元 ...
  • Entity Framework簡介 Entity Framework的全稱為 ADO.NET Entity Framework ,簡稱為EF, 是微軟以ADO.NET為基礎發展出來的實體框架,早期被稱為ObjectSpace. 除了EF之外,daoNet平臺下還有許多的ORM框架:Nibernat ...
  • 最近有對一個Windows應用程式少許維護和修改。修改之後要發佈新的exe安裝文件,打包exe文件時,遇到了很頭疼的問題,還好最後解決了,記錄一下。 Visual Studio版本:Visual Studio 2017 <! more Visual Studio 2017 打包插件 新建項目 其他項 ...
  • C#中List<T>排序的兩種方法 List<Student> stu = (List<Student>)Session["StudentList"]; Linq表達式: //按學號降序 List<Student> stuList = (from s instu orderby s.stuNOdes ...
  • 第一次博客試一下 ...
  • 讓柱狀圖緊挨 改變柱狀圖寬度 chart1.Series[0]["PointWidth"] = "2"; ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...