4 Star 48 Fork 18

IceFire / OrgCharts

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

OrgCharts

组织结构图

输入图片说明 输入图片说明

使用方法参见 demo

数据格式为

{
    "id": "2",  //id可有可无
    "name": "主要部门2",  //name可有可无
    "open": "true",  //false为不展开 空或者true为展开
    "html": "",    //自定义文本  注意:里面不能使用" 请用'代替
    "child": []   //子节点 与当前节点 格式一致
}

除以上内容可以按需添加 在add 与edit 方法可以自行修改数据 通过getData方法可以取出全部修改完成的数据

当data中html不为空时默认显示html内容 否则显示name

layui 请参考 layui中demo示例 或者前往layui官网搜索插件查看示例 地址链接

js用法:

    var Org=new OrgCharts();
    //初始化组件  
    Org.init({
        id: "org_charts", //必填
        theme: '', //可选
        menu:['edit','add','delete','cut','copy','absorbed'],//右键菜单项
        success: function() { //可选
            //console.log("初始化完成")
        },
        error: function(e) { //可选
            //console.log("初始化失败");
        },
        onClick: function(el, data) { //点击方法  el被点击的元素  data对应传入数据
            //console.log(data.id);
            alert('点击了' + data.name);//可以得到data中存在任意字段
        },
        onAdd:function(data,tab){//添加回调 data为点击的数据  tab为标记点,用于插入新数据
            var myData=new Object();//新的节点 可以再次编辑节点中任意任意字段包括自定义的
            myData.name=prompt("输入name","新节点");
            myData.child=[];
            if(myData.name!=null){
                orgCharts.addNodes(myData,tab);
            }
        },
        onEdit:function(data){//编辑回调 data为点击的数据 直接修改 然后重新绘制即可
            data.html=prompt("输入name",data.html);//同理可以修改节点任意字段 
            if(data.name!=""){
                orgCharts.draw();//记得重新绘制 否则看不到效果
            }
        }
    });
	
    //加载方式1   
    Org.drawByUrl({
        url: 'data/data.json', //路径必选 可以是后台返回数据  返回格式参考 data/data.json
        success: function() { //可选
            console.log("绘制化完成");
        },
        error: function(e) { //可选
            console.log('绘制失败');
        }
    });
	
    //加载方式2 直接传入数据jsondata 可以通过ajax获取数据后 将数据传到该方法进行绘制
    Org.drawByData({
        data: 'jsondata',//必填json数据  格式请参照  data/data.json  中的data
        success: function() {//可选
            console.log("绘制化完成");
        ,
        error: function(e) {//可选
            console.log('绘制失败');
        }
    });

    //加载方式2 结合jquery ajax使用示例
    $.ajax({      
        type: "get",
        url: "data/data.json",
        dataType: "text",
        success: function(data) {
            var JSONData = JSON.parse(data);
            orgCharts.drawByData({
            data: JSONData.data, 
                success: function() { //可选
                    /console.log("绘制化完成");
                },
                error: function(e) { //可选
                    //console.log('绘制失败');
                }
            });
        },
        error: function(msg) {}    
    });
	
    设置主题  主题类型normal ,red ,green ,black ,gray
    可自定义样式文件
    类名格式如 
    node-my 节点样式
    vertical-line-my 竖线样式
    transverse-line-my 横线样式
    方法详细参考my.style
    Org.setTheme('gray');
    Org.getData(); //获取全部数据  与传输数据格式一致

About

原生js组织结构展示工具 expand collapse
JavaScript
Cancel

Releases

No release

OrgCharts

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/conesat/OrgCharts.git
git@gitee.com:conesat/OrgCharts.git
conesat
OrgCharts
OrgCharts
master

Search