再也不爲無限級樹結構煩惱,且看此篇s

時間 2019-11-12

標籤再也不爲無限結構煩惱且看简体版

原文原文鏈接

好久都沒有寫點什麼出來分享了,最近在作多級樹的時候,發現來來回回寫過不少遍,因而封裝成用戶控件,以方便往後重複使用.css

首先上效果:ide

咱們看到以上2種效果,都是支持任意級的,這裏源碼中使用的是遞歸,以便高效的完成HTML的渲染.ui

下面上代碼,代碼中解釋的都很詳細了,我就再也不細說.下面將有示例調用演示:this

  1 public partial class  UC_MultiLevelTree : System.Web.UI.UserControl
  2 {
  3     #region 數據相關屬性
  4 
  5     /// <summary>
  6     /// 要綁定的數據源
  7     /// </summary>
  8     public DataTable DataSource { get; set; }
  9 
 10     /// <summary>
 11     /// 多級樹顯示文本所在列列名
 12     /// </summary>
 13     public string TextFeild { get; set; }
 14 
 15     /// <summary>
 16     /// 多級樹單條數據識別列列名(即選擇項的值)
 17     /// </summary>
 18     public string ValueFeild { get; set; }
 19 
 20     /// <summary>
 21     /// 多級樹層級區別列列名(僅限單個列區分層級)
 22     /// </summary>
 23     public string LevelFeild { get; set; }
 24 
 25     /// <summary>
 26     /// 多級樹頂級的父項值
 27     /// </summary>
 28     public string TopLevelFeildValue { get; set; }
 29 
 30     #endregion
 31 
 32     #region 顯示相關屬性
 33 
 34     /// <summary>
 35     /// 是否顯示多選框,默認爲顯示
 36     /// </summary>
 37     public bool ShowCheckBox { get; set; }
 38 
 39     /// <summary>
 40     /// 是否顯示自定義根節點
 41     /// </summary>
 42     public bool ShowCustomerRoot { get; set; }
 43 
 44     /// <summary>
 45     /// 自定義根節點文本
 46     /// </summary>
 47     public string CustomerRootText { get; set; }
 48 
 49     /// <summary>
 50     /// 多級樹寬度,可爲像素或者百分比
 51     /// </summary>
 52     public string Width { get; set; }
 53 
 54     /// <summary>
 55     /// 多級樹高度,可爲像素或者百分比
 56     /// </summary>
 57     public string Height { get; set; }
 58 
 59     /// <summary>
 60     /// 展開符號(可爲HTML代碼)
 61     /// </summary>
 62     public string ExtendSign { get; set; }
 63 
 64     /// <summary>
 65     /// 收縮符號(可爲HTML代碼)

 66     /// </summary>
 67     public string ShrinkSign { get; set; }
 68 
 69     /// <summary>
 70     /// 每級與上級空格個數
 71     /// </summary>
 72     public int LevelSeparatorCount { get; set; }
 73 
 74     /// <summary>
 75     /// 默認展開級別
 76     /// </summary>
 77     public int ExtendLevelNum { get; set; }
 78 
 79     #endregion
 80 
 81     #region 私有變量
 82 
 83     /// <summary>
 84     /// 擴展標記的HTML
 85     /// </summary>
 86     private string StrExtendSign;
 87 
 88     /// <summary>
 89     /// 收縮標記的HTML
 90     /// </summary>
 91     private string StrShrinkSign;
 92 
 93     /// <summary>
 94     /// 多選框的HTML
 95     /// </summary>
 96     private string StrCheckbox;
 97 
 98     /// <summary>
 99     /// 子層級開始符號的HTML
100     /// </summary>
101     private string LevelSeparator = "&nbsp;";
102 
103     #endregion
104 
105 
106     protected override void OnInit(EventArgs e)
107     {
108         base.OnInit(e);
109         this.ShowCheckBox = true;
110         this.Width = "100%";
111         this.Height = "100%";
112         this.ExtendSign = "[+]";
113         this.ShrinkSign = "[-]";
114         this.TopLevelFeildValue = CRMCommon.strNullGuid;
115         this.LevelSeparatorCount = 4;
116         this.ExtendLevelNum = 2;
117     }
118 
119 
120     protected void Page_Load(object sender, EventArgs e)
121     {
122 
123     }
124 
125     public void DataBind()
126     {
127         this.StrCheckbox = this.ShowCheckBox ? "<input type='checkbox' class='MLT_Checkbox'/>" : "";
128         this.StrExtendSign = "<span class='MLT_ExtendSign' {0}>" + this.ExtendSign + "</span>";
129         this.StrShrinkSign = "<span class='MLT_ShrinkSign' {0}>" + this.ShrinkSign + "</span>";
130         this.ltMultiLevelTreeHtml.Text = RenderTree(this.TopLevelFeildValue, 1);
131     }
132 
133 
134     private string RenderTree(string parentValue, int level)
135     {
136         StringBuilder sb = new StringBuilder();
137 
138         string extendSignHtml = "";
139         string shrinkSignHtml = "";
140 
141         //收縮,展開按鈕的顯示控制
142         if (level < this.ExtendLevelNum)
143         {
144             extendSignHtml = string.Format(this.StrExtendSign, "style='display:none;'");
145             shrinkSignHtml = string.Format(this.StrShrinkSign, "");
146         }
147         else
148         {
149             extendSignHtml = string.Format(this.StrExtendSign, "");
150             shrinkSignHtml = string.Format(this.StrShrinkSign, "style='display:none;'");
151         }
152 
153         //自定義根節點
154         if (level == 1)
155         {
156             sb.AppendFormat("<div class='MLT_Panel' style='width:{0};height:{1}'>", this.Width, this.Height);
157             if (this.ShowCustomerRoot)
158             {
159                 sb.AppendFormat("<div class='MLT_Item' level='{0}' rel=''>{1}<span class='MLT_Item_Text'>{2}</span></div>", level, extendSignHtml + shrinkSignHtml + this.StrCheckbox, this.CustomerRootText);
160 
161                 level += 1;
162             }
163             sb.Append(RenderTree(parentValue, level));
164             sb.Append("</div>");
165         }
166 
167         else if (level != 1)
168         {
169             //數據項綁定
170             if (this.DataSource != null && this.DataSource.Rows.Count > 0)
171             {
172                 string levelSeparator = "";
173 
174                 if (level > 1)
175                 {
176                     levelSeparator += "<span  class='MLT_LevelSeparator'>";
177                     for (int i = 1; i <= (level - 1) * this.LevelSeparatorCount; i++)
178                     {
179                         levelSeparator += this.LevelSeparator;
180                     }
181                     levelSeparator += "</span>";
182                 }
183 
184                 DataRow[] drList = this.DataSource.Select(string.Format("{0}='{1}'", this.LevelFeild, parentValue));
185 
186                 if (drList != null && drList.Length > 0)
187                 {
188                     level += 1;
189                     foreach (DataRow dr in drList)
190                     {
191                         string childHtml = RenderTree(dr[ValueFeild].ToString(), level);
192 
193                         string signs = string.IsNullOrWhiteSpace(childHtml) ? "<span  class='MLT_ExtendSignPlaceholder'></span>" : extendSignHtml + shrinkSignHtml;
194 
195                         sb.AppendFormat("<div class='MLT_Item' level='{0}' rel='{1}' parent='{2}' {3}>{4}<span class='MLT_Item_Text'>{5}</span></div>", level - 1, dr[ValueFeild], dr[LevelFeild], level - 1 > this.ExtendLevelNum ? "style='display:none;'" : "", levelSeparator + signs + this.StrCheckbox, dr[TextFeild]);
196 
197                         if (!string.IsNullOrWhiteSpace(childHtml))
198                         {
199                             sb.Append(childHtml);
200                         }
201                     }
202                 }
203             }
204         }
205         return sb.ToString();
206 
207     }
208 }

View Code

  1 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="UC_MultiLevelTree.ascx.cs" Inherits="UC_MultiLevelTree" %>
  2 <asp:Literal runat="server" ID="ltMultiLevelTreeHtml"></asp:Literal>
  3 <script>
  4     $(function () {
  5         $(".MLT_Item").click(function (e) {
  6             e.stopPropagation();
  7             $(".MLT_Item").removeClass("MLT_Item_hover");
  8             $(this).addClass("MLT_Item_hover");
  9             extendItem(this);
 10         });
 11 
 12         $(".MLT_ExtendSign").click(function (e) {
 13             e.stopPropagation();
 14             var event = e.currentTarget;
 15             var item = $(event).parent();
 16             extendItem(item);
 17         })
 18 
 19         $(".MLT_ShrinkSign").click(function (e) {
 20             e.stopPropagation();
 21             var event = e.currentTarget;
 22             var item = $(event).parent();
 23             shrinkItem(item);
 24         })
 25 
 26         $(".MLT_Checkbox").click(function (e) {
 27             e.stopPropagation();
 28             var event = e.currentTarget;
 29             var item = $(event).parent();
 30             var checked = $(event).attr("checked");
 31             checkItems(item, checked);
 32         });
 33     });
 34 
 35     //展開項
 36     function extendItem(obj) {
 37         var rel = $(obj).attr("rel");
 38         if (rel != undefined && rel.length > 0) {
 39             $(obj).siblings("div[parent=" + rel + "]").each(function () {
 40                 $(this).show();
 41             });
 42         }
 43         else {
 44             $(obj).siblings("div[level=2]").show();
 45         }
 46         $(obj).find(".MLT_ExtendSign").hide();
 47         $(obj).find(".MLT_ShrinkSign").show();
 48     }
 49 
 50     //收縮項
 51     function shrinkItem(obj) {
 52         var rel = $(obj).attr("rel");
 53         if (rel != undefined && rel.length > 0) {
 54             $(obj).siblings("div[parent=" + rel + "]").each(function () {
 55                 $(this).hide();
 56                 $(this).find(".MLT_ExtendSign").show();
 57                 $(this).find(".MLT_ShrinkSign").hide();
 58                 shrinkItem(this);
 59             });
 60         }
 61         else {
 62             $(obj).siblings("div[level!=1]").hide();
 63             $(obj).siblings("div[level!=1]").find(".MLT_ExtendSign").show();
 64             $(obj).siblings("div[level!=1]").find(".MLT_ShrinkSign").hide();
 65         }
 66         $(obj).find(".MLT_ExtendSign").show();
 67         $(obj).find(".MLT_ShrinkSign").hide();
 68     }
 69 
 70     //選擇項
 71     function checkItems(obj, checked) {
 72         var rel = $(obj).attr("rel");
 73         if (rel != undefined && rel.length > 0) {
 74             if (checked) {
 75                 $(obj).siblings("div[parent=" + rel + "]").each(function () {
 76                     $(this).find("input[type=checkbox]").attr("checked", "checked");
 77                     checkItems(this, checked);
 78                 });
 79             }
 80             else {
 81                 $(obj).siblings("div[parent=" + rel + "]").each(function () {
 82                     $(this).find("input[type=checkbox]").removeAttr("checked");
 83                     checkItems(this, checked);
 84                 });
 85             }
 86         }
 87         else {
 88             if (checked) {
 89                 $(obj).parent().find("input[type=checkbox]").attr("checked", "checked");
 90             }
 91             else {
 92                 $(obj).parent().find("input[type=checkbox]").removeAttr("checked");
 93             }
 94         }
 95     }
 96 </script>
 97 <style type="text/css">
 98     .MLT_Panel
 99     {
100         white-space: nowrap;
101         overflow: auto;
102     }
103 
104     .MLT_Item
105     {
106         font-size: 12px;
107         line-height: 20px;
108         cursor: pointer;
109     }
110 
111     .MLT_Item_hover
112     {
113         background-color: rgb(167, 205, 240);
114     }
115 
116     .MLT_Item span
117     {
118         line-height: 20px;
119         display: inline-block;
120     }
121 
122     .MLT_Checkbox
123     {
124         position: relative;
125         width: 12px;
126         height: 12px;
127         margin: 0 2px;
128         bottom: 2px;
129     }
130 
131     .MLT_ExtendSign, .MLT_ShrinkSign, .MLT_ExtendSignPlaceholder
132     {
133         font-family: "宋體";
134         width: 18px;
135         text-align: center;
136     }
137 </style>