`
zengshaotao
  • 浏览: 752690 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jOrgChart横向的组织机构树--手工构造json数据

 
阅读更多

<!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" href="css/bootstrap.min.css"/>

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

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

 

    

    <!-- jQuery includes -->

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

    <script src="jquery.jOrgChart.js"></script>

 

    <script>

    jQuery(document).ready(function () {

            loadtree();

        });

        //menu_list为json数据

        //parent为要组合成html的容器

 

        function showall(menu_list, parent) {

            for (var menu in menu_list) {

                //如果有子节点，则遍历该子节点

                if (menu_list[menu].children.length > 0) {

                    //创建一个子节点li

                    var li = $("<li></li>");

                    //将li的文本设置好，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中

                    $(li).append(" <a  href='javascript:void(0)'  onclick='xx(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").append("<ul></ul>").appendTo(parent);

                    //将空白的ul作为下一个递归遍历的父亲节点传入

                    showall(menu_list[menu].children, $(li).children().eq(1));

                }else {

                //如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中

                    $("<li></li>").append(" <a href='javascript:void(0)' onclick='defineFunc(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").appendTo(parent);

                }

            }

        }

 

        

        function loadtree() {

var res = [{

   "id": 1,

   "name": "根节点",

   "children": [

       {

           "id": 2,

           "name": "第二层1",

           "data": "",

           "children": ""

       },

       {

           "id": 3,

           "name": "第二层2",

           "data": "",

           "children": ""

       }

   ]

}];

 

//var json = eval("("+res+")");

                    var showlist = $("<ul id='org' style='display:none'></ul>");

                    showall(res, showlist);

                    

                    //将生成好的固定格式的ul

                    $("#f").append(showlist);

                    $("#org").jOrgChart();

                    

                    /*  $("#org").jOrgChart({

           chartElement : "#chart",

           dragAndDrop  : false

       }); */

       

        }

        

        function defineFunc(id){

        alert(id+",ddd");

        }

    </script>

  </head>

 

  <body id="f">

    <div class="topbar">

        <div class="topbar-inner">

            <div class="container">

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

            </div>

        </div>

    </div>

    

    

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

    

    

 

</body>

</html>

分享到：
| jOrgChart的调试模式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics