layui 第三方组件平台

返回首页 发布组件

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

文档

用了那么久layui
用到组织结构展示插件时发现并不是自己想要的于是尝试着自己写一个组件

理所当然的存在问题:不过影响不大
理所当然的不足:因为刚刚开始
持续更新

预览




用法
layui.config({
base: '../orgCharts/' //配置 layui 第三方扩展组件存放的基础目录,一般放入 layui_exts 目录下
}).extend({
orgCharts: 'orgCharts'
}).use(['orgCharts', 'jquery'], function() {
var orgCharts = layui.orgCharts;
var $ = layui.$;
//初始化组件
orgCharts.init({
id: "org_charts", //必填
theme: '', //可选
success: function() { //可选
//console.log("初始化完成")
},
error: function(e) { //可选
//console.log(e);
},
onClick: function(el, data) { //点击方法 el被点击的元素 data对应传入数据
//console.log(data.id);
alert('点击了' + data.name);
}
});

//加载方式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);
}
});