树型结构~无限级联下拉列表框

这个问题困扰了我很久,今天终于把它解决了,心中的喜悦可想而知,赶快把它记录一下

标题无限级联下拉列表框的含义:

可能有一个树型结构的表,它可能有ID,Name,ParentID,Level等字段,下面要实现的就是从一级节点开始,一级一级的列出来,并以

下拉列表框的形式体现出来,就像是N级联动。

效果图:

两个问题:

1 建立操作时的联动,它不需要进行自动绑定

2 编辑操作时的联运,它需要根据子节点,逐级自己绑定到父节点,直到根

实现:

JS代码

 1 <script type="text/javascript">

 2     function areaOnSelect(obj) {

 3         var res = '';

 4         $.ajax({ url: '@Url.Action("GetSubTree")',

 5             type: 'GET',

 6             data: { parentId: obj.value },

 7             success: function (msg) {

 8                 $(obj).nextAll().remove();

 9                 res = "<select name='Sub' onchange='areaOnSelect(this)'>";

10                 res += "<option value=''>请选择</option>";

11                 $.each(msg, function (i, item) {

12                     res += "<option value='" + item["ID"] + "'>" + item["Name"] + "</option>";

13                 });

14                 res += "</select>";

15                 if ($(res).find("option").size() > 1)

16                     $(obj).after(res);

17             }

18         });

19     }

20 </script>


C#代码:

 1     #region 树型结构相关

 2         /// <summary>

 3         /// 递归找老祖宗

 4         /// </summary>

 5         /// <param name="father"></param>

 6         void GetFather(SubItem father)

 7         {

 8             if (father != null)

 9             {

10                 father.Parent = _subList.FirstOrDefault(i => i.ID == father.ParentID);

11                 GetFather(father.Parent);

12             }

13         }

14 

15         /// <summary>

16         /// 弟妹找子孙

17         /// </summary>

18         /// <param name="father">父对象</param>

19         void getSons(SubItem father)

20         {

21             if (father != null)

22             {

23                 father.Sons = _subList.Where(item =>

24                     item.ParentID.Equals(father.ID)).ToList();

25                 father.Sons.ForEach(item =>

26                 {

27                     item.Parent = father;

28                     getSons(item);

29                 });

30             }

31         }

32 

33 

34         #endregion

C#拼接下拉列表框相关:

 1       /// <summary>

 2         /// 递归得到它的所有祖宗以selectlist的形式进行拼接

 3         /// </summary>

 4         /// <param name="son"></param>

 5         /// <param name="sbr"></param>

 6         void getSelectList(SubItem son, StringBuilder sbr)

 7         {

 8             StringBuilder inSbr = new StringBuilder();

 9             if (son != null)

10             {

11                 if (son.ParentID == 0)

12                     inSbr.Append("<select name='Parent' onchange = 'areaOnSelect(this)' >");

13                 else

14                     inSbr.Append("<select name='Sub'>");

15                 GetCommon_CategoryByLevel(son.Level).ToList().ForEach(i =>

16                {

17                    if (i.ID == son.ID)

18                        inSbr.Append("<option value='" + i.ID + "' selected='true'>" + i.Name + "</option>");

19                    else

20                        inSbr.Append("<option value='" + i.ID + "'>" + i.Name + "</option>");

21                });

22 

23                 inSbr.Append("</select>");

24                 sbr.Insert(0, inSbr);

25                 getSelectList(son.Parent, sbr);

26             }

27         }

C#得到同一深度的节点(同辈节点)相关:

 1      /// <summary>

 2         /// 得到指定深度的列表

 3         /// </summary>

 4         /// <param name="level"></param>

 5         /// <returns></returns>

 6         public List<SubItem> GetCommon_CategoryByLevel(int level)

 7         {

 8             var linq = from data1 in _subList

 9                        join data2 in _subList on data1.ParentID equals data2.ID into list

10                        select new SubItem

11                        {

12                            ID = data1.ID,

13                            Level = data1.Level,

14                            Name = data1.Name,

15                            Parent = list.FirstOrDefault(),

16                            ParentID = data1.ParentID,

17                        };

18             return linq.Where(i => i.Level.Equals(level)).ToList();

19         }

MVC页面action相关:

 1       public ActionResult Category(int? id)

 2         {

 3             ViewData["Parent"] = new SelectList(_subList.Where(i => i.ID == (id ?? 0)), "ID", "Name", id ?? 1);

 4             SubItem current = _subList.FirstOrDefault(i => i.ID == (id ?? 1));

 5             GetFather(current);

 6             StringBuilder sbr = new StringBuilder();

 7             getSelectList(current, sbr);

 8             ViewData["edit"] = sbr.ToString();//修改时,进行绑定

 9             return View();

10         }

MVC页面代码相关:

1 @Html.Raw(ViewData["edit"].ToString())

C#树型结构实体类相关:

 1     /// <summary>

 2     /// 树型分类结构

 3     /// </summary>

 4     public class Category

 5     {

 6         /// <summary>

 7         /// 父ID

 8         /// </summary>

 9         public int ParentID { get; set; }

10         /// <summary>

11         /// 树ID

12         /// </summary>

13         public int ID { get; set; }

14         /// <summary>

15         /// 树名称

16         /// </summary>

17         public string Name { get; set; }

18         /// <summary>

19         /// 深度

20         /// </summary>

21         public int Level { get; set; }

22         /// <summary>

23         /// 子孙节点

24         /// </summary>

25         public List<Category> Sons { get; set; }

26         /// <summary>

27         /// 父节点

28         /// </summary>

29         public Category Parent { get; set; }

30     }

好了,现在我们的N级无限下拉列表框就做好了,呵呵!

你可能感兴趣的:(下拉列表)