C#+HTML+JS生成的树完整代码

简介:

VIEW层代码:

 1:  <script src="/Scripts/JQTree/jquery.tree.js" type="text/javascript"></script>

 2:  

 3:   <script src="/Scripts/JQTree/plugins/jquery.tree.checkbox.js" type="text/javascript"></script>

 4:  

 5:   <script>

 6:  $(function() {

 7:           var _CategoryTree = {

 8:               OpenPCategoryTree: function() {

 9:                   $.tree.reference("#PCategoryTree").open_all();

10:               },

11:               ClosePCategoryTree: function() {

12:                   $.tree.reference("#PCategoryTree").close_all();

13:               },

14:               CreatePCategoryTree: function() {

15:                   var values = {};

16:                   $("#PCategoryTree").tree({

17:                       types: {

18:                           "default": {

19:                               draggable: false

20:  }

21:                       },

22:                       ui: {

23:                           animation: 150,

24:                           theme_name: "checkbox"

25:  },

26:                       plugins: {

27:                           checkbox: {}

28:                       },

29:                       callback: {

30:                           onsearch: function(n, t) {

31:                               $.each(n, function(i, o) {

32:                                   $(o).addClass('search');

33:                               })

34:                           }

35:                       }

36:                   });

37:               }

38:           }

39:           _CategoryTree.CreatePCategoryTree();

40:           _CategoryTree.OpenPCategoryTree();

41:   

42:           $("#PCategoryTree").find("a").each(function() {

43:               $(this).click(function() {

44:                   $("#ParentID").val($(this).attr("value"));

45:                   $("#PCategoryTree").find("span").removeClass("hover");

46:                   $(this).closest("span").addClass("hover");

47:               });

48:           });

49:   

50:       });

51:   </script>

controller层代码:

 1:  public ActionResult TreeDepartment()

 2:          {

 3:   

 4:              Entity.OA.Department department = Service.DepartmentsService.GetTree();

 5:              StringBuilder html = new StringBuilder();

 6:              html.Append("<ul id='TreeList'>");

 7:              this.GetSubs(html, department);

 8:              html.Append("</ul>");

 9:              ViewData["ProductCategoryData"] = html.ToString();

10:              return View();

11:          }

12:   

13:          /// <summary>

14:          /// 通过递归拼树形结构

15:  /// </summary>

16:          /// <param name="html">树形Html字符串</param>

17:          /// <param name="category">树形商品分类对象</param>

18:  private void GetSubs(StringBuilder html, Entity.OA.Department department)

19:          {

20:              html.Append("<li  id='" + department.DeptID + "' name='" + department.DeptName + "'>");

21:              html.Append("<span><input type='hidden' value='" + department.DeptID + "' />");

22:              //html.Append("<ins>&nbsp;</ins>"); //产生复选框

23:  html.Append("<a href='javascript:void(0)' id='" + department.DeptName + "'value='" + department.DeptID + "'>");

24:              html.Append(department.DeptName);

25:              html.Append("</a></span>");

26:              if (department.SubList != null && department.SubList.Count > 0)

27:              {

28:                  html.Append("<ul>");

29:                  foreach (var item in department.SubList)

30:                  {

31:                      this.GetSubs(html, item);

32:                  }

33:                  html.Append("</ul>");

34:              }

35:              html.Append("</li>");

36:          }

service层代码 :

 1:  static Data.OA.IDepartmentsRepository iDepartmentsRepository = new Data.OA.DepartmentsRepository();

 2:   

 3:  static List<Entity.OA.Department> entitiesList = null;

 4:   

 5:  internal static void Reload()

 6:  {

 7:      entitiesList = (from pc in iDepartmentsRepository.GetDepartments()

 8:                      orderby pc.DeptName ascending

 9:                      select pc).ToList();

10:  }

11:   

12:  #region 树型部门列表

13:  /// <summary>

14:  /// 虚拟产品类别 

15:  /// </summary>

16:  /// <returns>虚拟产品类别列表</returns>

17:  public static Entity.OA.Department GetTree()

18:  {

19:      Reload();

20:      Entity.OA.Department root = new Entity.OA.Department();

21:      try

22:  {

23:          root = entitiesList.Single(

24:             item => item.DeptID.Equals(Entity.OA.Department.ROOTID));//获取跟节点

25:  GetSubs(root);

26:   

27:      }

28:      catch (InvalidOperationException ex)

29:      {

30:          ex.ToString();

31:      }

32:      return root;

33:  }

34:   

35:   

36:  /// <summary>

37:  /// 根据父对象,找到子孙树

38:  /// </summary>

39:  /// <param name="father">父对象</param>

40:  static public void GetSubs(Entity.OA.Department father)

41:  {

42:      father.SubList = entitiesList.Where(item =>

43:          item.ParentID.Equals(father.DeptID)).ToList();

44:      father.SubList.ForEach(item =>

45:      {

46:          item.Father = father;

47:          GetSubs(item);      

48:      });

49:   

50:  }

51:  #endregion
目录
相关文章
|
12天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
42 2
|
29天前
html实现的破碎拼接文字动画特效代码
html实现的破碎拼接文字动画特效代码是一段会自动产生文字依次破碎再拼接的效果,非常的炫。欢迎对此段代码感兴趣的朋友前来下载使用。
25 1
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
124 1
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
46 3
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
42 4
|
1月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
57 0
html5+three.js公路开车小游戏源码
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
110 6
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM
JavaScript HTML DOM
39 2
JavaScript HTML DOM
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
22 5
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
38 4