預覽


最新版前往碼云 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) { //點(diǎn)擊方法  el被點(diǎn)擊的元素  data對應傳入數據
			//console.log(data.id);
			alert('點(diǎn)擊了' + data.name);
		},
		onAdd:function(data,tab){//添加回調 data為點(diǎn)擊的數據  tab為標記點(diǎn),用于插入新數據
			var myData=new Object();
			myData.name=prompt("輸入name","新節點(diǎn)");
			myData.child=[];
			if(myData.name!=null){
				orgCharts.addNodes(myData,tab);
			}
		},
		onEdit:function(data){//編輯回調 data為點(diǎn)擊的數據  tab為標記點(diǎn),用于插入新數據
			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) {}????
	});
	/*
	 * 設置主題  主題類(lèi)型normal ,red ,green ,black ,gray
	 * 可自定義樣式文件
	 * 類(lèi)名格式如 
	 * node-my 節點(diǎn)樣式
	 * vertical-line-my 豎線(xiàn)樣式
	 * transverse-line-my 橫線(xiàn)樣式
	 * 詳細參考my.style
	 * 該方法
	 */
	//Org.setTheme('gray');
	window.changeTheme = function(theme) {
		orgCharts.setTheme(theme);
	}
});