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
目录
相关文章
|
23天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
119 58
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
219 2
|
1月前
|
缓存 C# Windows
C#程序如何编译成Native代码
【10月更文挑战第15天】在C#中,可以通过.NET Native和第三方工具(如Ngen.exe)将程序编译成Native代码,以提升性能和启动速度。.NET Native适用于UWP应用,而Ngen.exe则通过预编译托管程序集为本地机器代码来加速启动。不过,这些方法也可能增加编译时间和部署复杂度。
|
1月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
34 0
|
11天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
24 3
原生js炫酷随机抽奖中奖效果代码
|
7天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
16 3
|
10天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
19 4
|
9天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
27 0
html5+three.js公路开车小游戏源码
|
16天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
163 4