组织结构是做项目里面经常用到的,但是要做成可视化的效果比较少,多数使用树结构来表示,但是对于客户来说不是太直观。可以用jOrgChart来实现。如下图的效果,这样就比较直观。

  1. 首先你要去下载jOrgChart,不懂就找度娘
  2. jOrgChart的添加的方法是必须在页面放置<ul><li>这样元素进去后,页面加载时候重新渲染。所以我们要使用异步把数据动态绑定上去然后让.
    1. jQuery(document).ready(function () {
    2. loadtree();
    3. });
    4. //menu_list为json数据
    5. //parent为要组合成html的容器
    6.  
    7. function showall(menu_list, parent) {
    8. for (var menu in menu_list) {
    9. //如果有子节点,则遍历该子节点
    10. if (menu_list[menu].children.length > 0) {
    11. //创建一个子节点li
    12. var li = $("<li></li>");
    13. //将li的文本设置好,并马上添加一个空白的ul子节点,并且将这个li添加到父亲节点中
    14. $(li).append(" <a href='javascript:void(0)' onclick='xx(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").append("<ul></ul>").appendTo(parent);
    15. //将空白的ul作为下一个递归遍历的父亲节点传入
    16. showall(menu_list[menu].children, $(li).children().eq(1));
    17. }
    18. //如果该节点没有子节点,则直接将该节点li以及文本创建好直接添加到父亲节点中
    19. else {
    20. $("<li></li>").append(" <a href='javascript:void(0)' onclick='xx(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").appendTo(parent);
    21. }
    22. }
    23. }
    24.  
    25. function loadtree() {
    26. $.ajax({
    27. url: '../Organization/GetList',
    28.  
    29. type: 'POST',
    30.  
    31. //data: { id: nodeId },
    32.  
    33. cache: false,
    34.  
    35. error: function () { alert('Error loading PHP document'); },
    36.  
    37. success: function (result) {
    38. // var json = eval("["+result+"]");//这里中间的括号为中括号 使数据类似[{"username":"张三","content":"沙发"}];的格式
    39.  
    40. var showlist = $("<ul id='org' style='display:none'></ul>");
    41. showall(result, showlist);
    42. $("#f").append(showlist);
    43. $("#org").jOrgChart();
    44. }
    45. });
    46.  
    47. }
  3. 这是我数据结构,对应上面方法的递归动态写进一个div中,简单方便哈哈!

使用jquery制作可视化的组织结构的更多相关文章

  1. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  2. 如何使用jQuery 制作全屏幕背景的嵌入视频

    实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...

  3. jquery制作弹出层带遮罩效果,点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  4. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

  5. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  6. jQuery 制作逼真的日历翻转效果的倒计时

    在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...

  7. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

  8. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  9. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. java中抽象类与接口中方法访问修饰符问题 (

    1.抽象类中的抽象方法(其前有abstract修饰)不能用private.static.synchronized.native访问修饰符修饰.原 因如下:抽象方法没有方法体,是用来被继承的,所以不能用 ...

  2. MVC 返回图片

    //调用 http://localhost:60663/home/GetCoder39Img?mycode=123443545 public void GetCoder39Img(string myc ...

  3. Windows部署WordPress

    感谢原文作者,还是给个快速通道: http://www.cnblogs.com/huangcong/archive/2010/03/31/1701052.html 另:安装之后,运行速度会很慢,以下是 ...

  4. ftp (文件传输协议)

    ftp (文件传输协议) 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议” ...

  5. mysql 查询技巧

    查出来的结果每一行显示一条,中间以*号分隔. select * from tableName limit 10 \G mysql 随机取数据 SELECT * FROM table_name ORDE ...

  6. centos6.4yum搭建lamp环境

    1.配置防火墙,开启80端口.3306端口vi /etc/sysconfig/iptables-A INPUT -m state --state NEW -m tcp -p tcp --dport 8 ...

  7. require.async换这个方法的transport问题

    这个方法是用于在模块中异步加载其他模块的,类似于在页面上的seajs.use. 比如需要在特定条件下才去加载a模块,不必每次都加载,类似于下面这样的代码 if({{some_condition}}){ ...

  8. Servlet的生命周期及filter,servletRequest和servletResponse

    序,Web应用中,Servlet和Filter是很重要的两个概念,一定要理解透彻. 一.Servlet类 继承自HttpServlet,HttpServlet是一个抽象类,主要包含的方法有init,s ...

  9. 变色龙安装程序 Chameleon Install 2.2 svn 2281发布

    变色龙安装程序 Chameleon Install 2.2 svn 2281发布 1.更好的支持10.9 Mavericks2.更新ATi.nVidia显卡支持列表3.添加新的 CPU Model I ...

  10. 黑客逃避追踪,为什么要用虚拟机 + TOR + VPN 呢?

    为啥要使用虚拟机 使用虚拟机主要有俩原因. 第一个是为了好收拾,清理痕迹什么的.特别是MAC地址,系统指纹信息等等,这些一旦被收集到都可以作为呈堂证供.用虚拟机,干了坏事把快照恢复一下就好,省的清理c ...