Atitit jOrgChart的用  组织架构图css
html

 

  1. 品类要开组织架构图,要管其做成自上而下的树形结构,于是决定1

  2. Html导入 以来的css js1

2.1. 多少来源 使用ul li格式,不是大面积的json格式2

2.2. 显示targetdiv以及调用开始3

  1. 显示力量3

  2. 对于的dom结构4

  3. 参考5

 

 

1. 种只要举行组织架构图,要把它做成自上而下的树形结构,于是决定

(1)通过后台查询数据库,生成树形数组结构,返回到前台。

(2)使用jOrgChart插件,根据返回的数目以其子节点加入到对应的<li></li>中。

率先,我们的数据表应该使发出
id(节点),pid(父节点的id),name的字段,

这就是说我们要将这个数组转为树形数组结构,即将各个要素放在
pid 父类元素的 childrens字段中,下面就简好成树形数组的代码,测试数组如下:

 

点击节点收起subnote,默认支持

设置默认为收到状态
 <li
class=”collapsed”>Chocolate

笔者::  ★(attilax)>>>   绰号:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ) 汉字名:艾龙,  EMAIL:1466519819@qq.com

转载请注明来源: http://blog.csdn.net/attilax

 

2. Html导入 以来的css js

<head>

<meta
charset=”utf-8″>

<title>无标题文档</title>

 

 

     <link
rel=”stylesheet” href=’bootstrap.min.css’/>  

      <link
rel=”stylesheet” href=’jquery.jOrgChart.css’/>  

 <link
rel=”stylesheet” type=”text/css”
href=”../com.atilax.frmwk/jOrgChart-master/bootstrap.min.css”>

 <link
rel=”stylesheet” type=”text/css”
href=”../com.atilax.frmwk/jOrgChart-master/jquery.jOrgChart.css”>

 <style
type=”text/css”>

 

 .node {

color: white;

}

 </style>

<script
src=”../com.atilax.frmwk/jquery-1.11.3.js”></script>

<script
src=”../com.atilax.frmwk/jOrgChart-master/jquery.jOrgChart.js”></script>

 

</head>

 

2.1. 多少来源 使用ul li格式,不是大面积的json格式

Html格式的优点是可以放入展示内容,比如img登

<ul id=”orgdata”
style=”display:none”>

    <li>

       Food

       <ul>

         <li
id=”beer”>Beer</li>

         <li>Vegetables

           <a
href=”http://wesnolte.com” target=”_blank”>Click me</a>

           <ul>

             <li>Pumpkin</li>

             <li>

                <a
href=”http://tquila.com” target=”_blank”>Aubergine</a>

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

             </li>

           </ul>

         </li>

         <li
class=”fruit”>Fruit

           <ul>

             <li>Apple

               <ul>

                 <li>Granny
Smith</li>

               </ul>

             </li>

             <li>Berries

               <ul>

                 <li>Blueberry</li>

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

                 <li>Cucumber</li>

               </ul>

             </li>

           </ul>

         </li>

         <li>Bread</li>

         <li
class=”collapsed”>Chocolate

           <ul>

             <li>Topdeck</li>

             <li>Reese’s
Cups</li>

           </ul>

         </li>

       </ul>

     </li>

   </ul>

 

2.2. 显示targetdiv以及调用开始

<div
id=”show_div” class=”orgChart”></div>

    

<div  class=”node”
id=”nodxxx”></div>

   

<script>

    jQuery(document).ready(function()
{

        $(“#orgdata”).jOrgChart({

            chartElement :
‘#show_div’,

            dragAndDrop  :
true

        });

    });

    </script>

 

3. 展示力量

 

 

 

4. 对于的dom结构

 

 

 

5. 参考

行使jOrgChart插件, 异步加载生成组织架构图 – 读书小记 – 博客频道 – CSDN.NET.html

相关文章

网站地图xml地图