`
魏祖清
  • 浏览: 180278 次
  • 性别: 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
分享到:
评论
发表评论

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

相关推荐

    JS 动态树 异步加载树 xloadtree WebFXLoadTree

    标题 "JS 动态树 异步加载树 xloadtree WebFXLoadTree" 指的是在JavaScript中实现的一种特定的树形结构组件,它具备动态加载和异步数据获取的功能。这种技术常用于构建大型数据集的层级展示,如文件系统、组织结构或...

    ztree+dwr实现的异步加载树形菜单

    在IT行业中,构建用户友好的界面是至关重要的,特别是对于数据层次结构的展示,树形菜单扮演了...在实际项目中,这种技术组合广泛应用在权限管理、文件系统、组织结构等场景,充分展示了现代Web应用的灵活性和互动性。

    dtree+ajax异步加载树

    **dtree+ajax异步加载树详解** 在Web开发中,数据展示往往涉及到大量的层级结构,如文件系统、组织架构等。dtree是一款基于JavaScript的树形控件,它能够帮助开发者实现动态、交互式的树状菜单。而Ajax...

    jquery easyui tree 树形列表节点异步加载

    在本文中,我们将深入探讨jQuery EasyUI中的Tree组件以及如何实现树形列表节点的异步加载。EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,包括我们这里关注的Tree组件。异步加载是提升用户体验的...

    jQuery插件TreeView异步加载树

    TreeView是一种常见的UI元素,它通常用于展示层次结构的数据,如文件系统、组织结构等。在网页应用中,TreeView插件能够以树形结构呈现数据,用户可以通过展开和折叠节点来探索内容。异步加载树则是在用户需要时才从...

    extjs tree 异步加载树型

    在 Web 开发中,它经常被用来展示目录结构、组织架构或者复杂的分类数据。异步加载树型是 ExtJS Tree 的一个重要特性,允许只在需要时动态加载子节点,从而提高页面的加载速度和用户体验。 异步加载通常通过 AJAX ...

    zTree异步加载Demo

    【zTree异步加载Demo】是一个基于SpringMVC框架和MySQL数据库实现的示例,它展示了如何使用zTree这一流行的JavaScript树形插件进行异步数据加载。zTree是一款功能强大的jQuery插件,广泛用于构建多级目录结构,如...

    ASP.NET treeView异步加载节点

    ASP.NET的TreeView控件是一个非常有用的UI元素,用于呈现层次结构的数据,比如文件系统、组织结构或数据库中的数据。在一些场景下,由于数据量大或者为了提高用户体验,我们可能会选择异步加载(Ajax)的方式来加载...

    ztree异步加载demo(有说明文档)

    【标题】"ztree异步加载demo(有说明文档)" 涉及到的知识点主要围绕着ZTree,这是一个非常流行的JavaScript组件,主要用于构建树形结构的界面,尤其适用于网站导航、文件目录管理和组织结构展示等场景。异步加载是...

    react 异步加载例子

    总结,这个React异步加载示例涵盖了状态管理、事件监听、Ajax请求和自动化构建等核心概念,同时展示了如何组织一个React项目的文件结构。通过理解和实践这些知识点,开发者能够创建出更高效、用户体验更好的React...

    jquery 异步treeTable树形插件

    《jQuery异步treeTable...3. 灵活的数据源:可以对接各种后端数据接口,如JSON、Ajax等,实现异步加载。 二、基本使用步骤 1. 引入依赖库:在HTML文件中引入jQuery库和treeTable插件的JavaScript及CSS文件。 ```html ...

    Requirejs异步加载Dojo1.6

    本文将深入探讨如何使用Requirejs实现对Dojo 1.6版本的异步加载,并在Tomcat 6服务器环境下运行。 ### Requirejs:模块加载器 Requirejs是由James Burke创建的一个JavaScript库,它的主要功能是解决JavaScript的...

    树及异步树

    在计算机科学中,树是一种非常重要的数据结构,它模拟了现实世界中的层次关系,广泛应用于文件系统、数据库索引、图形结构以及JavaScript等编程语言中。"树及异步树"这一主题涉及到如何在JavaScript(JS)环境中构建...

    在.net下画组织结构树

    `TreeView`控件允许你添加、删除和操作节点,以及自定义节点的显示样式,非常适合构建组织结构树。 2. **数据绑定**: 要填充`TreeView`控件,通常需要将数据源(如数据库中的员工信息)与控件绑定。你可以使用`...

    easyui 异步树

    1. **异步加载树结构**: 异步树结构主要应用于那些数据量大或者层级深的场景,避免一次性加载所有节点导致页面卡顿。EasyUI 提供了两种主要的异步树组件:`combotree` 和 `treegrid`。 2. **Combotree(树形...

    使用递归方式的easyUI Servlet 异步加载树

    在本场景中,我们将探讨如何利用递归、easyUI和Servlet来实现异步加载树形结构的数据。EasyUI是一个基于jQuery的前端框架,提供丰富的组件,包括我们这里提到的树形控件。而Servlet是Java Web开发中的服务器端组件,...

    树结构zTree

    zTree提供了丰富的API接口,用于在程序中动态操作树结构,如: - `treeObj.selectNode(node, isSilent)`:选择或取消选择指定节点。 - `treeObj.expandNode(node, expandFlag, isSilent, isAnimate)`:展开或折叠...

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

    在组织架构图的应用场景中,由于组织结构可能包含许多层级和节点,一次性加载所有数据可能会导致页面响应慢,用户体验下降。因此,我们通常选择只加载当前视图所需的数据,其余数据在用户滚动或展开节点时按需加载。...

    安卓多级树形列表(最大同时异步加载60万条数据)

    这个"安卓多级树形列表(最大同时异步加载60万条数据)"项目针对这一问题进行了深度优化,提供了强大的功能和良好的用户体验。 首先,我们要理解多级树形列表的核心原理。在Android中,这种列表通常通过递归实现,每...

Global site tag (gtag.js) - Google Analytics