orgchart.js， 组织架构图 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />       
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  	
<title>org chart </title>
<meta name="apple-moible-web-app-capable" content="yes">
<meta name="apple-moible-web-app-status-bar-style" content="black">	
<meta http-equiv="X-UA-Compatible" content="IE =EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="chrome =1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" type="image/gif" />
<meta name="Keywords" content="Geovin Du 涂聚文，塗聚文"/>
<meta name="Description" content="Geovin Du 涂聚文，塗聚文">
<meta name="author" content="Geovin Du 涂聚文，塗聚文，geovindu">	
  <link rel="stylesheet" href="css/jquery.orgchart.css">		
</head>
<body>
<div id="chart-container"></div>
 <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.orgchart.js"></script>	
<script type="text/javascript">
	(function($) {
  $(function() {
	  
	  /*
	  data【json or String】：数据
pan 【boolean 默:flase】：通过鼠标拖放来控制OrgChart
zoom【boolean 默:false】：通过鼠标滚轮放大或缩放OrgChart
zoominLimit【number 默:7】：设置放大限制
zoomoutLimit【number 默:0.5】：设置缩放限制
direction【String 默:t2b】：T2B："从上到下"，B2T："从底到上"，L2R："左到右"，R2L："向左到右"
verticalLevel【integer(>=2)】：
toggleSiblingsResp【boolean 默:false】：通过单击左/右箭头分别显示/隐藏左/右兄弟节点
ajaxURL【json】：不同的优先级提供了发送不同节点的Ajax请求的URL
visibleLevel【number】：默认展开几级
nodeId【String 默:id】：将数据源的一个属性设置为每个OrgChart节点的唯一标识符。
nodeTitle【String 默:name】：将数据源的一个属性设置为OrgChart节点标题段的文本内容
nodeContent【String】：将数据源的一个属性设置为OrgChart节点的内容部分的文本内容。
nodeTemplate【function】：它是一个模板生成函数，用于定制任何复杂的节点内部结构
createNode【function】：它是用于自定义每个OrgCad节点的回调函数
parentNodeSymbol【String 默:fa-users】：使用图标暗示该节点有子节点
exportButton【boolean 默:false】：是否启用OrgChar的导出按钮
exportFilename【String 默:OrgChart】：当输出当前的OrgChart作为图片时，它是文件名。
exportFileextension【String 默:png】：可用的值是PNG和PDF。
chartClass【String】：当你想在一个页面上实例化多个orgcharts 时，你应该添加不同的类名来区分它们。
draggable【boolean 默:false】：用户可以拖动和删除OrgChart节点
dropCriteria【function】：用户可以构造自己的标准来限制拖动节点和删除区域之间的关系
initCompleted【function】：经常知道您的表何时已经完全初始化、数据加载和呈现，尤其是当使用Ajax数据源时
	  */
    var oc = $('#chart-container').orgchart({
      'data' : '1.json',
      'depth': 2,
      'nodeContent': 'title',
		drag: true,//是否可以拖动
	   //'direction': 'b2t',
		//'direction': 'r2l',
		//'toggleSiblingsResp': true,
		'exportButton': true,
        'exportFilename': 'DuOrgChart',
	   'pan': true,
      'zoom': true
    });

  });
})(jQuery);
	
	</script>
</body>
</html>

　1.json:　

{
	"id":"0",
    "name": "Lao老 Lao",
	"title":"geovindu",
    "children": [{
		    "id":"1",
            "name": "Bo Miao",
		    "title":"geovindu"
        },
        {
			"id":"2",
            "name": "Su Miao",
			"title":"geovindu",
            "children": [{
					"id":"4",
                    "name": "Tie Hua",
				   "title":"geovindu "
                },
                {
					"id":"5",
                    "name": "Hei Hei",
					"title":"geovindu",
                    "children": [{
						     "id":"6",
                            "name": "Pang Pang",
						"title":"涂聚文"
                        },
                        {
							"id":"7",
                            "name": "Xiang Xiang",
							"title":"涂聚文"
                        }
                    ]
                }
            ]
        },
        {
			"id":"3",
            "name": "Hong Miao",
			"title":"geovindu"
        },
        {
			"id":"4",
            "name": "Chun Miao",
			"title":"geovindu"
        }
    ]
}

　　

 

create table OrgChart
(
	Id INT IDENTITY(1,1) PRIMARY KEY,
	parent INT,
	[name] NVARCHAR(100),
	title NVARCHAR(100)
)
GO

　　

 

    public class Children
    {
        public string id { get; set; }
        public string parent { get; set; }
        public string name { get; set; }
        public string title { get; set; }
        public List<Children> children { get; set; }
    }

    /// <summary>
    /// 
    /// </summary>
    public class OrgChartRoot
    {
        public string id { get; set; }
        public string parent { get; set; }
        public string name { get; set; }
        public string title { get; set; }
        public List<Children> children { get; set; }
    }

　　

posted @ 2022-03-19 00:03  ®Geovin Du Dream Park™  阅读(424)  评论(0)    收藏  举报