layui 第三方组件平台

返回首页 发布组件

展示组织结构,包含自定义内容,点击事件

更新:2018-12-20 创建:2018-12-4

文档



预览


最新版前往码云 https://gitee.com/conesat/OrgCharts
用法
layui.config({
base: '../orgCharts/' //配置 layui 第三方扩展组件存放的基础目录,一般放入 layui_exts 目录下
}).extend({
orgCharts: 'orgCharts'
}).use(['orgCharts', 'jquery'], function() {
var orgCharts =new layui.orgCharts;
var $ = layui.$;
//初始化组件
orgCharts.init({
id: "org_charts", //必填
theme: '', //可选
menu:['edit','add','delete','cut','copy','absorbed'],//右键菜单项
success: function() { //可选
//console.log("初始化完成")
},
error: function(e) { //可选
//console.log(e);
},
onClick: function(el, data) { //点击方法 el被点击的元素 data对应传入数据
//console.log(data.id);
alert('点击了' + data.name);
},
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为点击的数据 tab为标记点,用于插入新数据
data.html=prompt("输入name",data.html);
if(data.name!=""){
orgCharts.draw();//重新绘制
}
}
});

//加载方式1
/*
orgCharts.drawByUrl({
url: 'data/data.json', //必选 返回格式参考 data/data.json
success: function() { //可选
//console.log("绘制化完成");
},
error: function(e) { //可选
//console.log('绘制失败');
}
});
*/

//加载方式2

$.ajax({      
type: "get",
url: "data/data.json",
dataType: "text",
success: function(data) {
var JSONData = JSON.parse(data);
orgCharts.drawByData({
data: JSONData.data, //必填json数据 格式请参照 data/data.json 中的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');
window.changeTheme = function(theme) {
orgCharts.setTheme(theme);
}
});

下载

立即下载 去码云下载 去 GitHub 下载
该扩展组件由第三方用户主动投递,并由其自身进行维护,本站仅做收集。