组织结构图

组织结构图

使用方法参见 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(); //获取全部数据 与传输数据格式一致