Atitit jOrgChart的利用  协会架构图css
html

 

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

2. Html导入 以来的css js1

二.1. 多少来源 使用ul li格式,不是广阔的json格式2

二.贰. 显示targetdiv以及调用开端3

三. 出示效果3

4. 对于的dom结构4

5. 参考5

 

 

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

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

(贰)使用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://www.cnblogs.com/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. 突显效果

 

jQuery 1 

 

4. 对于的dom结构

jQuery 2 

jQuery 3 

 

5. 参考

应用jOrgChart插件, 异步加载生成协会架构图 – 读书小记 – 博客频道 – CSDN.NET.html

 

相关文章

网站地图xml地图