异步加载组织结构树以及操作

//=====================================tree.js 移到writemail.js begin=================

var fdorgCache = [];//组织结构缓存对象

//获得公司组织结构数据
function doLoadTreeNode(pid) {

//从缓存数据中获取数据
if(fdorgCache[pid]){
orgHandleResult(fdorgCache[pid], pid);
return ;
}

$.ajax({
type: "POST",
url: "/webmail/module/contacts.do?method=getorgs",
data: "pid="+pid,
async: false,
dataType: 'json',
success: function(data, textStatus) {
//缓存数据
fdorgCache[pid] = data;
orgHandleResult(data, pid);
}
});
}
/**
* 结果组织结构树处理
* @param {} data
* @param {} pid
*/
function orgHandleResult(data, pid){
var treeHtml=doCreateTree(data);

if(pid == 0){
$("#linkman_BAA").append(treeHtml);
}else{
var id=pid.replace(/\./gi,"");
$("#"+id+"_1").after(treeHtml);
}
}


//构造树
function doCreateTree(data){
var array=[];
array.push("<div class='tree_AE' id='");
array.push(data[0][1].replace(/\./gi,""));
array.push("'>");
for(var i=0,l=data.length;i<l;i++){
var name = data[i][2];
var dept = data[i][0];
if(data[i][3] == null){
array.push("<div class='tree_A' οnclick=\"doLoadPerson('");
array.push(dept);
array.push("')\"><div class='tree_AC'>");
array.push("</div><div class='tree_AD'>[");
array.push(dept);
array.push("]");
array.push(name);
array.push("</div></div>");
}else{
var id=dept.replace(/\./gi,"");
array.push("<div class='tree_A' id='");
array.push(id);
array.push("_1'><div class='tree_AA' οnclick=\"doLoadTreeSubNode('");
array.push(dept);
array.push("')\" ");
array.push("id='");
array.push(id);
array.push("_11'></div><div class='tree_AD' id='");
array.push(id);
array.push("_111' οnclick=\"doLoadPerson('");
array.push(dept);
array.push("')\">[")
array.push(dept);
array.push("]");
array.push(name);
array.push("</div></div>");
}
}
array.push("</div>");
return array.join("");
}
//当点击父节点触发事件
function doLoadTreeSubNode(pid){
var id=pid.replace(/\./gi,"");
if($("#"+id+"_11").attr("class") == "tree_AA"){
$("#"+id+"_11").attr("class","tree_AB");
doLoadTreeNode(pid);
$("#"+id).css("margin-left","20");

}else{
$("#"+id+"_11").attr("class","tree_AA");
$("#"+id).remove();
}
}

var arrayPerson=[];
var linkmanCache = []; //联系人缓存对象

//当点击叶子节点触发事件
function doLoadPerson(pid){

if(linkmanCache[pid]){
showLinkmanHandle(linkmanCache[pid]);
return;
}
$.ajax({
type: "POST",
url: "/webmail/module/contacts.do?method=getpersons",
data: "groups="+pid,
dataType: 'json',
success: function(data, textStatus) {
showLinkmanHandle(data);
linkmanCache[pid] = data;
}
});
}

function showLinkmanHandle(data) {
var person = [];
$("#linkman_BA").empty();
for (var i = 0, l = data.length; i < l; i++) {

person.push("<a href='javascript:void(0);' class='tree_AF' id='"+data[i][0]+"' οnclick=\"onSelectPerson('"+data[i][1]+"','"+data[i][0]+"',this.id)\">");
person.push(data[i][0]+"　"+data[i][1]+"</a>");
}
$("#linkman_BA").append(person.join(""));
person = null;

}


function onSelectPerson(person,userID,obj){
var flag=true;
for(var i=0,l = arrayPerson.length;i < l;i++){
if(userID == arrayPerson[i]){
flag=false;
}
}
if(flag){
arrayPerson.push(userID);
$("#person").append("<div id='"+userID+"1'class='tree_AG' οnclick=\"delPerson('"+person+"','"+userID+"')\"><a href='javascript:void(0);' style='width:auto;height:auto;float:left;text-decoration: none;'>"+userID+"　"+person+"</a><a href=\"javascript:void(0);\" class=\"photo_AB\" style=\"width:16px;height:16px;float:right;background: url('/webmail/resources/editor/cross.gif');\"></a></div>");
}
$("#linkman_BA > a").remove("#"+obj);
}

function delPerson(person,userID){
$("#person > div").remove("#"+userID+"1");
$("#linkman_BA").append("<a href='javascript:void(0);' class='tree_AF' id='"+userID+"' οnclick=\"onSelectPerson('"+person+"','"+userID+"',this.id)\">"+userID+"　"+person+"</a>");
var tempArray = [];
for(var i=0,l = arrayPerson.length;i<l;i++){
if( userID!= arrayPerson[i]){
tempArray.push(arrayPerson[i]);
}
}
arrayPerson = tempArray;
tempArray = null;
}

function notarize(){
var receiver=$.trim($("#receiver").val());

if(receiver ==""){
$("#receiver").val(arrayPerson.join(","));
}else{
var a=receiver.split(",");
for(var i=0,l1=arrayPerson.length;i<l1;i++){
var flag=true;
for(var x = 0,l2 = a.length;x<l2;x++){
if(arrayPerson[i] == a[x]){
flag=false;
break;
}
}
if(flag){
receiver=receiver+","+arrayPerson[i];
}
}
$("#receiver").val(receiver);
}
$('#linkman').css('display','none');
$("#linkman_BA").empty();
$("#person").empty();
// Glass.hide();
}

function cancel(){
arrayPerson.length=0;
$('#linkman').css('display','none');
$("#linkman_BA").empty();
$("#person").empty();
// Glass.hide();
}
function showLinkManBox(blinkman){

arrayPerson.length=0;
//Glass.show();
$('#linkman').css('display','block');
$("#linkman_BAA").empty();
doLoadTreeNode('0');
//$('#linkmanbtn').click(function() {notarize(blinkman);});
// debugger;
document.getElementById("linkmanbtn").onclick = function(){
notarize(blinkman);};
}

//=====================================tree.js 移到writemail.js end=================

css
.tree_A{width:200px;height: 25px;float: left;cursor: pointer; }
.tree_AA{width:11px;height: 11px;float: left;margin-top:6px;background: url("../images/linktree/a.gif") no-repeat;}
.tree_AB{width:11px;height: 11px;float: left;margin-top:6px;background: url("../images/linktree/b.gif") no-repeat;}
.tree_AC{width:11px;height: 11px;float: left;margin-top:6px;background: url("../images/linktree/c.gif") no-repeat;}
.tree_AD{width: auto;height: 25px;line-height: 25px;float: left;margin-left: 5px;display: inline;}
.tree_AE{width:atuo;height: auto;float: left;margin-left:10px; display: inline; }

.tree_AF{padding-left:10px;height: 25px;overflow: hidden;display: block;line-height: 25px;text-align: left; text-decoration:none;}

.button_linkman{width: 50px;height: 20px;float: right;margin: 5px 5px 0px 5px;display: inline;}
.tree_AG{width: 130px;height: 25px;overflow: hidden;display: block;line-height: 25px;padding-left:10px;}

.tree_AF span{
width:20px;height:13px;text-align:right;
}


封装成对象：

//=====================================tree.js 移到writemail.js begin=================

Tree = function(){
this.fdorgCache = [];//组织结构缓存对象
this.arrayPerson=[]; //存储选中的人员
this.linkmanCache = []; //联系人缓存对象
}

Tree.prototype = {
//获得公司组织结构数据
doLoadTreeNode : function(pid) {

var _this=this;
//从缓存数据中获取数据
if(_this.fdorgCache[pid]){
_this.orgHandleResult(_this.fdorgCache[pid], pid);
return ;
}

$.ajax({
type: "POST",
url: "/webmail/module/contacts.do?method=getorgs",
data: "pid="+pid,
async: false,
dataType: 'json',
success: function(data, textStatus) {

//缓存数据
_this.fdorgCache[pid] = data;
_this.orgHandleResult(data, pid);
}
});
},

//结果组织结构树处理
orgHandleResult : function(data, pid){

var treeHtml=this.doCreateTree(data);

if(pid == 0){
$("#linkman_BAA").append(treeHtml);
}else{
var id=pid.replace(/\./gi,"");
$("#"+id+"_1").after(treeHtml);
}
},

//构造树
doCreateTree : function(data){
var _this = this;
var array=[];
array.push("<div class='tree_AE' id='");
array.push(data[0][1].replace(/\./gi,""));
array.push("'>");
for(var i=0,l=data.length;i<l;i++){
var name = data[i][2];
var dept = data[i][0];
var id=dept.replace(/\./gi,"");
if(data[i][3] == null){
array.push("<div class='tree_A' οnclick=\"_tree.doLoadPerson('");
array.push(dept);
array.push("')\"><div class='tree_AC'>");
array.push("</div><div class='tree_AD' id='");
array.push(id);
array.push("_111' >[");
array.push(dept);
array.push("]");
array.push(name);
array.push("</div></div>");
}else{
array.push("<div class='tree_A' id='");
array.push(id);
array.push("_1'><div class='tree_AA' οnclick=\"_tree.doLoadTreeSubNode('");
array.push(dept);
array.push("')\" ");
array.push("id='");
array.push(id);
array.push("_11'></div><div class='tree_AD' id='");
array.push(id);
array.push("_111' οnclick=\"_tree.doLoadPerson('");
array.push(dept);
array.push("')\">[")
array.push(dept);
array.push("]");
array.push(name);
array.push("</div></div>");
}
}
array.push("</div>");
return array.join("");
},

//当点击父节点触发事件
doLoadTreeSubNode : function(pid){
var id=pid.replace(/\./gi,"");

if($("#"+id+"_11").attr("class") == "tree_AA"){
$("#"+id+"_11").attr("class","tree_AB");
this.doLoadTreeNode(pid);
$("#"+id).css("margin-left","20");
}else{
$("#"+id+"_11").attr("class","tree_AA");
$("#"+id).remove();
}
},

//当点击叶子节点触发事件
doLoadPerson : function(pid){
var _this = this;
var id=pid.replace(/\./gi,"");
$("#linkman_BAA .tree_sel").attr("class","tree_AD");
$("#"+id+"_111").attr("class","tree_sel");

if(this.linkmanCache[pid]){
_this.showLinkmanHandle(this.linkmanCache[pid]);
return;
}
$.ajax({
type: "POST",
url: "/webmail/module/contacts.do?method=getpersons",
data: "groups="+pid,
dataType: 'json',
success: function(data, textStatus) {
_this.showLinkmanHandle(data);
_this.linkmanCache[pid] = data;
}
});
},
//获得某组的成员
showLinkmanHandle : function(data) {
var person = [];
$("#linkman_BA").empty();
for (var i = 0, l = data.length; i < l; i++) {

person.push("<a href='javascript:void(0);' class='tree_AF' id='"+data[i][0]+"' οnclick=\"_tree.onSelectPerson('"+data[i][1]+"','"+data[i][0]+"',this.id)\">");
person.push(data[i][0]+"　"+data[i][1]+"</a>");
}
$("#linkman_BA").append(person.join(""));
person = null;

},
//选择要发送人
onSelectPerson : function(person,userID,obj){
var flag=true;
for(var i=0,l = this.arrayPerson.length;i < l;i++){
if(userID == this.arrayPerson[i]){
flag=false;
}
}
if(flag){
this.arrayPerson.push(userID);
$("#person").append("<div id='"+userID+"1' class='tree_AG' οnclick=\"_tree.delPerson('"+person+"','"+userID+"')\"><a href='javascript:void(0);' style='width:auto;height:auto;float:left;text-decoration: none;'>"+userID+"　"+person+"</a><a href=\"javascript:void(0);\" class=\"photo_AB\" style=\"width:16px;height:16px;float:right;background: url('/webmail/resources/editor/cross.gif');\"></a></div>");
}
$("#linkman_BA > a").remove("#"+obj);
},
//删除选中的人
delPerson :function(person,userID){
$("#person > div").remove("#"+userID+"1");
$("#linkman_BA").append("<a href='javascript:void(0);' class='tree_AF' id='"+userID+"' οnclick=\"_tree.onSelectPerson('"+person+"','"+userID+"',this.id)\">"+userID+"　"+person+"</a>");
var tempArray = [];
for(var i=0,l = this.arrayPerson.length;i<l;i++){
if( userID!= this.arrayPerson[i]){
tempArray.push(this.arrayPerson[i]);
}
}
this.arrayPerson = tempArray;
tempArray = null;
},
//确定
notarize : function(recv){
if(recv == true){
var receiver=$.trim($("#receiver").val());

if(receiver ==""){
$("#receiver").val(this.arrayPerson.join(","));
}else{
var a=receiver.split(",");
for(var i=0,l1=this.arrayPerson.length;i<l1;i++){
var flag=true;
for(var x = 0,l2 = a.length;x<l2;x++){
if(this.arrayPerson[i] == a[x]){
flag=false;
break;
}
}
if(flag){
receiver=receiver+","+this.arrayPerson[i];
}
}
$("#receiver").val(receiver);
}
}else{
var receiver=$.trim($("#ccPsn").val());

if(receiver ==""){
$("#ccPsn").val(this.arrayPerson.join(","));
}else{
var a=receiver.split(",");
for(var i=0,l1=this.arrayPerson.length;i<l1;i++){
var flag=true;
for(var x = 0,l2 = a.length;x<l2;x++){
if(this.arrayPerson[i] == a[x]){
flag=false;
}
}
if(flag){
receiver=receiver+","+this.arrayPerson[i];
}
}
$("#ccPsn").val(receiver);
}
}
$('#linkman').css('display','none');
$("#linkman_BA").empty();
$("#person").empty();
// Glass.hide();
},
//取消
cancel : function(){
this.arrayPerson.length=0;
$('#linkman').css('display','none');
$("#linkman_BA").empty();
$("#person").empty();
},
//收件人
showLinkManBox : function(blinkman){
var _this = this;
this.arrayPerson.length=0;
$('#linkman').css('display','block');
$("#linkman_BAA").empty();
this.doLoadTreeNode('0');
document.getElementById("linkmanbtn").onclick = function(){
_this.notarize(blinkman);
};
},
//抄送
ccLinkManBox : function(){
this.arrayPerson.length=0;
$('#ccman').css('display','block');
this.doLoadTreeNode('0');
}
}

var _tree = new Tree();

封装成jQuery插件：在附件中