Asp.net下拉樹的實(shí)現(xiàn)過程

更新時(shí)間：2022年05月03日 12:24:16 投稿：lijiao

這篇文章主要介紹了Asp.net下拉樹的實(shí)現(xiàn)過程，文章思路清晰，推薦給大家閱讀，需要的朋友可以參考下

場景描述：某個(gè)公司有多個(gè)部門并且部門存在子部門，通過一個(gè)下拉框選取多個(gè)部門，但是如果某個(gè)部門的子部門被全部選擇，則只取該部門，而忽略子部門。（葉子節(jié)點(diǎn)全被選中時(shí)，只取父節(jié)點(diǎn)）

知識(shí)點(diǎn)：ComboTree、一般處理程序、遞歸、Json

效果如圖

數(shù)據(jù)庫表設(shè)計(jì)：unit_main

節(jié)點(diǎn)類設(shè)計(jì)：

public class Unit
 {
 public decimal id { get; set; }
 public string text { get; set; }
 public string state { get; set; }
 public List<Unit> children { get; set; }
 public Unit ()
 {
 this.children = new List<Unit>();
 this.state = "open";
 }
 }

處理類設(shè)計(jì)：

public class UnitComponent
 {
 ExeceteOralceSqlHelper SqlHelper= new ExeceteOralceSqlHelper();//數(shù)據(jù)庫處理類
 public UnitParent GetUnit()
 {
  Unit rootUnit = new Unit();
  rootUnit.id = 1000;
  rootUnit.text = "BO API";
  rootUnit.children = GetUnitList(0);
  UnitRecursive(rootUnit.children);
  return rootUnit;
 }

 /// <summary>
 /// 遞歸查詢部門
 /// </summary>
 /// <param name="units"></param>
 private void UnitRecursive(List<Unit> units)
 {
  foreach (var item in units)
  {
  item.children = GetUnitList(item.id);
  if (item.children != null && item.children.Count > 0)
  {
   item.state = "closed";
   UnitRecursive(item.children);
  }
  }
 }

 /// <summary>
 /// 通過parentID獲取所有子部門
 /// </summary>
 /// <param name="parentID">父id</param>
 /// <returns>返回Unit集合</returns>
 private List<Unit> GetUnitList(decimal parentID)
 {
  List<Unit> unitLst = new List<Unit>();
  string sql = string.Format("select hh.unit_id,hh.unit_name from unit_main hh where hh.parent_id={0}", parentID);
  DataTable dt = SqlHelper.ExecuteDataTable(sql);//返回DataTable方法
  if (dt != null && dt.Rows.Count > 0)
  {
  for (int i = 0; i < dt.Rows.Count; i++)
  {
   Unit dtup = new Unit()
   {
   id = Convert.ToInt32(dt.Rows[i]["unit_id"]),
   text = dt.Rows[i]["unit_name"].ToString()
   };
   unitLst.Add(dtup);
  }
  }
  return unitLst;
 }
}

下面，新建web應(yīng)用程序-添加-一般處理程序，其中JavaScriptSerializer你可以換為NewtonSoft來處理

public void ProcessRequest(HttpContext context)
{
 JavaScriptSerializer js = new JavaScriptSerializer();
 context.Response.ContentType = "application/json";
 UnitComponent uc = new SynUser.UnitComponent();
 var unit = uc.GetUnit();
 context.Response.Write("[" + js.Serialize(unit) + "]");
}

現(xiàn)在我們測試一下這個(gè)一般處理程序，如果像圖片一樣返回了結(jié)果說明正確：

好了，部門結(jié)構(gòu)的數(shù)據(jù)準(zhǔn)備好了，下開始寫前臺(tái)代碼：

新建一個(gè)aspx頁面，拖一個(gè)控件

<asp:TextBox ID="tbUnit" runat="server" Width="280px"></asp:TextBox>

引入相應(yīng)的js，在script加入代碼

$('#tbUnit').combotree({
 url: , '/unit.ashx'
 cascadeCheck: true,
 placeholder: "請選擇部門",
 method: 'get',
 required: true,
 multiple: true,
 onChange: function (newValue, oldValue) {
 computeunit();
 },
 onLoadSuccess: function (node, data) {
    
 }
});

不知你有沒有發(fā)現(xiàn)我選中的是應(yīng)用管理服務(wù)中心、xiaobo、tech三個(gè)節(jié)點(diǎn)，但是xiaobo、tech是應(yīng)用服務(wù)中心的葉子節(jié)點(diǎn)。需求要求，我們只需獲取應(yīng)用管理服務(wù)中心節(jié)點(diǎn)，不需要在獲取xiaobo、tech。

所有要通過js遍歷tree來獲取我們想要的節(jié)點(diǎn)，computerunit方法是我們想要的。

思路為：遞歸獲取被選的子節(jié)點(diǎn)，然后與所選的節(jié)點(diǎn)作差集，最后的得到的就是被選的節(jié)點(diǎn)（不包括全選的子節(jié)點(diǎn)）

function computeunit() {
  var arr = new Array();
  var selectstr = $("#tbUnit").combotree("getValues").toString();
  var select = selectstr.split(",");
  var t = $('#tbUnit').combotree('tree'); // get the tree object
  var n = t.tree('getChecked'); // get selected node
  unitrecursive(t, n, arr);
  alert(subtraction(select, arr).join(","));
 }

 /*計(jì)算數(shù)組差集
 **返回結(jié)果數(shù)組
 */
 function subtraction(arr1, arr2) {
  var res = [];
  for (var i = 0; i < arr1.length; i++) {
  var flag = true;
  for (var j = 0; j < arr2.length; j++) {
   if (arr2[j] == arr1[i]) {
   flag = false;
   }
  }
  if (flag) {
   res.push(arr1[i]);
  }
  }
  return res;
 }

 /*獲取被選父節(jié)點(diǎn)的子項(xiàng)目
 **返回結(jié)果arr里
 */
 function unitrecursive(t, nodes, arr) {
  for (var i = 0; i < nodes.length; i++) {
  if (!t.tree('isLeaf', nodes[i].target)) {
   var nn = t.tree('getChildren', nodes[i].target);
   for (var j = 0; j < nn.length; j++) {
   arr.push(nn[j].id);
   }
   unitrecursive(t, nn, arr);
  }
  }
 }

以上就是ASP.NET實(shí)現(xiàn)下拉樹（Easy UI ComboTree）的全部思路，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: