提前祝各位女性同胞节日快乐！
最近科技领域因为美国田纳西州和伊利诺伊州的一项法案而热闹非凡。这项法案叫“维修权...
今天，我们反过来，给大家看看开发者是怎么看待“我们”的。
相比于其它平台的智能手机，旧 iPhone 还是有一定优势的。
之所以打造 Liam，苹果是希望能够解决消费电子行业中日益严重的一个问题，那就是电子...
苹果开始扩大公司 MBA 员工比例，以便将苹果的创新精神延续下去。
已经有几家厂商闻风而动了，先砸钱建 OLED 生产线再说。
虽然经历了春节放假，但现在看起来情况并不是这么糟糕。
在游戏中玩家将会化身成一名江洋大盗，与警察在川流不息的公路之上展开一场追逐大战。
本周 Steam 平台好评如潮的经典像素经营游戏《王国：新大陆》（Kingdom: New Lands）...
游戏中玩家是以一个摩托车手的身份来击杀不断追来的僵尸，而本作相当于换了一种方式，...
走一走寻常路，以一名普通船长的视角看一看这片大海。
今天推荐一款治愈度十足的小应用，名叫《NextDay》，它属于没有太多实用性，但是又可...
在游戏开发商Untame所制作的新作《蘑菇11（Mushroom 11）》当中，就为玩家们描绘了一...
本周，一款纳斯卡赛车官方授权的竞速游戏作品《热力纳斯卡（NASCAR Heat Mobile）》在...
如果你是比较爱惜数码产品的童鞋，不妨来看看。
它带来的不仅仅是美妙动听的声音，更是一个近乎完美的音频供放整体解决方案。
Markhor也希望打造优质的苹果设备配件，实现梦想~
这个价格，在一些电商平台都差不多能买两部iPhone 7了。
说实在的，从外形上看比我们上一次见到的那个山寨品要好。
其实这是可以想象得到的，要不然苹果也不会推出那个套了。
这种织物让每个按键有了弹簧般的张力，因此无需再采用体积较大的传统机械组件。
iPhone 7瞬间运行Android 7.1系统，就是这么简单.....
OrgChart - 轻松生成组织结构图 ＊ 第一次限免 ＊
注册时间 最后登录
在线时间54 小时 UID
主题帖子人气
青苹果, 积分 116, 距离下一级还需 84 积分
生成组织结构图对很多管理人员来说是一个费时的工作。OrgChart是一款帮助您方便快捷地生成和管理组织图的工具， 无需使用绘图工具，简单的输入和设置图形，你就可以得到想要的组织结构图。
OrgChart亦可帮助你将联系人组织成树型结构，方便你将你的客户，同事等按一定层次管理起来。
同时，OrgChart 亦可导出为PDF和图片文件，这对你的沟通工作提供很大的帮助。
More details please visit
注册时间 最后登录
在线时间3535 小时 UID
主题帖子人气
很漂亮，不知道能不能输入中文
注册时间 最后登录
在线时间24 小时 UID
主题帖子人气
可以尝试尝试
注册时间 最后登录
在线时间54 小时 UID
主题帖子人气
很漂亮，不知道能不能输入中文
输入中文没有问题&&(Unicode 字符都支持)
注册时间 最后登录
在线时间0 小时 UID
主题帖子人气
貌似很不错的样子，去试试……
注册时间 最后登录
在线时间17 小时 UID
主题帖子人气
这个可以有~~~~~~~~~~~~不过还是等等鑫
注册时间 最后登录
在线时间109 小时 UID
主题帖子人气
收藏一下，我也下一个
威锋旗下产品
Hi~我是威威！
沪公网安备 29号　|　沪ICP备号-1
新三板上市公司威锋科技（836555）
增值电信业务经营许可证：
Powered by Discuz!当前位置： >
jQuery组织结构图表插件OrgChart
时间： 22:03 来源： 作者： 浏览：
由源码搜藏网整理,转载请注明出处
源码搜藏承诺：本站所有资源无病毒，无弹窗，无干扰链接！
你可能感兴趣的内容问说网 / 蜀ICP备号
感谢您对问说网的支持，提出您在使用过程中遇到的问题或宝贵建议，您的反馈对我们产品的完善有很大帮助。
您的反馈我们已收到！
感谢您提供的宝贵意见，我们会在1-2个工作日，通过您留下的联系方式将处理结果反馈给您！1790人阅读
With the help of DOM, jQuery and CSS3 transition, we got a simple and direct organization chart plugin.
First of all, thanks a lot for&'s great work --&.
The thought that using nested tables to build out the tree-like orgonization chart is amazing. This idea is more simple and direct than its counterparts based on svg.Unfortunately, it's long time not to see the update of jOrgChart. on the other hand, I don't think &drag and drop& functinality is necessary for organization chart plugin, because in real life, there is no such unsecure demand that allowing users
to change company's organization chart randomly with manual mode. We all konw the importance and seriousness of a organization chart for a company. Due to all these stuff, I choose to create a new repo.Font Awesome provides us with administration icon, second level menu icon and loading spinner.
// sample of core source code
var datascource = {
'name': 'Lao Lao',
'title': 'general manager',
'relationship': ‘001’,
'children': [
{ 'name': 'Bo Miao', 'title': 'department manager', 'relationship': ‘110’ },
{ 'name': 'Su Miao', 'title': 'department manager', 'relationship': ‘111’,
'children': [
{ 'name': 'Tie Hua', 'title': 'senior engineer', 'relationship': ‘110’ },
{ 'name': 'Hei Hei', 'title': 'senior engineer', 'relationship': ‘110’ }
{ 'name': 'Yu Jie', 'title': 'department manager', 'relationship': ‘110’ }
$('#chart-container').orgchart({
'data' : datascource,
'depth': 2,
'nodeTitle': 'name',
'nodeContent': 'title'
// sample of core source code
$('#chart-container').orgchart({
'data' : '/orgchart/initdata',
'depth': 2,
'nodeTitle': 'name',
'nodeContent': 'title'
// sample of core source code
var datascource = {
'id': '1',
'name': 'Su Miao',
'title': 'department manager',
'relationship': ‘111’,
'children': [
{ 'id': '2','name': 'Tie Hua', 'title': 'senior engineer', 'relationship': ‘110’ },
{ 'id': '3','name': 'Hei Hei', 'title': 'senior engineer', 'relationship': ‘111’ }
var ajaxURLs = {
'children': '/orgchart/children/',
'parent': '/orgchart/parent/',
'siblings': '/orgchart/siblings/',
'families': '/orgchart/families/'
$('#chart-container').orgchart({
'data' : datascource,
'ajaxURL': ajaxURLs,
'nodeTitle': 'name',
'nodeContent': 'title',
'nodeId': 'id'
// sample of core source code
$('#chart-container').orgchart({
'data' : datascource,
'depth': 2,
'nodeTitle': 'name',
'nodeContent': 'title',
'nodeID': 'id',
'createNode': function($node, data) {
var secondMenuIcon = $('&i&', {
'class': 'fa fa-info-circle second-menu-icon',
click: function() {
$(this).siblings('.second-menu').toggle();
var secondMenu = '&div class=&second-menu&&&img class=&avatar& src=&../img/avatar/' + data.id + '.jpg&&&/div&';
$node.append(secondMenuIcon).append(secondMenu);
Here, we need the help from&.
// sample of core source code
$('#chart-container').orgchart({
'data' : datascource,
'depth': 2,
'nodeTitle': 'name',
'nodeContent': 'title',
'exportButton': true,
'exportFilename': 'MyOrgChart'
Here, we fall back on&. It's the most aewsome open-source js library for Web GIS you sholdn't miss.
// sample of core source code
var map = new ol.Map({
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'watercolor'
preload: 4
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'terrain-labels'
preload: 1
target: 'pageBody',
view: new ol.View({
center: ol.proj.transform([-87..8781140], 'EPSG:4326', 'EPSG:3857'),
$('body').prepend(map.getViewport());
var datascource = {
'name': 'Lao Lao',
'title': 'President Office',
'relationship': '001',
'position': [-87..8781140],
'children': [
{ 'name': 'Bo Miao', 'title': 'Administration
Dept.', 'relationship': '110', 'position': [-83..3314270]},
{ 'name': 'Yu Jie', 'title': 'Product Dept.', 'relationship': '110', 'position': [-71..3600820]},
{ 'name': 'Yu Tie', 'title': 'Marketing Dept.', 'relationship': '110', 'position': [-80..7616800] }
$('#chart-container').orgchart({
'data' : datascource,
'nodeTitle': 'name',
'nodeContent': 'title',
'createNode': function($node, data) {
$node.on('click', function() {
var view = map.getView();
var duration = 2000;
var start = +new Date();
var pan = ol.animation.pan({
duration: duration,
view.getCenter(),
start: start
var bounce = ol.animation.bounce({
duration: duration,
resolution: 4 * view.getResolution(),
start: start
map.beforeRender(pan, bounce);
view.setCenter(ol.proj.transform(data.position, 'EPSG:4326', 'EPSG:3857'));
$('#chartCOntainerId').orgchart(options);
'nodeTitlePro': 'Lao Lao',
'nodeContentPro': 'general manager',
'relationship': relationshipValue, // The property implies that whether this node has parent node, siblings nodes or children nodes. &relationship& is just default name you can override.
// relationshipValue is a string composed of three &0/1& identifier.
// First character stands for wether current
// Scond character stands for wether current nod
// Third character stands for wether current node has children node.
'children': [ // The property stands for nested nodes. &children& is just default name you can override.
{ 'nodeTitlePro': 'Bo Miao', 'nodeContentPro': 'department manager', 'relationship': ‘110’ },
{ 'nodeTitlePro': 'Su Miao', 'nodeContentPro': 'department manager', 'relationship': ‘111’,
'children': [
{ 'nodeTitlePro': 'Tie Hua', 'nodeContentPro': 'senior engineer', 'relationship': ‘110’ },
{ 'nodeTitlePro': 'Hei Hei', 'nodeContentPro': 'senior engineer', 'relationship': ‘110’ }
{ 'nodeTitlePro': 'Yu Jie', 'nodeContentPro': 'department manager', 'relationship': ‘110’ }
'otherPro': anyValue
Description
json or string
datasource usded to build out structure of orgchart. It could be a json object or a string containing the URL to which the ajax request is sent.
It inclueds four properites -- parent, children, siblings, families(ask for parent node and siblings nodes). As their names imply, different propety indicates the URL to which ajax request for different nodes is sent.
positive integer
It indicates the level that at the very beginning orgchart is expanded to.
nodeRelationship
&relationship&
It sets one property of datasource as a identifier which implies whether current node has parent node, siblings nodes or children nodes.
nodeChildren
&children&
It sets one property of datasource as children nodes collection.
It sets one property of datasource as text content of title section of orgchart node. In fact, users can create a simple orghcart with only nodeTitle option.
nodeContent
It sets one property of datasource as text content of content section of orgchart node.
It sets one property of datasource as unique identifier of every orgchart node.
createNode
It's a callback function used to customize every orgchart node. It recieves two parament: &$node& stands for jquery objec &data& stands for datasource of single node.
exportButton
It enable the export button for orgchart.
exportFilename
&Orgchart&
It's filename when you export current orgchart as a picture.
chartClass
when you wanna instantiate multiple orgcharts on one page, you should add diffent classname to them in order to distinguish them.
项目地址：&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：499814次
积分：11417
积分：11417
排名：第1057名
原创：606篇
转载：229篇
评论：103条
文章：10篇
阅读：20014
(35)(73)(48)(47)(22)(12)(22)(53)(48)(56)(57)(219)(102)(7)(1)(13)(22)专注于电脑相关问题的在线及时解答，您可以在此提问以获得最佳答案！
网友的提问