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
目录
相关文章
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
79 33
|
1月前
|
人工智能 JavaScript 前端开发
一段 JavaScript 代码,集成网站AI语音助手
根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
2月前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
147 15
在 golang 中执行 javascript 代码的方案详解
|
2月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
100 2
|
3月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
222 1
|
3月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
73 3

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    49
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57