浅谈使用jQuery插件制作组织结构图

一、jorgchart的使用

由于项目的需求，需要制作单位的组织机构图并进行相关的操作，查询相关的资料发现了一款好用的jquery插件jorgchart,下载相关的js文件之后，制作了简单的案例。

1、引入相关js和css文件，

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

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

2、在引入相关文件后，jorgchart 读取数据相对比较简单

配置jorgchart初始化

 <script>
    jQuery(document).ready(function() {
        $("#org").jOrgChart({
            chartElement : '#chart',
            dragAndDrop  : true
        });
    });
    </script>

3、在body中设置显示div并初始化数据

<div id='jOrgChart'></div>

<script type='text/javascript'>
    $(function(){
        //支持ajax数据源
        $.ajax({
            url: "data.json",
            type: 'GET',//必须是get方法
            dataType: 'JSON',
            data: {action: 'org_select'},
            success: function(result){
                var showlist = $("<ul id='org' style='display:none'></ul>");
                showall(result.data, showlist);
                $("#jOrgChart").append(showlist);
                $("#org").jOrgChart( {
                    chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
                    dragAndDrop : true //设置是否可拖动
                });

            }
        });
    });

    function showall(menu_list, parent) {
        $.each(menu_list, function(index, val) {
            if(val.childrens.length > 0){

                var li = $("<li></li>");
                li.append("<a href='javascript:void(0)'         
                onclick=getOrgId("+val.id+");>"+val.name+"</a>").append("<ul> 
                </ul>").appendTo(parent);
                //递归显示
                showall(val.childrens, $(li).children().eq(1));
            }else{
                $("<li></li>").append("<a href='javascript:void(0)' 
                 onclick=getOrgId("+val.id+");>"+val.name+"</a>").appendTo(parent);
            }
        });

    }

</script>

4、数据格式为标准的json格式，

{
  "data": [{
    "id": 1,
    "name": "企业主体信用得分",
    "pid": null,
    "childrens": [
      {
        "id": 2,
        "name": "企业素质",
        "pid": 1,
        "childrens": [
          {
            "id": 5,
            "name": "基本信息",
            "pid": 2,
            "childrens": [
              {
                "id": 10,
                "name": "企业主体信息识别",
                "pid": 5,
                "childrens": [
                ]
              },
              {
                "id": 11,
                "name": "企业持续注册时间",