Atitit jOrgChart的选择  组织架构图css
html

 

  1. 花色要做协会架构图,要把它做成自上而下的树形结构,于是决定壹

  2. Html导入 以来的css js1

2.壹. 数额来源 使用ul li格式,不是大规模的json格式二

二.二. 显示targetdiv以及调用开头叁

  1. 显示效果三

  2. 对于的dom结构4

  3. 参考5

 

 

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

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

(2)使用jOrgChart插件,依照重返的数目将其子节点出席到相应的<li></li>中。

率先,咱们的数据表应该要有
id(节点),pid(父节点的id),name的字段,

那么大家要把那一个数组转为树形数组结构,即将各样要素放在
pid 父类成分的 childrens字段中,上边正是不难生成树形数组的代码,测试数组如下:

 

点击节点收起subnote,暗中同意帮衬

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

我::  ★(attilax)>>>   绰号:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 Ake巴 阿尔 拉帕努伊 ) 汉字名:艾龙,  EMAIL:14665一玖八四玖@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

相关文章