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

  1. 首先你要去下载jOrgChart,不懂就找度娘
  2. jOrgChart的添加的方法是必须在页面放置<ul><li>这样元素进去后,页面加载时候重新渲染。所以我们要使用异步把数据动态绑定上去然后让.
            jQuery(document).ready(function () {
    loadtree();
    });
    //menu_list为json数据
    //parent为要组合成html的容器 function showall(menu_list, parent) {
    for (var menu in menu_list) {
    //如果有子节点,则遍历该子节点
    if (menu_list[menu].children.length > 0) {
    //创建一个子节点li
    var li = $("<li></li>");
    //将li的文本设置好,并马上添加一个空白的ul子节点,并且将这个li添加到父亲节点中
    $(li).append(" <a href='javascript:void(0)' onclick='xx(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").append("<ul></ul>").appendTo(parent);
    //将空白的ul作为下一个递归遍历的父亲节点传入
    showall(menu_list[menu].children, $(li).children().eq(1));
    }
    //如果该节点没有子节点,则直接将该节点li以及文本创建好直接添加到父亲节点中
    else {
    $("<li></li>").append(" <a href='javascript:void(0)' onclick='xx(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").appendTo(parent);
    }
    }
    } function loadtree() {
    $.ajax({
    url: '../Organization/GetList', type: 'POST', //data: { id: nodeId }, cache: false, error: function () { alert('Error loading PHP document'); }, success: function (result) {
    // var json = eval("["+result+"]");//这里中间的括号为中括号 使数据类似[{"username":"张三","content":"沙发"}];的格式 var showlist = $("<ul id='org' style='display:none'></ul>");
    showall(result, showlist);
    $("#f").append(showlist);
    $("#org").jOrgChart();
    }
    }); }
  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. Spring IoC、DI入门小程序

    Alt+/智能提示xml配置文件节点及属性:在接口上使用Ctrl+T可以提示其实现类 一.IoC控制反转(将创建对象的权利交给spring)入门小程序 1.引入jar包 2.工程基本结构 3.新建Us ...

  2. 旋转屏幕时,假如自定义的xib大小变了,可能是这个属性没有修改

    虽然xib内部启用了自动布局,但是当xib放入外界,xib自身的autoresizing是存在的

  3. html5移动web开发笔记

    width指定虚拟窗口的屏幕宽度大小. height指定虚拟窗口的屏幕高度大小. initial-scale 指定初始缩放比例. maximum-scale指定允许用户缩放的最大比例. minimum ...

  4. nginx负载均衡器处理session共享的几种方法(转)

    1) 不使用session,换作cookie 能把session改成cookie,就能避开session的一些弊端,在从前看的一本J2EE的书上,也指明在集群系统中不能用session,否则惹出祸端来 ...

  5. oracle的主键

    1.关于主键:在建表时指定primary key字句即可:create table test( id number(6) primary key, name varchar2(30));如果是对于已经 ...

  6. object-c 的ARC 问答/介绍

    原文:http://blog.csdn.net/kmyhy/article/details/8895606 概念" Clangstatic analyzer "是一个非常有用的查找 ...

  7. HttpRuntime应用程序的运行时

    System.Web.HttpRuntime类是整个Asp.net服务器处理的入口. 这个类提供了一系列的静态属性,反映web应用程序域的设置信息,而且每个web应用程序域中存在一个System.We ...

  8. Serenity框架官方文档翻译3.2(多租户)

    3.2多租户 在本教程中我们将把Norhwind变成一个多租户应用程序. 这是一个维基百科的多租户软件定义: 软件多租户是指一个软件架构的一个实例软件运行在一个服务器和多个租户.租户是一组共享一个公共 ...

  9. word表格断行的问题

    word一个表格如果某一行的 内容 太多,就会自动跑到下一页去了 解决方法是: 在表格上点右键-> 属性 -> "行" -> 去掉"设置行高" ...

  10. vsftpd的安装

    好像linux下的服务的配置和文件分布都差不多, 如httpd, vsftpd, named. 都是: 在/etc/???下面进行配置???.conf, 然后在/var/???放置实际要处理的文件/目 ...