jquery.orgchart.js


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>geovindu,Geovin Du,涂聚文</title><link rel="stylesheet" href="css/jquery.orgchart.css"> <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">var lines = ('1, cars, geovindu0, 0\n' +'2, boats, geovindu0, 1\n' +'3, oldtimer, geovindu11, 1\n' +'4, trucks, geovindu11, 3\n' +'5, heavytrucks, geovindu444, 4').split('\n');   //.split('\n')//根只有一个记录 涂聚文注释var treeDu = [];
var lookup = {}; // temporary variablefor (var i in lines) {var items = lines[i].split(', ');var obj = { id: items[0], parent_id: items[3], name: items[1], title:items[2], children: [] };lookup[obj.id] = obj;if (lookup[obj.parent_id]) {lookup[obj.parent_id].children.push(obj);} else {treeDu.push(obj);}
}console.log(treeDu); // will display your treevar dd=JSON.stringify(treeDu);console.log(dd);$('#du').text(dd);  var x = { name: "Sivaraman", age: 31, city: "Chennai" };
var y = JSON.stringify(x);
document.getElementById("demo").value=y;</script>
</head><body><div id="demo"></div><div id="du"></div>
<div id="chart-container"></div><script type="text/javascript" src="js/jquery.orgchart.js"></script>   <script type="text/javascript">(function($) {$(function() {var lines = ('1, cars, geovindu, 0\n' +'2, boats, geovindu, 1\n' +'3, oldtimer, geovindu, 1\n' +'4, trucks, geovindu, 3\n' +'5, heavytrucks, geovindu, 4').split('\n');   //.split('\n')var tree = [];
var lookup = {}; // temporary variablefor (var i in lines) {var items = lines[i].split(', ');var obj = { id: items[0], parent_id: items[3], name: items[1], title:items[2], children: [] };lookup[obj.id] = obj;if (lookup[obj.parent_id]) {lookup[obj.parent_id].children.push(obj);} else {tree.push(obj);}
}//console.log(tree); // will display your tree
var dds=JSON.stringify(tree);
var str1 = dds.substr(1); //删除首字符
var str2 = str1.substring(0,str1.length-1); //删除最后末字符
console.log(str2);
var contact = JSON.parse(str2);      /*data【json or String】：数据
pan 【boolean 默:flase】：通过鼠标拖放来控制OrgChart
zoom【boolean 默:false】：通过鼠标滚轮放大或缩放OrgChart
zoominLimit【number 默:7】：设置放大限制
zoomoutLimit【number 默:0.5】：设置缩放限制
direction【String 默:t2b】：T2B："从上到下"，B2T："从底到上"，L2R："左到右"，R2L："向左到右"
verticalLevel【integer(>=2)】：
toggleSiblingsResp【boolean 默:false】：通过单击左/右箭头分别显示/隐藏左/右兄弟节点
ajaxURL【json】：不同的优先级提供了发送不同节点的Ajax请求的URL
visibleLevel【number】：默认展开几级
nodeId【String 默:id】：将数据源的一个属性设置为每个OrgChart节点的唯一标识符。
nodeTitle【String 默:name】：将数据源的一个属性设置为OrgChart节点标题段的文本内容
nodeContent【String】：将数据源的一个属性设置为OrgChart节点的内容部分的文本内容。
nodeTemplate【function】：它是一个模板生成函数，用于定制任何复杂的节点内部结构
createNode【function】：它是用于自定义每个OrgCad节点的回调函数
parentNodeSymbol【String 默:fa-users】：使用图标暗示该节点有子节点
exportButton【boolean 默:false】：是否启用OrgChar的导出按钮
exportFilename【String 默:OrgChart】：当输出当前的OrgChart作为图片时，它是文件名。
exportFileextension【String 默:png】：可用的值是PNG和PDF。
chartClass【String】：当你想在一个页面上实例化多个orgcharts 时，你应该添加不同的类名来区分它们。
draggable【boolean 默:false】：用户可以拖动和删除OrgChart节点
dropCriteria【function】：用户可以构造自己的标准来限制拖动节点和删除区域之间的关系
initCompleted【function】：经常知道您的表何时已经完全初始化、数据加载和呈现，尤其是当使用Ajax数据源时*/var oc = $('#chart-container').orgchart({'data' : contact,'depth': 12,'nodeId':'id',//'nodeTitle':'photo','nodeContent': 'title',drag: true,//是否可以拖动//'direction': 'b2t',//'direction': 'r2l',//'toggleSiblingsResp': true,'exportButton': true,'exportFilename': 'DuOrgChart','pan': true,'zoom': true});});
})(jQuery);</script></body>
</html>

jquery.orgchart.js相关推荐

jquery.orgchart.js 简单demo,自定义内容，自定义事件
orgchart简单demo GIT地址: https://github.com/Vlovely/orgchartDemo.git 预览图代码示例 <!DOCTYPE html> < ...
vue拓扑图、组织结构图插件使用(orgChart.js)
今天使用orgChart没有找到合适的,所以今天来写篇使用文档. OrgChart.js是什么? 基于ES6的组织结构图插件. 特征支持本地数据和远程数据(JSON). 基于CSS3过渡的平滑扩展/ ...
使用jquery.orgchart实现栏目树的配置与展示
1.首先引入需要的js和css文件,必需的为:jquery-1.8.3.min.js,jquery.orgchart.js 2.在html树中,定义id值为chart-container的节点 < ...
组织结构图OrgChart.js的简单使用,实现树状图结构
OrgChart.js是什么? 基于ES6的组织结构图插件. 特征支持本地数据和远程数据(JSON). 基于CSS3过渡的平滑扩展/折叠效果. 将图表对齐为4个方向. 允许用户通过拖放节点更改组织结 ...
使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据
<div class="bus-nav-bar ft12"><div class="navt bor-r-c pos-rel {if $int == 0 ...
jquery即时搜索查询插件jquery.search.js
jquery.search.js搜索插件是一款基于jquery的插件,任何一个input输入款均可即时转为查询框,可分为前台数据直接显示和后台传输数据显示两种方案! 文档说明:http://www. ...
jQuery 插件取url参数[jquery.url.js]的使用以及文件下载
方法一. 如题,直接上调用代码: jQuery.url.param("c") "c"就是当前url中的参数,记得要引用jquery.js和jquery.url. ...
jquery.cycle.js
jquery.cycle.js简单用法实例样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width ...
jQuery.form.js使用
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 下载地址百度云:http://pan.baidu.com/s/1eQoYE46 360云:http://yu ...

jquery.orgchart.js

jquery.orgchart.js相关推荐

最新文章

热门文章