内蒙古十一选五基本走势图快:jQuery組織結構插件OrgChart

内蒙古十一选五的走势图百度乐彩网 www.cyiqh.com 所屬分類:UI-布局

 16216  144  查看評論 (1)
分享到微信朋友圈
X
jQuery組織結構插件OrgChart ie兼容8

OrgChart

  • 支持本地數據和遠程數據(JSON)。

  • 基于CSS3過渡的平滑擴展/折疊效果。

  • 將圖表對齊為4個方向。

  • 允許用戶通過拖放節點更改組織結構。

  • 允許用戶動態編輯組織圖并將最終層次結構保存為JSON對象。

  • 支持將圖表導出為圖片或pdf文檔。

  • 支持平移和縮放

  • 用戶可以采用多種解決方案來構建龐大的組織結構圖(請參考多層或混合布局部分)

  • 支持觸摸的移動設備插件

使用方法

使用OrgChart組織結構圖表插件需要在頁面中引入jquery.orgchart.css,jquery和html2canvas.js、jquery.orgchart.js文件。

<link rel="stylesheet" href="css/jquery.orgchart.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>               
<script type="text/javascript" src="js/jquery.orgchart.js"></script>

HTML結構

該組織結構圖表插件的HTML結構使用一個<div>作為容器。

<div id="chart-container"></div>

 使用本地數據

下面的代碼使用本地數據作為組織結構圖表的數據源。

// sample of core source code
var datascource = {
  'name': 'Lao Lao',
  'title': 'general manager',
  'relationship': { 'children_num': 3 },
  'children': [
    { 'name': 'Bo Miao', 'title': 'department manager', 
      'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 2 }},
    { 'name': 'Su Miao', 'title': 'department manager', 
      'relationship': { 'children_num': 2, 'parent_num': 1,'sibling_num': 2 },
      'children': [
        { 'name': 'Tie Hua', 'title': 'senior engineer', 
          'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }},
        { 'name': 'Hei Hei', 'title': 'senior engineer', 
          'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }}
      ]
    },
    { 'name': 'Yu Jie', 'title': 'department manager', 
      'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 2 }}
  ]
};
 
$('#chart-container').orgchart({
  'data' : datascource,
  'depth': 2,
  'nodeTitle': 'name',
  'nodeContent': 'title'
});

使用Ajax遠程數據

下面的代碼通過Ajax來調用遠程的數據作為組織結構圖表的數據源。

$('#chart-container').orgchart({
  'data' : '/orgchart/initdata',
  'depth': 2,
  'nodeTitle': 'name',
  'nodeContent': 'title'
});

延遲加載數據

下面的代碼在用戶點擊相應的結點時才動態的通過Ajax來加載數據。

var datascource = {
  'id': '1',
  'name': 'Su Miao',
  'title': 'department manager',
  'relationship': { 'children_num': 2, 'parent_num': 1,'sibling_num': 2 },
  'children': [
    { 'id': '2','name': 'Tie Hua', 'title': 'senior engineer', 
      'relationship': { 'children_num': 0, 'parent_num': 1,'sibling_num': 1 }},
    { 'id': '3','name': 'Hei Hei', 'title': 'senior engineer', 
      'relationship': { 'children_num': 2, 'parent_num': 1,'sibling_num': 1 }}
  ]
};
 
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'
});

自定義數據節點

下面的代碼為組織結構圖表中的每一個節點自定義一個頭像。

$('#chart-container').orgchart({
  'data' : datascource,
  'depth': 2,
  'nodeTitle': 'name',
  'nodeContent': 'title',
  'nodeID': 'id',
  'createNode': function($node, data) {
    var nodePrompt = $('<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(nodePrompt).append(secondMenu);
  }
});

方法

在您試用demo - edit orgchart之后,我確信您可以掌握以下方法的要點。

var oc = $ container.orgchart(options)

在指定的容器中嵌入組織結構圖。接受選項對象,您可以通過“選項”部分查找所需的選項。變量oc是類OrgChart的實例。

var oc = $container.orgchart(options)

當用戶想要根據新選項重新初始化或刷新orgchart或重新加載新數據時,這是一種有用的方法。

init(newOptions)

為當前組織圖添加父節點(actullay它始終是根節點)。

NameTypeRequiredDefaultDescription
datajson objectyes
datasource for building root node

addSiblings($node, data)

為指定節點添加同級節點。

NameTypeRequiredDefaultDescription
$nodejquery objectyes
we'll add sibling nodes based on this node
dataarrayyes
datasource for building sibling nodes

addChildren($node, data)

為設計的節點添加子節點。

NameTypeRequiredDefaultDescription
$nodejquery objectyes
we'll add child nodes based on this node
dataarrayyes
datasource for building child nodes

removeNodes($node)

刪除指定的節點及其下降的節點。

NameTypeRequiredDefaultDescription
$nodejquery objectyes
node to be removed

相關插件-布局

Helsinki高端Bootstrap HTML5響應式后臺模板

Helsinki是一套前端管理模板是建立在Bootstrap框架之上充分響應可以在任何設備上使用。
  布局
 47123  571

多用途響應式網站模板

多用途響應式網站模板,此模板可用于構建各種時尚的網站。
  布局
 11918  126

仿國外Tool網站

這個插件主要是仿Tool網站來寫,里面主要是做一些動畫效果,用css3和jQuery來寫,未使用任何外部插件
  布局
 21401  176

大屏可視化界面

基于echart圖表做的一個大屏可視化
  布局
 24359  298

討論這個項目(1)回答他人問題或分享插件使用方法獎勵jQ幣 評論用戶自律公約

    sunshine 0
    2019/3/2 17:56:03
    挺好啊,感覺能用的 回復
取消回復