jquery组织结构图插件（基于jit-yc 做可拖动、自适应伸缩的orgchart)

最新推荐文章于 2025-01-14 16:59:31 发布

东成熙就

最新推荐文章于 2025-01-14 16:59:31 发布

阅读量9.5k

点赞数 1

分类专栏： Javascript JQuery插件文章标签： orgchart JQuery组织结构图 jit-yc

本文链接：https://blog.youkuaiyun.com/phpfer/article/details/48979237

版权

本文介绍了如何利用jqueryjit-yc插件创建一个基于JSON数据的组织结构图。首先，后台需将数据转化为JSON格式，接着在JavaScript中处理这些数据。通过实例代码展示了如何初始化、加载JSON数据并设置节点样式和点击事件。此外，还提供了官网上的简单和完整示例链接供参考，以及一个实际运行的DEMO。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个基于jquery jit-yc插件实现的orgchart结构图demo

首先后台处理转入JSON数据是必须的，

var json = {
    "id": 1,
    "name": "集团总部",
	"data":{'desc':'简介','link':'http://www.baidu.com'},
    "children": [
        {
            "id": 10,
            "name": "物业公司",
            "data": {'desc':'简介','link':'http://www.baidu.com'},
            "children": [
                {
                    "id": 20,
                    "name": "财务1部",
                    "data": {'desc':'简介','link':'http://www.baidu.com'},
					"children":[
					{
						"id":30,
						"name":"1部1处",
						"data":{'desc':'简介','link':'http://www.baidu.com'}
					},
					{
						"id":31,
						"name":"1部2处",
						"data":{'desc':'简介','link':'http://www.baidu.com'}
					}
					]
                },
				{
                    "id": 21,
                    "name": "财务2部",
                    "data": {'desc':'简介','link':'http://www.baidu.com'},
					"children":[
					{
						"id":32,
						"name":"2部1处",
						"data":{'desc':'简介','link':'http://www.baidu.com'}
					}
					]
                },
            ]
        },
        {
            "id": 11,
            "name": "建筑公司",
            "data": {'desc':'简介','link':'http://www.baidu.com'},
            "children": [
			{
				"id":25,
				"name":"行政部",
				"data":{'desc':'简介','link':'http://www.baidu.com'}
			}
			]
        },
        {
            "id": 12,
            "name": "装饰公司",
            "data": {'desc':'简介','link':'http://www.baidu.com'},
            "children": []
        }
    ]
};

然后，主要是JS功能（也是newChart.js的全部内容），