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

来源：互联网发布：网络推广是干什么的编辑：程序博客网时间：2024/05/19 18:38

<!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>

   //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>

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>

</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+="    ";
      }
      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;
}

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

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