`
魏祖清
  • 浏览: 176420 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

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

    博客分类:
  • js
阅读更多
//=====================================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' onclick=\"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' onclick=\"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' onclick=\"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]+"' onclick=\"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' onclick=\"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+"' onclick=\"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' onclick=\"_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' onclick=\"_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' onclick=\"_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]+"' onclick=\"_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'  onclick=\"_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+"' onclick=\"_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插件:在附件中
  • img.rar (1.5 KB)
  • 下载次数: 43
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    利用jOrgChart插件异步加载数据生成组织架构图

    (1)将数组生成树形数组结构,返回到前台。 (2)使用jOrgChart插件,根据返回的数据将其子节点加入到相应的&lt;li&gt;&lt;/li&gt;中。

    WPF TreeView递归异步绑定

    1.节点是异步加载的(解决效率问题) 2.节点是无限级别的(递归的,这样可复用与目录结构、组织架构等数据类型) 3.节点是可以多选的(用CheckBox选择) 4.XAML方式绑定(减少UI上Code量) 5.方便得获取选中项信息

    jOrgChart-master.zip

    一个jQuery插件,它允许转换成树形结构嵌套无序列表元素,然后按组织结构图般的输出。 它支持任何深度,单击每个项目可以显示/隐藏子水平,并拖动’N'下降从一个节点到另一个元素是可能的,该接口将相应地调整水平。...

    Ajax的知识结构和内容

    整个树就这样组织下去,直到浏览器获得与上图类似的结构  通常把这样的树结构成为一棵节点树 节点 (node)  DOM文档是由节点构成的集合,此时的节点是文档树上的树枝或者树叶  DOM中节点的类型:  元素节点...

    基于 Vue3、Vite、Ant-Design-Vue大数据开发案例

    树表支持异步的封装,提升展开折叠性能,支持按层次展开折叠树表 树结构新增快捷刷新、动态生成树、层次独立和不独立的数据返回兼容 增加左树右表功能展示,可折叠左树,树组件增加默认图标 表单组件适应各种数据...

    打造基于jQuery的高性能TreeView(asp.net)

    2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。3:Checkbox树(可能是静态树也可能是异步树),用于选择(如选择组织机构,选择数据字典项)等,最好是能够支持节点级联(这个是难点)4:能够...

    python入门到高级全栈工程师培训 第3期 附课件代码

    python入门到高级全栈工程师培训视频学习资料;本资料仅用于学习,请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 02 计算机系统 03 小结 04 数据的概念 ...16 Model操作之select_related以及...

    DataGear数据可视化分析平台

    看板使用原生的HTML网页作为模板,可自由编辑、绑定、异步加载图表,并支持将任意HTML网页导入为看板; 6、丰富的看板API 看板页面内置了大量的页面端API,可用于个性化扩展看板功能。 模块介绍: 1、datagear-...

    overkyll-jekyll-theme:具有ITCSS Sass文件组织,flexbox网格和模块化排版的简单入门主题

    一个异步加载CSS的函数 受高速公路哥特式启发的开源网络字体家族 颜色已针对UI(例如字体,背景,边框等)进行了优化。 逐步增加字体大小-在运河和河流中 安装为宝石主题 Jekyll需要Ruby,因此在开始之前请确保已...

    精通Windows.API-函数、接口、编程实例.pdf

    13.6.5 RECT结构及对RECT的操作 412 13.7 位图操作 414 13.7.1 截取屏幕、保存位图文件 414 13.7.2 将位图显示在界面上 419 13.8 区域(Regions)、路径(Paths)与修剪(Clip)操作 422 13.8.1 区域的创建及...

    精通WindowsAPI 函数 接口 编程实例

    13.6.5 RECT结构及对RECT的操作 412 13.7 位图操作 414 13.7.1 截取屏幕、保存位图文件 414 13.7.2 将位图显示在界面上 419 13.8 区域(Regions)、路径(Paths)与修剪(Clip)操作 422 13.8.1 区域的创建及...

Global site tag (gtag.js) - Google Analytics