jOrgChart横向的组织机构数插件

最新推荐文章于 2024-07-23 14:53:12 发布
最新推荐文章于 2024-07-23 14:53:12 发布
阅读量1.1k 收藏
点赞数
分类专栏： JQuery 文章标签： javascript python 前端 ViewUI

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>jOrgChart - A jQuery OrgChart Plugin</title>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

    <link rel="stylesheet" type="text/css" href="css/jquery.jOrgChart.css"/>

    <link rel="stylesheet" type="text/css" href="css/custom.css"/>

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

    <script type="text/javascript" src="jquery.jOrgChart.js"></script>

 

    <script type="text/javascript">

    

        jQuery(document).ready(function() {

            

             $("#org").jOrgChart({

           chartElement : '#chart',

           dragAndDrop  : false

       });

        });

    </script>

  </head>

 

  <body οnlοad="">

    <div class="topbar">

        <div class="topbar-inner">

            <div class="container">

                <a class="brand" href="#">jQuery Organisation Chart</a>

            </div>

        </div>

    </div>

    

    <ul id="org" style="display:none">

    <li>

       股票

       <ul>

         <li id="beer">深A</li>

         <li>新三板<a href="http://wesnolte.com" target="_blank">Click me</a>

           <ul>

             <li>新1</li>

             <li>

                <a href="http://tquila.com" target="_blank">新2</a>

                <p>A link and paragraph is all we need.</p>

             </li>

           </ul>

         </li>

         <li class="fruit">沪A

           <ul>

             <li>大蓝筹

               <ul>

                 <li>Granny Smith</li>

               </ul>

             </li>

             <li>工业4.0

               <ul>

                 <li>Blueberry</li>

                 <li><img src="images/raspberry.jpg" alt="Raspberry"/></li>

                 <li>Cucumber</li>

               </ul>

             </li>

           </ul>

         </li>

         <li>中小板</li>

         <li class="collapsed">创业板

           <ul>

             <li>Topdeck</li>

             <li>Reese's Cups</li>

           </ul>

         </li>

       </ul>

     </li>

   </ul>            

    

    <div id="chart" class="orgChart"></div>

    

</body>

</html>

zengshaotao
关注
专栏目录
JQ插件OrgChart实现组织结构图
路遇惊喜
06-04 2万+
最近在做一个OA系统的组织结构图，需求如下。第一眼看起来让人联想到脑图，思维导图大家都比较熟悉。但这不是脑图，是组织结构图。
vue中的横向排列_vue横向组织结构图实现
weixin_39570777的博客
12-19 2582
实现效果图如下：image.png数据格式 treelet dataInfo = [{name: "root",value: "root",children: [{name: "child1",value: "一级1",children: [{name: "child2",value: "二级1",children: []},{name: "child2",value: "二级2",childr...
OrgChart 横向树形控件
06-13
OrgChart,横向树形控件，数据结构json形式类似于dtree,样式使用的bootstrap，绝对比其他山寨界面好看，高大上，支持节点的添加，删除，修改，可以改为ajax形式，QQ:529757141
jOrgChart横向的组织机构树--手工构造json数据
zengshaotao的专栏
03-02 1648
&lt;!DOCTYPE html&gt; &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;     &lt;title&gt;jOrgChart - A jQuery OrgChart Plugin&lt;/title&g
jOrgChart容器宽高自适应，自动折叠对应层级
最新发布
Oyama_Fung的博客
07-23 282
工作中用到了这个流程图，研究了好半天一直显示都有问题，最后发现有人改了js的源码...(大无语！连个注释都不写！最后还是顺利解决，顺便记录下这两个常用的功能~
部门选择控件（jquery插件）
06-28
是一款jquery的部门选择控件，支持部门树展示，勾选选择部门
jOrgChart主页
05-02
jOrgChart主页，组织结构图，展示各个部门的组织结构。
jQuery可任意拖拽排序机构菜单树.rar
05-24
jQuery可任意拖拽排序机构菜单树，菜单可任意拖动。
vuejsTime横向时间年月日星期插件
04-17
在这个"vuejsTime横向时间年月日星期插件"中，我们讨论的是如何在Vue.js项目中实现一个能够展示横向时间轴，包含年、月、日和星期的功能。 首先，我们需要理解这个插件的核心功能。横向时间轴通常用于展示时间序列...
JS横向树（组织结构）
03-22
JavaScript 横向树，又称为水平树或组织结构图，是一种常见的数据可视化方式，尤其在展示企业或团队的层级关系时非常有用。这种布局方式将树状结构自上而下展开，使得节点间的层次关系一目了然，且占用空间更少，...
横向数据重复的插件dw插件
10-21
描述中的“横向数据重复的插件横向数据重复的插件dw插件横向数据重复的插件dw插件”虽然重复，但我们可以理解为强调这个插件的功能是处理数据表中的横向重复数据。横向数据重复通常指的是在同一列或者相关联的列中...
前端横向组织架构图 js
12-25
横向组织架构图前端JS实现代码, 实现新增, 删除, 级联删除, 修改节点 带案例
jOrgChart-master
10-18
一个jQuery插件，它允许转换成树形结构嵌套无序列表元素，然后按组织结构图般的输出。 它支持任何深度，单击每个项目可以显示/隐藏子水平，并拖动’N'下降从一个节点到另一个元素是可能的，该接口将相应地调整水平。 非常容易使用嵌套的无序列表中的元素。 拖动和重组的元素。 通过点击相应的节点上显示/隐藏着一个特定的节点。 节点可以包含任意数量的HTML
jOrgChart的js
01-31
jOrgChart的所需的js文件 包括css、images和jquery.jOrgChart.js 以及demo
jOrgChart-master.zip
06-17
使用jOrgChart.js完成组织结构的展示，测试用例，仅供学习参考使用；
使用jOrgChart实现层级树图
kyunsoo的博客
03-27 4480
代码来源：https://github.com/wesnolte/jOrgChart 效果图：树图分为横竖两方向+ 分支带有点击收缩功能 1）横向树图： 2）竖向树图：出现点击文字收缩功能体验不好 ...
HTML的基本机构
zzyt2001的博客
12-04 164
HTML的基本结构 HTML超文本标签语言 Hyper Text Markup Language 网页的"源码" 浏览器：“解释和执行”HTML源码的工具 HTML文档的结构 开头 必须有 /* 头部标签注释 */ 我的第一个网页——网页标题 ——给普通用户看的 Hello World! 结尾 * 网页摘要信息的作用 -有利于浏览器解析 -有利于搜索引擎搜索 * 标签 -描述文档类型和字符编码（不需要必和使用，但是在结束的时候加/） -<meta…/> —
课时11.HTML基本机构详解（掌握）
aoai0959的博客
06-11 113
通过观察我们发现，HTML基本结构中所有标签都是成对出现的。这些成对出现的标签中有一个带/有一个不带/，那么这些不带/的标签我们称之为开始标签，这些带/的标签，我们称之为结束标签。 html标签 作用： 用于告诉浏览器这是一个网页，也就是说告诉浏览器这是一个HTML文档 注意点： 其它所有的标签都必须写在html标签里面，也就是写在html开始标签和结束标签中间 ...
jQuery实现横向导航菜单特效插件教程
资源摘要信息:"jQuery横向导航菜单特效插件.zip" 知识点: 1. jQuery基础 - jQuery是一个快速、小巧、功能丰富的JavaScript库，它通过提供一个简单易用的API来操作DOM，简化了HTML文档遍历和事件处理。 - jQuery的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值