預(yù)覽


最新版前往碼云 https://gitee.com/conesat/OrgCharts
用法

layui.config({
	base: '../orgCharts/' //配置 layui 第三方擴(kuò)展組件存放的基礎(chǔ)目錄，一般放入 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'],//右鍵菜單項(xiàng)
		success: function() { //可選
			//console.log("初始化完成")
		},
		error: function(e) { //可選
			//console.log(e);
		},
		onClick: function(el, data) { //點(diǎn)擊方法  el被點(diǎn)擊的元素  data對(duì)應(yīng)傳入數(shù)據(jù)
			//console.log(data.id);
			alert('點(diǎn)擊了' + data.name);
		},
		onAdd:function(data,tab){//添加回調(diào) data為點(diǎn)擊的數(shù)據(jù)  tab為標(biāo)記點(diǎn),用于插入新數(shù)據(jù)
			var myData=new Object();
			myData.name=prompt("輸入name","新節(jié)點(diǎn)");
			myData.child=[];
			if(myData.name!=null){
				orgCharts.addNodes(myData,tab);
			}
		},
		onEdit:function(data){//編輯回調(diào) data為點(diǎn)擊的數(shù)據(jù)  tab為標(biāo)記點(diǎn),用于插入新數(shù)據(jù)
			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數(shù)據(jù)  格式請(qǐng)參照  data/data.json  中的data
				success: function() { //可選
					//console.log("繪制化完成");
				},
				error: function(e) { //可選
					//console.log('繪制失敗');
				}
			});
		},
		error: function(msg) {}????
	});
	/*
	 * 設(shè)置主題  主題類型normal ,red ,green ,black ,gray
	 * 可自定義樣式文件
	 * 類名格式如 
	 * node-my 節(jié)點(diǎn)樣式
	 * vertical-line-my 豎線樣式
	 * transverse-line-my 橫線樣式
	 * 詳細(xì)參考my.style
	 * 該方法
	 */
	//Org.setTheme('gray');
	window.changeTheme = function(theme) {
		orgCharts.setTheme(theme);
	}
});