閱讀目錄

•無限分級(jí)
•jstree插件
•Demo
•創(chuàng)建Region實(shí)體
•滿足jstree插件的數(shù)據(jù)對(duì)象Dto
•數(shù)據(jù)轉(zhuǎn)換
•初始化獲取轉(zhuǎn)換后的數(shù)據(jù)
•前臺(tái)數(shù)據(jù)加載
•其他操作
•通過按鈕來操作增刪改

無限分級(jí)

很多時(shí)候我們不確定等級(jí)關(guān)系的層級(jí)，這個(gè)時(shí)候就需要用到無限分級(jí)了。

說到無限分級(jí)，又要扯到遞歸調(diào)用了。（據(jù)說頻繁遞歸是很耗性能的），在此我們需要先設(shè)計(jì)好表機(jī)構(gòu)，用來存儲(chǔ)無限分級(jí)的數(shù)據(jù)。當(dāng)然，以下都是自己搗鼓的結(jié)果，非標(biāo)準(zhǔn)。誰有更好的設(shè)計(jì)望不吝嗇賜教。

說來其實(shí)也簡(jiǎn)單，就是一個(gè)ID和父ID的關(guān)系。

以此類推，Id需要是唯一的，ParenId需要是Id列里面存在即可。這樣我們就實(shí)現(xiàn)無限分級(jí)了，如果再加一列Sort排序就更完美了。

jstree插件

官方地址：https://www.jstree.com/

為什么要用這個(gè)插件？因?yàn)橛蟹奖愕腶pi給我們做數(shù)據(jù)綁定，且支持節(jié)點(diǎn)拖動(dòng)來實(shí)現(xiàn)增刪改，個(gè)人覺得這個(gè)功能挺強(qiáng)大的。

Demo

下面我們來基于jstree插件來實(shí)現(xiàn)無限分級(jí)數(shù)據(jù)操作。以區(qū)域數(shù)據(jù)操作為例，用Code First的方式來編寫demo代碼。

創(chuàng)建Region實(shí)體

為了配合插件自動(dòng)生成的節(jié)點(diǎn)id，我們這里使用的Node和ParentNode來存儲(chǔ)上下級(jí)關(guān)系（而不是上面說的id和parentid，但是實(shí)際效果是一樣的）。

/// <summary>/// 區(qū)域/// </summary>public class Region{ /// <summary> /// 主鍵id /// </summary> public int Id { get; set; } /// <summary> /// 名稱 /// </summary> public string Name { get; set; } /// <summary> /// 節(jié)點(diǎn) /// </summary> public string Node { get; set; } /// <summary> /// 父節(jié)點(diǎn) /// </summary> public string ParentNode { get; set; }}

滿足jstree插件的數(shù)據(jù)對(duì)象Dto

為了適應(yīng)jstree插件的數(shù)據(jù)要求，我們需要把上面的數(shù)據(jù)轉(zhuǎn)換成樹狀的數(shù)據(jù)對(duì)象。

/// <summary>/// Dto/// </summary>public class RegionsTreeOutput{ /// <summary> /// Id /// </summary> public int RegionsId { get; set; } /// <summary> /// tree顯示文本（對(duì)應(yīng)region的name） /// </summary> public string text { get; set; } /// <summary> /// tree的id（對(duì)應(yīng)Node） /// </summary> public string id { get; set; }   /// <summary> /// 子節(jié)點(diǎn)數(shù)據(jù)（此屬性就體現(xiàn)的數(shù)據(jù)的層級(jí)關(guān)系） /// </summary> public List<RegionsTreeOutput> children { get; set; }}

數(shù)據(jù)轉(zhuǎn)換

 #region GetRegionTree 初始化數(shù)據(jù)獲取 的輔助方法  public RegionsTreeOutput LoadRegions(string id, List<Region> inRegions, RegionsTreeOutput outRegions)  {   List<Region> regions = inRegions.Where(t => t.ParentNode == id).ToList();   if (outRegions == null)//加載父節(jié)點(diǎn)   {    outRegions = ToTreeData(regions[0]);    LoadRegions(outRegions.id, inRegions, outRegions);   }   else//加載子節(jié)點(diǎn)   {    outRegions.children = ToTreesData(regions);    if (regions.Count > 0)    {     for (int i = 0; i < regions.Count; i++)     {      LoadRegions(regions[i].Node, inRegions, outRegions.children[i]);//遞歸調(diào)用     }    }   }   return outRegions;  }  public RegionsTreeOutput ToTreeData(Region region)  {   var treeData = new RegionsTreeOutput();   treeData.id = region.Node;   treeData.text = region.Name;   treeData.RegionsId = region.Id;      return treeData;  }  public List<RegionsTreeOutput> ToTreesData(List<Region> listRegion)  {   var regions = new List<RegionsTreeOutput>();   for (int i = 0; i < listRegion.Count; i++)   {    regions.Add(ToTreeData(listRegion[i]));   }   return regions;  }  #endregion