使用jquery制作可视化的组织结构
组织结构是做项目里面经常用到的,但是要做成可视化的效果比较少,多数使用树结构来表示,但是对于客户来说不是太直观。可以用jOrgChart来实现。如下图的效果,这样就比较直观。
- 首先你要去下载jOrgChart,不懂就找度娘
- 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();
}
}); } - 这是我数据结构,对应上面方法的递归动态写进一个div中,简单方便哈哈!
使用jquery制作可视化的组织结构的更多相关文章
- jquery制作论坛或社交网站的每天打卡签到特效
效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...
- 如何使用jQuery 制作全屏幕背景的嵌入视频
实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...
- jquery制作弹出层带遮罩效果,点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- 使用 CSS3 & jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
- 使用 CSS & jQuery 制作一款漂亮的多彩时钟
大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...
- jQuery 制作逼真的日历翻转效果的倒计时
在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...
- jQuery制作Web全屏效果
需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...
- jQuery制作焦点图(轮播图)
焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- jQuery制作右侧边垂直二级导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- CodeForces 705B (训练水题)
题目链接:http://codeforces.com/problemset/problem/705/B 题意略解: 两个人玩游戏,解数字,一个数字可以被分成两个不同或相同的数字 (3可以解成 1 2) ...
- Docker系列之(三):Docker微容器Alpine Linux
1. 前言 使用Docker创建容器时,基础镜像通常选择Ubuntu或Centos,不管哪个镜像的大小都在100MB以上. Alpine Linux是一个面向安全的轻型的Linux发行版. Alpin ...
- android源代码提示文本框还能输入多少个字符
public class TestAndroidActivity extends Activity { /** Called when the activity is first created. * ...
- Android-调用优酷SDK上传视频
最近在研究用优酷的SDK来进行视频上传的功能,由于优酷的SDK只是提供了一个上传的sample code,没有涉及到授权的过程,对于新手来说,可能非常棘手,现在分享一下我的思路: 程序实现前我们先 ...
- [bug]The file ‘/xxx/xxx.aspx’ has not been pre-compiled, and cannot be requested
今天莫名奇妙的出现了这个问题,查找很多资料最后解决了. 发现编译的时候,少了一个dll,导致预编译失败. 参考资料 https://blogs.msdn.microsoft.com/asiatech/ ...
- stripslashes — 反引用一个引用字符串
stripslashes (PHP 4, PHP 5) stripslashes — 反引用一个引用字符串 Report a bug 说明 string stripslashes ( string ...
- 点击label时click事件被触发两次的坑
今天帮群里的朋友看一段代码的时候偶然间遇到一个label的坑,点击label的时候,监听的click事件被执行两次: 具体代码如下: <div id="test"> & ...
- [整理]Web应用安全学习
最近在复习TCP/IP相关知识,同时也想对网络安全相关的知识进行系统的补漏. 阅读了一些常见的关于XSS.CSRF等的一些网上文章: http://www.cnblogs.com/luminji/ca ...
- glutBitmapCharacter及glBitmap在ATI显卡下无法正常显示的原因初探
最近家里台式机的老显卡烧了,所以更换了ATI的HD6450显卡,却发现glutBitmapCharacter及glBitmap都无法正常显示字符,nviDIA和intel的显卡则一切正常. 发邮件咨询 ...
- 第14章 使用DHCP动态管理主机地址
章节简述: DHCP协议服务能够自动化的管理局域网内的主机IP地址,有效的提升IP地址使用率,提高配置效率,减少管理与维护成本. 学习dhcpd服务程序的使用方法并逐条讲解配置参数,完整演示自动化分配 ...