关闭

js 树 增 减 编辑 --- 整了一个多星期才完成

2062人阅读 评论(0) 收藏 举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../style/default/class_index.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../js/default/public.js"></script>
<script src="../js/default/tree.js"></script>
 <style>

 #tree{ width:600px; }
 #tree div{margin-left:15px; border-bottom:1px solid #CCC; height:30px; line-height:30px; position:relative;}
  #tree div b{ font-weight:100 }
  #tree div b input{margin-top:3px}
  #tree div dl{ position:absolute;right:53px;top:-8px;*top:6px;}
   #tree div dl dt{ text-align:right; }
    #tree div dl dt p{  width:18px; float:right;*float:none ; }
 #tree div dl dt span img{}
  #tree div dl dd{ background: #fff;margin:0; text-align:right;padding:0 7px;border-top:1px solid #ccc;border-left:1px solid #ccc; clear:both;*clear:none; height:25px; display:none;line-height:25px;width:55px}
   #tree div dl dd:hover{ background: #e0eef5;}
  #tree div dl.hover{ box-shadow:3px 3px 3px rgba(0,0,0,0.2);border-right:1px solid #ccc;border-bottom:1px solid #ccc;  z-index:9;}
  #tree div dl.hover dt p{border-left:1px solid #ccc;  border-top:1px solid #CCC}
   #tree div dl.hover dd{ display:block}
 
 #tree div span{ float:right;line-height:30px;padding-top:4px}
  #tree div span.right{float:right; line-height:20px; width:60px; padding-top:7px; text-align:center;border:0px solid #fff; height:20px; overflow:hidden; }
  #tree div span.right img{border:0}
  #tree .treefunc{ *width:110px; *text-align:right;  }
  #tree .treeqss{margin-left:5px;padding:0 8px; display:none; height:21px; line-height:21px; *overflow:hidden;}
 #tree .hasChildren{ cursor: pointer}
  #tree .treeadd{ }
  #tree .treeadd input{margin:0; float:left; margin-left:320px;margin-top:5px}
 #tree .treeadd .treeqss{ display: block;}
 #tree .treeadd .treefunc{}
 img:focus{-moz-outline-style:none;}/*For Firefox*/
 
 .addTreeCategory{ margin:10px}
  .addTreeCategory input{*margin-bottom:-5px;_margin-bottom:-3px}
 .addTreeCategory .treeqss{ height:20px; line-height:20px;padding:3px;margin-left:5px}
 </style>
</head>

<body>

<script type="text/javascript">

   //id pid  sortid name  url  添加到数据库 只要前5个 最后
  d = new dTree();
  d.add(1,0,2,'1-Node 1','example01.html',0,0);
  d.add(2,0,1,'2-Node 2','example01.html',0,0);
  d.add(3,1,2,'3-Node 1.1','example01.html',0,0);
  d.add(4,0,3,'4-Node 3','example01.html',0,0);
  d.add(5,3,1,'5-Node 1.1.1','example01.html',0,0);
  d.add(6,5,1,'6-Node 1.1.1.1','example01.html',0,0);
  d.add(7,0,4,'a-Node 4','example01.html',0,0);
  d.add(8,1,1,'b-Node 1.2','example01.html',0,0);
  d.add(9,0,5,'c-jtj--My Pictures','example01.html' ,0,0);
  d.add(10,9,1,'d-jtj--The trip to Iceland','example01.html',0,0);
  d.add(11,6,1,'e-Mom\'s birthday','example01.html',0,0);
  d.add(12,5,2,'f-Recycle Bin','example01.html',0,0);
  d.add(13,4,1,'g-Recycle Bin','example01.html',0,0);
  d.add(14,2,2,'h-Recycle Bin2','example01.html',0,0);
  d.add(15,2,1,'i-Recycle Bin','example01.html',0,0);
  d.add(16,1,3,'j-Node 16','example01.html',0,0);
  
</script>
 
   

<script>
$(function(){ 

var init = function(){
 d.toWrite();//计算排序,上下移动
 //加载数据到页面
 //alert("D");
 for( var ii in d.newNodes){
   for( var jj in d.newNodes[ii]){
    d.node(d.newNodes[ii][jj]).length > 0 ? $nume ='<font class="hasChildren">+ </font>' : $nume ='<font>&#8250; </font>';
    $div = $('<div id="'+d.sortNodes[d.newNodes[ii][jj]].id+
    '" pid="'+d.sortNodes[d.newNodes[ii][jj]].pid+
    '" sortid="'+d.sortNodes[d.newNodes[ii][jj]].sortId+
    '" moveUp="'+d.sortNodes[d.newNodes[ii][jj]].moveUp+
    '" moveDown="'+d.sortNodes[d.newNodes[ii][jj]].moveDown+
    '"> <span class="right"><a href="javascript:;" id="moveUp"><img src="../images/icon/014.gif" width="16" height="16" /></a> <a href="javascript:;" id="moveDown"><img src="../images/icon/009.gif" width="16" height="16" /></a></span><span class="treefunc"> <a href="javascript:;" id="treEdit">编辑</a><span class="treeqss" id="treCancel">取消</span><span class="treeqss" id="treSubmit">提交</span></span>'+
    d.sortNodes[d.newNodes[ii][jj]].id+
    '--'+d.sortNodes[d.newNodes[ii][jj]].pid+
    '--'+d.sortNodes[d.newNodes[ii][jj]].sortId+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
    d.getLevel(d.newNodes[ii][jj])+
    $nume+"<b>"+d.sortNodes[d.newNodes[ii][jj]].name+
    '</b><dl><dt><p><img src="../images/icon/002.gif" width="16" height="16" /></p></dt><dd><a href="javascript:;" id="treeaddchild" >添加子类</a></dd><dd><a href="javascript:;" id="treedelcatelog" >删除分类</a></dd></dl></div>');
    $div.appendTo($("#tree"));
   }
 }
 
  //判断上下箭头是否显示
 $('#tree').find('div').each(function(index, element) {
  var $this = $(this);
        if($this.attr("moveUp") == 0 )
   $this.find('a#moveUp').hide();
  else
   $this.find('a#moveUp').show();
  if($this.attr("moveDown") == 0 )
   $this.find('a#moveDown').hide();
  else
   $this.find('a#moveDown').show(); 
    });
 
 
  //隐藏所有子类
 $('#tree').children('div').each(function(index, element) {
  if($(this).attr('pid') != 0)
   $(this).hide();
 });
 
 
 
 //鼠标移动上去显示当前色
 $('#tree').children('div').hover(function(){$(this).css('background-color','#e0eef5')},function(){$(this).css('background-color','')})
 
 $('#tree').find('dl').hover(function(){
  $(this).addClass('hover');
  $(this).parent().css('z-index',9);
 },function(){
  $(this).removeClass('hover');
  $(this).parent().css('z-index',0);
 });
 
 
//----------------初始化结束--------------------->>>
 
}

 
init() ;

 
 

 
 
 

 //---------------------------------下面是功能区 ----》
 
 //点击+号展示子类
 $('#tree').find('font.hasChildren').live('click',function(){
  $this = $(this);
  var id = $this.parent().attr('id');
  var childId = d.node(id);
  if($this.text() == '+ '){//展开
   $this.text('- ');
   for(var i in childId){
    $('div#'+childId[i]).fadeIn(); 
   }
  }else{//收起
   $this.text('+ ');
   var childIds = toArr(d.nodes(id));
   for(var i in childIds){
    $font = $('div#'+childIds[i]).children('font');
    $('div#'+childIds[i]).fadeOut();
    if($font.hasClass('hasChildren') && $font.text() == '- '){
      $font.click();
    } 
   }   
  }
 
 }); 
 
 //上下移动绑定事件
 $('#tree').find('span.right > a').live('click',function(){
  $this = $(this);
  $this.blur();//去除图片的虚仙
  $this.parents('div').siblings().css('background-color','');
  $pDiv = $this.parents('div');
  var id = $pDiv.attr('id');
  var pid = $pDiv.attr('pid');
  var upOrDown = $this.attr('id');
  
  
  var moveToId = d.sameLevel(id, pid, upOrDown); //返回当前ID的树跟, 移动到的ID的树跟,   移动到的ID同级ID
  
  var $curTreeId;
  //得到需要移动的id 号和期子id 号 对象
  if(id == moveToId[0]){
   $curTreeId = $('#tree').find("div#"+id);
  }else{
   $curTreeId = $('#tree').find("div#"+id).nextUntil($('#tree').find("div#"+moveToId[0])).andSelf($('#tree').find("div#"+id)).add($('#tree').find("div#"+moveToId[0]));
  }
  //$curTreeId.css('background-color','#CCC');
  
  var $sameLevelId = $('#tree').find("div#"+moveToId[2]);//得到需要被移动的 同级ID号对象
  var bemotoIDsortid = $sameLevelId.attr('sortid');//被移动对象的 排序值
  var bemotoIDmoveUp = $sameLevelId.attr('moveUp');//被移动对象的 往上移动值
  var bemotoIDmoveDown = $sameLevelId.attr('moveDown');//被移动对象 往下移动值
  //console.log(bemotoIDsortid+'---'+bemotoIDmoveUp+'---'+bemotoIDmoveDown);
  
  var $currentLevelId =  $('#tree').find("div#"+id);//得到需要移动的 ID号对象
  var motoIDsortid = $currentLevelId.attr('sortid');//移动对象的 排序值
  var motoIDmoveUp = $currentLevelId.attr('moveUp');//移动对象的 往上移动值
  var motoIDmoveDown = $currentLevelId.attr('moveDown');//移动对象 往下移动值
  //console.log(motoIDsortid+'---'+motoIDmoveUp+'---'+motoIDmoveDown);
  
  var writeDataBaseCurIDSortid, writeDataBaseMoveToIDSortid;//用于更新数据库里的排序

  if(upOrDown == 'moveDown' ){
   $curTreeId.insertAfter($('#tree').find("div#"+moveToId[1]));//往下移动位置
   $currentLevelId.attr('sortid',parseInt(bemotoIDsortid));//更新页面排序
   $sameLevelId.attr('sortid',parseInt(motoIDsortid));//更新页面排序
   //d.sortNodes[id]
   d.sortNodes[id].sortId=parseInt(bemotoIDsortid);//更新JS数据表里的排序
   d.sortNodes[moveToId[2]].sortId=parseInt(motoIDsortid);//更新JS数据表里的排序
   //console.log(d.sortNodes[id]);
   
   writeDataBaseCurIDSortid = parseInt(bemotoIDsortid);//标记写入表的 当前ID的SortId
   writeDataBaseMoveToIDSortid = parseInt(motoIDsortid);//标记写入表的 移动到的ID的SortId
  }else{
   $curTreeId.insertBefore($('#tree').find("div#"+moveToId[1]));//往上移动位置
   $currentLevelId.attr('sortid',parseInt(bemotoIDsortid));
   $sameLevelId.attr('sortid',parseInt(motoIDsortid));
   
   d.sortNodes[id].sortId=parseInt(bemotoIDsortid);
   d.sortNodes[moveToId[2]].sortId=parseInt(motoIDsortid);
   
   writeDataBaseCurIDSortid = parseInt(bemotoIDsortid);
   writeDataBaseMoveToIDSortid = parseInt(motoIDsortid);
   
  }
  $currentLevelId.attr('moveUp',bemotoIDmoveUp);//更新页面里的moveUP值
  $currentLevelId.attr('moveDown',bemotoIDmoveDown);//更新页面里的moveDown值
  $sameLevelId.attr('moveUp',motoIDmoveUp);
  $sameLevelId.attr('moveDown',motoIDmoveDown);
  
  
  //判断上下箭头是否显示
  $('#tree').find('div').each(function(index, element) {
   var $this = $(this);
   if($this.attr("moveUp") == 0 )
    $this.find('a#moveUp').hide();
   else
    $this.find('a#moveUp').show();
    
    
   if($this.attr("moveDown") == 0 )
    $this.find('a#moveDown').hide();
   else
    $this.find('a#moveDown').show(); 
  });
  
 // for(var j in d.sortNodes)
  //console.log(d.sortNodes[j]);

  
  //修改数据库排序 ID的 SORTID
  var datas ={id:[id,moveToId[2]],soriId:[writeDataBaseCurIDSortid,writeDataBaseMoveToIDSortid]};
   $.ajax({
     type:'get',
     cache: false,
     dataType:'html',
     url:'1/sort.html',
     data:datas,
     success: function(data){
      Success(data);//提示成功信息
     },
     error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert(XMLHttpRequest+errorThrown);
     },
     beforeSend: function(XMLHttpRequest){
    $('div.loading').remove();
    $('<div class="loading">正在发送</div>').appendTo('body');
   },
   complete: function(XMLHttpRequest, textStatus){
    $('div.loading').fadeOut();
   }
    });
   
  //console.log( $('#tree').find("div#"+id).attr("sortid"));
  //console.log( $('#tree').find("div#"+moveToId[2]).attr("sortid"));
 });
 
 //编辑
 $('#tree').find('a#treEdit').live('click',function(){
  $this = $(this);
  $this.parent().children('span').show();
  $this.parent().children('a').hide();
  
  var text = $this.parents('div').children('b').text();
   $this.parent().attr('oldText',text);
   $this.parents('div').children('b').html('');
  $('<input name="" type="text" />').appendTo($this.parents('div').children('b'));
  $this.parents('div').children('b').children('input').val(text);
 
 });
 
 //取消编辑
 $('#tree').find('span#treCancel').live('click',function(){
  $this = $(this);
  $this.parent().children('span').hide();
  $this.parent().children('a').show();
  $this.parent().removeAttr('oldText');
  var text = $this.parents('div').children('b').children('input').val();
  $this.parents('div').children('b').children().remove();
  $this.parents('div').children('b').text(text);
 
 });
 
 //提交
 $('#tree').find('span#treSubmit').live('click',function(){
  
  $this=$(this);
  var text = $this.parent().attr('oldText');
  var newText = $this.parents('div').children('b').children().val();
  if(text == newText){
   Error("内容没有修改");
  }else{
   var id = $(this).parents('div').attr('id');
   $.ajax({
      type:'get',
      cache: false,
      dataType:'html',
      url:'1/edit.html',
      data:{id:id,fname:newText},
      success: function(data){
       Success(data);//提示成功信息
      
       $this.parent().children('span').hide();
       $this.parent().children('a').show();
       $this.parents('div').children('b').children().remove();
       $this.parents('div').children('b').text(newText);
       $this.parent().removeAttr('oldText');
      
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
     alert(XMLHttpRequest+errorThrown);
      },
      beforeSend: function(XMLHttpRequest){
     $('div.loading').remove();
     $('<div class="loading">正在发送</div>').appendTo('body');
    },
    complete: function(XMLHttpRequest, textStatus){
     $('div.loading').fadeOut();
    }
     });
  }
 
 });
 
 
 //添加子类
 $('#tree').find('a#treeaddchild').live('click',function(){
  var id = $(this).parents('div').attr('id');
  $('#tree').children('div.treeadd').remove();
  $('<div class="treeadd"><span class="treefunc"><span class="treeqss" id="treecanceladd">取消</span><span class="treeqss" id="addchild" >添加</span></span><b><input type="text" /></b></div>').insertAfter($('#tree').children('div#'+id)).hide().fadeIn();
 }); 
 
 //取消添加子类
 $('#tree').find('span#treecanceladd').live('click',function(){
  
  $(this).parents('div.treeadd').fadeOut(function(){$(this).remove();});
 
 });
 
 //提交添加
 $('#tree').find('span#addchild').live('click',function(){
  $this = $(this);
  var id =  $(this).parents('div').prev().attr('id');//得到父ID 
  var text =  $.trim($(this).parents('div').find('input').val());
  if(text == ''){
   Error("分类内容不能为空"); 
  }else{
   $.ajax({
      type:'get',
      cache: false,
      dataType:'html',
      url:'1/add.html',
      data:{id:id,text:text},
      success: function(data){
      Success(data);//提示成功信息
      $this.prev().click();    
      var thisid = d.sortNodes.length+12//data.id 提交成功后返回的ID
      var thissortId = d.node(id).length +1;//排序ID号
      //this.sortNodes[id] = new Node(id, pid, sortId, name, url, moveUp, moveDown);
      d.add(thisid, id, thissortId, text, '', 0, 0);
      $("#tree").children().remove();
      init();//重新排序
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
     alert(XMLHttpRequest+errorThrown);
      },
      beforeSend: function(XMLHttpRequest){
     $('div.loading').remove();
     $('<div class="loading">正在发送</div>').appendTo('body');
    },
    complete: function(XMLHttpRequest, textStatus){
     $('div.loading').fadeOut();
    }
     });
  }
 });
 
 
 //删除分类 及其子分类
 $('#tree').find('a#treedelcatelog').live('click',function(){
  $this = $(this);
  var id =  $(this).parents('div').attr('id');//得到父ID 
     var childId = toArr(d.nodes(id));
  childId.unshift(parseInt(id));
  for(var j = childId.length-1; j>0;j--){
   for(var k =0; k<j; k++) {
    if(childId[j] < childId[k]){
     var temp;
     temp = childId[j];
     childId[j] = childId[k];
     childId[k] = temp; 
    }
   }
  }
  
 // console.log(childId);
   $.ajax({
      type:'get',
      cache: false,
      dataType:'html',
      url:'1/del.html',
      data:{arrid:childId},
      success: function(data){
      Success(data);//提示成功信息
     // for(var i in d.aNodes)
       //console.log(d.aNodes[i]);
      //从新加载列表
      d.del(childId);
      
     // console.log(d.aNodes);
     // for(var i in d.aNodes)
      // console.log(d.aNodes[i]);
       
      $("#tree").children().remove();
      init();//重新排序 
      
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
     alert(XMLHttpRequest+errorThrown);
      },
      beforeSend: function(XMLHttpRequest){
     $('div.loading').remove();
     $('<div class="loading">正在发送</div>').appendTo('body');
    },
    complete: function(XMLHttpRequest, textStatus){
     $('div.loading').fadeOut();
    }
     });
 });
 
 //添加大类
 $('span#addparentChild').live('click',function(){
   $this = $(this);
  var id =  0;//得到父ID 
  var text =  $.trim($this.prev().val());
  if(text == ''){
   Error("分类内容不能为空"); 
  }else{
   $.ajax({
      type:'get',
      cache: false,
      dataType:'html',
      url:'1/add.html',
      data:{id:id,text:text},
      success: function(data){
      Success(data);//提示成功信息
      $this.prev().click(); //移除添加功能   
      var thisid = d.aNodes.length+12//data.id 提交成功后返回的ID
      var thissortId = d.node(id).length +1;//排序ID号

      d.add(thisid, id, thissortId, text, '', 0, 0);
      $("#tree").children().remove();
      init();//重新排序
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
     alert(XMLHttpRequest+errorThrown);
      },
      beforeSend: function(XMLHttpRequest){
     $('div.loading').remove();
     $('<div class="loading">正在发送</div>').appendTo('body');
    },
    complete: function(XMLHttpRequest, textStatus){
     $('div.loading').fadeOut();
    }
     });
  }
 }); 
  
 
});


</script>

<div class="addTreeCategory">
 <input type="text" /><span class="treeqss" id="addparentChild" >添加大类</span>
</div>

<div id="tree">
  <!-- 加载列表区-->
</div>

</body>
</html>

 

 

 

 

tree.js------------------------------------------------------------------------------------------------------------------------------------------------------------------------

function Node(id, pid, sortId, name, url, moveUp, moveDown) {
 this.id = id;
 this.pid = pid;
 this.sortId = sortId;
 this.name = name;
 this.url = url;
 this.moveUp = moveUp;
 this.moveDown = moveDown;
};
  


function dTree() {
 this.aNodes = []; //存放数据 按序号排列
 this.newNodes = [];//排序后的节点数组 用于输出到页面   递归后的排序
 this.sortNodes = [];//所引的数据  //以ID为数组下票排序  用于快速查找到内容
};


//添加数据
dTree.prototype.add = function(id, pid, sortId, name, url, moveUp, moveDown) {
  this.aNodes[this.aNodes.length] = new Node(id, pid, sortId, name, url, moveUp, moveDown);
  this.sortNodes[id] = new Node(id, pid, sortId, name, url, moveUp, moveDown);
};


//删除数据
dTree.prototype.del = function(array) {

  for(var h in array){
    this.removeIndex(array[h]);
  }
   
 

};

dTree.prototype.removeIndex = function(index ){

    for(var i = 0; i < this.aNodes.length; i++){
        if (this.aNodes[i].id == index) {
   //alert("序号为"+i);
            for(var j = i; j < this.aNodes.length; j++){
                this.aNodes[j] = this.aNodes[j+1];
            }

            this.aNodes.length = this.aNodes.length - 1;
            break;
        }  
    }

}

 

//输出排序
dTree.prototype.toWrite = function(){

 //读出PID为0的一级节点
 var chlids =[];
 
 for( var i in this.aNodes){  
  if(this.aNodes[i].pid == 0) {
   chlids.push(this.aNodes[i].id);
  }
  chlids = this.sortArr(chlids);//一级节点排序按SORTID
  
  //if(chlids.length >1){
   this.moveUpDown(this.sortArr(chlids));//判断一级栏目是否显示上下点击 设置为  0不显示  1 显示
  //}else{
   
  //}
 }
 //排序后递归
 this.newNodes.length = 0;//清空输出到页面的以前的数组
 for(var i in chlids){
   this.newNodes[this.newNodes.length] = toArr(d.nodes(chlids[i]));//toArr把递归后的字符串树数组转换数字数组
   this.newNodes[this.newNodes.length-1].unshift(chlids[i]);
 }
// console.log(this.newNodes);
// for(var s in this.sortNodes)
 //console.log(this.sortNodes[s]);

}

//递归出当前给的节点后所有节点
dTree.prototype.nodes = function(id) {
 var childArray = [];
 var childrenNode = this.node(id);

  for(j in childrenNode) {  
          childArray.push(childrenNode[j],this.nodes(childrenNode[j]));
     }    
 return childArray;
 //console.log(childrenNode.length);
};

//返回同级的树
dTree.prototype.node = function(id) {
 var childs = [];
 
 for(i = 0; i<this.aNodes.length; i++){
  if(this.aNodes[i].pid == id){
   childs.push(this.aNodes[i].id);
  }
 }
 //console.log(this.sortArr(childs));
 
 
 //console.log(this.sortArr(childs)+"---"+this.sortArr(childs).length);
// if(this.sortArr(childs).length >1){
  this.moveUpDown(this.sortArr(childs));//判断一级栏目子栏目是否显示上下点击 设置 为0 不显示  1 显示
  
 //}
 return this.sortArr(childs);
};

//处理是否显示上下排序箭头
dTree.prototype.moveUpDown = function(arr){
 if(arr.length == 2){
  this.sortNodes[arr[0]].moveDown = 1;
  this.sortNodes[arr[0]].moveUp = 0;
  this.sortNodes[arr[1]].moveDown = 0;
  this.sortNodes[arr[1]].moveUp = 1;

 }else if(arr.length == 1){
  this.sortNodes[arr[0]].moveDown = 0;
  this.sortNodes[arr[0]].moveUp = 0;
 }else if(arr.length >=3){
  for(var h in arr){
   this.sortNodes[arr[h]].moveDown = 1;
   this.sortNodes[arr[h]].moveUp = 1; 
  }
  this.sortNodes[arr[0]].moveUp = 0;
  this.sortNodes[arr[arr.length-1]].moveDown = 0;
 }
}

//排序
dTree.prototype.sortArr = function(childs){
 for(var jj=0; jj<childs.length-1;jj++ ){
  for( var ss = jj+1; ss<=childs.length-1; ss++){
   if(this.sortNodes[childs[jj]].sortId > this.sortNodes[childs[ss]].sortId){
     var temp = childs[jj];
     childs[jj] = childs[ss];
     childs[ss] = temp;
   }
  }
 }
 
 return childs;
}

//同级排序 上下 点击后排序
dTree.prototype.sameLevel = function(id, pid, moveUpOrDown){
  var sLevel = this.node(pid);//得到同级的 目录ID
 // console.log(moveUpOrDown);
 
  var moveToId;//移动到的节点的前面后面
  var idSameLevel;
 
  for(var i in sLevel){
   if(id == sLevel[i]){
    if(moveUpOrDown == 'moveDown'){
     moveToId = sLevel[parseInt(i)+1];//如果是点击向下 就可以得到下一个交换的同级 ID 号
    }else{
    moveToId = sLevel[parseInt(i)-1];
    }
   break
   }

  } 
  idSameLevel = moveToId;
  //console.log(moveToId);
 var returnIdCurr = toArr(this.nodes(id))[toArr(this.nodes(id)).length-1]; //得到当前ID一直到他的最后一个子ID的编号  用于排序时一起移动
   if(returnIdCurr == undefined)returnIdCurr = id;  //如果没有子ID  就只把当前ID的值 等于要移动到的值
 //console.log(returnIdCurr);
 if(moveUpOrDown == 'moveDown'){
  var returnIdTo = toArr(this.nodes(moveToId))[toArr(this.nodes(moveToId)).length-1];//得到移到到哪一个DIV下面的id号 用于排序时一起移动,被排序的ID极其子ID一起移动
 }
 else
  var returnIdTo = moveToId; //如果是向下移就只要移到 同级ID的 下一个ID号
 //console.log(returnIdTo);
 if(returnIdTo > 0)moveToId = returnIdTo;
 //console.log(moveToId);
 //console.log(returnIdCurr);
 var moveto = [returnIdCurr, moveToId ,idSameLevel];//当前ID的树跟, 移动到的ID的树跟,   移动到的ID同级ID
 //console.log(moveto);
 return moveto;
}

//获得节点的深度
dTree.prototype.level = function(id){
  var leval = [];
 
  for( var i in this.newNodes){
    for(var j in this.newNodes[i]){
     
     if(this.sortNodes[this.newNodes[i][j]].id == id){
      leval.push(id,this.level(this.sortNodes[this.newNodes[i][j]].pid));
      
     }
   }
  }
  return leval; 
}

//深度打印
dTree.prototype.getLevel = function(id){
    //return str_repeat("|-",count($this->level($cnt)));

     var arr = toArr(this.level(id));
      var s="";
     for(i=0; i< arr.length-1;i++){
      s+="&nbsp;&nbsp;&nbsp;&nbsp;";
      } 
      return s;
 }


//处理递归合并后,里面的空字符串 并转换成数字
function toArr(s){
 var b = s.toString().split(',');
 var arr = [];
 for(var i in b) {
  if(b[i] != ""){
   arr.push(parseInt(b[i]));
  }
 }
 return arr;
}

 

 

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:482766次
    • 积分:3545
    • 等级:
    • 排名:第9633名
    • 原创:94篇
    • 转载:18篇
    • 译文:2篇
    • 评论:83条
    文章分类
    最新评论