利用JOrgChart只需2分钟即可配置简单组织机构图

笔者，自认为只是学习了一点皮毛，或者说JOrgChart就是这么简单。需要修改方法、样式直接修改jquery.jOrgChart.js与jquery.jOrgChart.css即可。配置也是那么的简单。
那么这里我们，实现一个简单的横向分布的组织结构吧，原理就是<ul>与<li>的嵌套关系实现组织机构的分布图示。配置的简单代码如下：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>jOrgChart配置简单的组织结构</title><script type="text/javascript" src="./jquery.min.js"></script><script src="./jquery.jOrgChart.js"></script><link rel="stylesheet" href="./jquery.jOrgChart.css"><!--样式--></head><body ><ul id="org" style="display:none"><li>20180812主一级位置<ul><li>下属二级菜单位置</li><li>下属二级<ul><li>三级  </li><li>三级<ul><li>四级</li><li>四级</li></ul></li></ul></li><li>下属二级</li><li>下属二级</li><li>下属二级</li><li>下属二级<ul><li>三级<ul><li>四级</li></ul></li><li>三级<ul><li>四级<ul><li>五级</li><li>五级</li><li>五级</li><li>五级</li></ul></li><li>四级</li><li>四级</li><li>四级</li></ul></li></ul></li><li>下属二级    </li></ul></li></ul><div id="chart" class="orgChart"><div class="jOrgChart"></div></div></body><script>$(document).ready(function() {$("#org").jOrgChart({chartElement: '#chart',dragAndDrop: true});});</script>
</html>

运行效果演示：

通过开发人员调试，我们可以看出。JOrgChart的实现原理是通过table来定位和实现的：

转载于:https://blog.51cto.com/13479739/2158577

利用JOrgChart只需2分钟即可配置简单组织机构图相关推荐

red hat安装宝塔_只需几分钟即可安装Red Hat Container Development Kit（视频）
red hat安装宝塔自从我开始使用各种形式的OpenShift(例如带盒的Online,然后又作为容器化的图像)玩耍以来,没有什么比Red Hat Container Development Ki ...
只需几分钟即可安装Red Hat Container Development Kit（视频）
自从我开始使用各种形式的OpenShift(例如带盒的Online,然后又作为容器化的图像)玩耍以来,没有什么比Red Hat Container Development Kit(CDK)的可用性令我 ...
深度学习所需显存_只需10分钟即可学习基本的Flexbox
深度学习所需显存 by Justin Yek 贾斯汀·耶克(Justin Yek) 只需10分钟即可学习基本的Flexbox (Learn basic Flexbox in just 10 minut ...
只需5分钟即可启动并运行分层架构：： Spring Boot第1部分
这是一个分为两部分的系列,其中我将展示如何使用Spring Boot创建分层架构. 什么是分层体系结构:简而言之,当我们构建企业应用程序时,我们维护不同的层以封装特定于层的逻辑,这样就不会溢出到另一层 ...
spring boot分层_只需5分钟即可启动并运行分层架构：： Spring Boot第1部分
spring boot分层这是一个分为两部分的系列,其中我将展示如何使用Spring Boot创建分层体系结构. 什么是分层体系结构:简而言之,当我们构建企业应用程序时,我们维护不同的层以封装特定于 ...
超简单，只需十分钟即可从App Store退款，附无法拒绝的退款理由
首先说明退款条件和注意事项: 退款仅限90天内,超时则无法申请: 退款是否通过,取决于退款理由,建议写到无法拒绝: 软件.内购和订阅内容都可以申请退款: App Store 不能反复退款,申请退款需谨 ...
IPhone手机只需十分钟即可从App Store申请退款，非常简单，附退款理由
大家平时应该多多少少会遇到在App Store买错东西的体验,比如手快买了付费应用,或者订阅无意间扣费,这些情况都是可以退款的!今天就教大家最简单的退款方式,帮助大家要回不必要的花费~ 首先说明退款条 ...
javascript核心_只需几分钟即可学习这些核心JavaScript概念
javascript核心 Sometimes, you just want to learn something quickly. And reading through comprehensive ...
Python只需3分钟即可搭建支付宝三方支付
再没有三方支付平台之前,用户发起支付请求的时候,用户要去和银行签约(转账),特别的不方便,为了解决这些问题,就有了三方支付,三方平台去完成签约,给用户节省时间. 支付宝支付的流程商户拿到支付宝的公钥 ...

利用JOrgChart只需2分钟即可配置简单组织机构图

利用JOrgChart只需2分钟即可配置简单组织机构图相关推荐

最新文章

热门文章