完善 无限极分类 的 无刷新编辑

编程语言 2018-12-17 13:41:46 阅读次数: 0

参考网址
http://www.56gee.com/demoshow/8aeb74e423/?tdsourcetag=s_pcqq_aiomsg

最终效果
在这里插入图片描述
我是 如何和 数据库 建立连接的
html 页面中

<!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" />
<meta name="author" content="56gee 39℃" />
<meta name="ComeFrom" content="www.56gee.com" />
<script src="/tpl/default/static/js/jquery-2.2.3.min.js"></script>
<script src="/tpl/default/static/js/bootstrap.js"></script>

<title>Jquery实现无限极树状结构并动态添加增删改等编辑功能——56gee</title>
<style type="text/css">
div, ul, li {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

body {
  background-color: #FFFFFF;
  font-size: 12px;
  margin: 0px;
  padding: 0px;
}

#TreeList {
  background-color: #FFFFFF;
  margin-top: 6px;
  margin-right: auto;
  margin-bottom: 6px;
  margin-left: auto;
  border: 1px solid #5d7b96;
  padding-bottom: 6px;
  padding-left: 6px;
  width: 680px;
}
#TreeList .mouseOver {
  background-color: #FAF3E2;
}

#TreeList .ParentNode {
  line-height: 21px;
  height: 21px;
  margin-top: 2px;
  clear: both;
}

#TreeList .ChildNode {
  background-image: url(../demoImgs/Sys_ModuleIcos.png);
  /*background-image: url('/tpl/default/static/images/duigou.jpg');*/

  background-position: 15px -58px;
  padding-left: 39px;
  line-height: 21px;
  background-repeat: no-repeat;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-top-style: dashed;
  border-right-style: dashed;
  border-bottom-style: dashed;
  border-left-style: dashed;
  border-top-color: #aabdce;
  border-right-color: #aabdce;
  border-bottom-color: #aabdce;
  border-left-color: #aabdce;
  cursor: default;
  clear: both;
  height: 21px;
  color: #314f6a;
}

#TreeList .title {
  float: left;
}
#TreeList .input {
  font-size: 12px;
  line-height: 18px;
  color: #FFF;
  height: 16px;
  background-color: #3F6B8F;
  width: 120px;
  text-align: center;
  margin-top: 1px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #1F3547;
  border-right-color: #FFF;
  border-bottom-color: #FFF;
  border-left-color: #1F3547;
  float: left;
}
#TreeList .editBT {
  float: left;
  overflow: visible;
}
#TreeList .editBT .ok {
  /*background-image: url('/tpl/default/static/images/duigou.jpg');*/
  background-image: url(/tpl/default/static/images/duigou.png);
  
  /*background-image: url(../demoImgs/Sys_ModuleIcos.png);*/
  background-repeat: no-repeat;
  background-position: 0px -89px;
  height: 13px;
  width: 12px;
  float: left;
  margin-left: 3px;
  padding: 0px;
  margin-top: 3px;
  cursor: pointer;
}
#TreeList .editBT .cannel {
  background-image: url(../demoImgs/Sys_ModuleIcos.png);
  background-repeat: no-repeat;
  background-position: 0px -120px;
  float: left;
  height: 13px;
  width: 12px;
  margin-left: 3px;
  padding: 0px;
  margin-top: 3px;
  cursor: pointer;
}

#TreeList .editArea {
  float: right;
  color: #C3C3C3;
  cursor: pointer;
  margin-right: 6px;
}

#TreeList .editArea span {
  margin: 2px;
}

#TreeList .editArea .mouseOver {
  color: #BD4B00;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #C9925A;
  border-right-color: #E6CFBB;
  border-bottom-color: #E6CFBB;
  border-left-color: #C9925A;
  background-color: #FFFFFF;
  margin: 0px;
  padding: 1px;
}

#TreeList .ParentNode .title {
  color: #314f6a;
  cursor: pointer;
  background-image: url(../demoImgs/Sys_ModuleIcos.png);
  background-repeat: no-repeat;
  padding-left: 39px;
}

#TreeList .ParentNode.show .title {
  font-weight: bold;
  background-position: 3px -27px;
}

#TreeList .ParentNode.hidden .title {
  background-position: 3px 4px;
}

#TreeList .ParentNode .editArea {
  color: #999;  
}
#TreeList .ParentNode.show {
  background-color: #d1dfeb;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #5d7b96;
  border-right-color: #5d7b96;
  border-bottom-color: #5d7b96;
  border-left-color: #5d7b96;
}

#TreeList .ParentNode.hidden {
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  border-top-style: dashed;
  border-right-style: dashed;
  border-bottom-style: dashed;
  border-left-style: dashed;
  border-top-color: #aabdce;
  border-right-color: #aabdce;
  border-bottom-color: #aabdce;
  border-left-color: #aabdce;
}

#TreeList .Row {
  clear: both;
  margin-left: 24px;
  background-image: url(../demoImgs/Sys_ModuleIcos2.png);
  background-repeat: repeat-y;
  background-position: 7px 0px;
}
</style>

<script type="text/javascript" src="/js/jquery-1.5.min.js"></script>
<script type="text/javascript">


$(document).ready(function(e) {
  var TreeName = 'TreeList';//树状ID
  var PrentNodeClass = 'ParentNode';//父节点的标识
  var ChildNodeClass = 'ChildNode';//没有下级子节点的标识
  var ChildrenListClass = 'Row';//子节点被包着的外层样式
  var NewNodeName = '新建目录';//默认新建节点的名称
  var Orititle = 'Temptitle';//保存原来名称的属性名称
  
  var TModuleNode,TChildNode,TModuleNodeName;
  TModuleNode = $('#TreeList .'+PrentNodeClass);//顶层节点
  TChildNode = $('.'+ChildNodeClass);
  TModuleNodeName = $('#TreeList .' + PrentNodeClass + ' .title');//顶层节点名称
  TModuleNode.removeClass('show').addClass('hidden');
  if(TModuleNode.next().hasClass(ChildrenListClass)){
    TModuleNode.next().css('display','none');//紧跟的下一个是子节点
  }
  
  //========================编辑区域的HTML源码==============================
  function EditHTML(NewName){
    var str = '<div class="title">' + NewName + '</div>';
    str += '<div class="editBT"></div>';
    str += '<div class="editArea"><span>[编辑]</span><span>[添加同级目录]</span><span>[添加下级目录]</span><span>[删除]</span></div>';
    return str;
  } 
  
  //==========================树状展开收缩的效果============================
  TModuleNodeName.click(function(){
    TModuleNodeName_Click($(this));
  });
  
  //-------------------------------(定义)----------------------------------
  function TModuleNodeName_Click(Obj){
    if(Obj.has('input').length==0){     //非编辑模式下进行
      var tempNode = Obj.parent();
      if(tempNode.hasClass('hidden')){
        tempNode.removeClass('hidden').addClass('show');
        if(tempNode.next().hasClass(ChildrenListClass)){
        tempNode.next().css('display','');
        }
      }
      else{
        tempNode.removeClass('show').addClass('hidden');
        if(tempNode.next().hasClass(ChildrenListClass)){
          tempNode.next().css('display','none');
        }
      }
    }
  } 
  //==========================鼠标经过、离开节点的效果============================  
  with(TModuleNode){
    mouseover(function(){
    TNode_MouseOver($(this));
    });
    
    mouseout(function(){
    TNode_MouseOut($(this));
    });
  }
  
  with(TChildNode){
    mouseover(function(){
    TNode_MouseOver($(this));
    });
    
    mouseout(function(){
    TNode_MouseOut($(this));
    });
  }
  
  //-------------------------------(定义)----------------------------------
  function TNode_MouseOver(Obj){
    if(!(Obj.hasClass('show'))){
      Obj.addClass('mouseOver');
    }
  }
  
  function TNode_MouseOut(Obj){
    Obj.removeClass('mouseOver');
  }
    
  //==========================编辑区操作============================ 
  $('.editArea').each(function(){   //1.编辑，删除什么第一步都先走这个。。$(this) 是指当前的对象，也就是
    EditArea_Event($(this));
  });
  //-------------------------------(定义)----------------------------------
  function EditArea_Event(Obj){    //Obj这个是当前编辑的对象 <input type="text" class="input" value="测试模块">
    var objParent = Obj.parent();   //是父节点
    var objTitle = objParent.find('.title');//节点名称

     //-----------------编辑区的鼠标效果------------------ 
    Obj.children().each(function(){
      with($(this)){
        mouseover(function(){
        $(this).addClass('mouseOver');
        });
        mouseout(function(){
        $(this).removeClass('mouseOver');
        });
      }
    });
     //--------------------第一步，判断是哪个操作----------------------------- 
    Obj.children().each(function(index, element) {
      $(this).click(function(){
      
       // index 是数字，element 是对应的html元素
        if($('#TreeList').has('input').length==0){
        switch(index){
          case 0: EditNode(objTitle,objTitle.html());break;//编辑
          case 1: AddNode(0,objParent,NewNodeRename(0,objTitle));break;//添加同级目录
          case 2: AddNode(1,objParent,NewNodeRename(1,objTitle));break;//添加下级目录
          case 3: DelNode(objParent);break;//删除
        }
       
        }
        else{
        alert('请先取消编辑状态！'); 
        }
      });
    });
  }
  //************************************************************************************************************
  //************************************************************************************************************
  
  //===============================验证编辑结果================================
  function CheckEdititon(pNode,text){
    var SameLevelTags = new Array(PrentNodeClass,ChildNodeClass);
    var SameLevelTag  = '';
    for(var i=0;i<SameLevelTags.length;i++){
      if(pNode.parent().attr('class').indexOf(SameLevelTags[i]) > -1){
        SameLevelTag = SameLevelTags[i];
        break;
      }
    }
    if(SameLevelTag!=''){
      if(text!=''){
      //---------------- 根据节点样式遍历同级节点 --------------------
      var IsExsit = false;
      pNode.parent().parent().children('div').children('.title').each(function(){
        if(pNode.find('input').val()==$(this).html()){
          IsExsit = true;
          alert('抱歉！同级已有相同名称！');
          return false;
        }
      });
      return !IsExsit;
      }
      
      else{
        alert('不能为空!');
        return false;
      }
    }
  }
  
  //=================================自动命名================================
  function NewNodeRename(tag,pNode){
    //---------------- 根据节点样式遍历同级节点 --------------------
    var MaxNum = 0;
    var TObj;
    if(tag==0){//添加同级目录
      if(pNode.attr('id')==TreeName){
        TObj = pNode.children('div').children('.title');
      }
      else{
        TObj = pNode.parent().parent().children('div').children('.title');
      }
       var dataid =TObj.attr('data_id');    // 添加同级时候有
    }
    else{   //添加下级目录
      var aaa = pNode.parent().next().html();

      // if(pNode.parent().next().html()!=null){//原来已有子节点
      if(aaa.indexOf('编辑') != -1){//原来已有子节点
        TObj = pNode.parent().next().children('div').children('.title');
        // alert(1);
        // console.log(TObj);
        
      }
      else{//没有子节点
        // TObj = null;
        // alert(2);
        TObj = pNode.parent().children('div').children('.title');
        // var dataid = TObj.parent().find('.title').attr('data_id');
        // var dataid = TObj.prevObject.find('.title').attr('data_id');
   
        var arr = TObj.prevObject[0];   // html
        var arr1 = $(arr);              // 转化成jquery
        var dataid = arr1.attr('data_id');   // 我这获取的是data_id
        // alert(arr1.attr('data_id'));
      } 
    }
    
    if(TObj){
      TObj.each(function(){
        var CurrStr = $(this).html();
        var temp;
        if(CurrStr.indexOf(NewNodeName)>-1){
          temp = parseInt(CurrStr.replace(NewNodeName,''));
          if(!isNaN(temp)){
            if(!(temp<MaxNum)){
              MaxNum = temp + 1;
            }
          }
          else{
          MaxNum = 1;  
          }
        }
      });
    }

  
    // var dataidxiaji =TObj.parent().find('.title').attr('data_id');   // 取的点击添加同级目录时，同一结构的第一个div的id
    // console.log(dataid);
  
    var TempNewNodeName = NewNodeName;
    if(MaxNum>0){
      TempNewNodeName += MaxNum;
    }
    var array = TempNewNodeName+'=='+dataid;
    // return TempNewNodeName;    // 新建目录名称
    

    return array;    // 新建目录名称加id

  }
  
  //=============================== 第二步是确定编辑还是取消  编辑定义 ================================
  function EditNode(obj,text){

     // alert(obj.attr('data_id'));  // 得到id

    obj.attr(Orititle,text);//将原来的text保存到Orititle中,         text是原来模块操作的名字
    obj.html("<input type='text' class=input value=" + text + ">"); //切换成编辑模式
    obj.parent().find('.editBT').html("<div class=ok title=确定></div><div class=cannel title=取消></div>");
    obj.has('input').children().first().focusEnd();//聚焦到编辑框内

  // 点击确定点击取消，触发的操作
    obj.parent().find('.ok').click(function(){
      Edit_OK(obj); 
    });
    
    obj.parent().find('.cannel').click(function(){
      Edit_Cannel(obj);
    });
  }
  
 
  
  //=============================== 添加节点 目录================================
  function AddNode(tag,obj,NameStr){
    arr = NameStr.split("==");
    NameStr = arr[0];       // 这就是 自动命名的  新建目录，
    id = arr[1];            // 我获取的是同一级的第一个id,  
    // alert('添加节点');
    // 现在添加同级是获取的同级的第一个id,添加下级的是获取的当前id
    
    if(tag==0 || tag==1){
      var newNode = $('<div class=' + ChildNodeClass + '></div>');

      if(tag==0){ //添加同级目录

        newNode.appendTo(obj.parent());
      }
      else{     //添加下级目录

        if(!(obj.next()) || (obj.next().attr('class')!=ChildrenListClass)){//最后一个节点和class!=ChildrenListClass都表示没有子节点
          var ChildrenList = $('<div class=' + ChildrenListClass + '></div>');
          ChildrenList.insertAfter(obj);//将子节点的”外壳“加入到对象后面
          newNode.appendTo(ChildrenList);//将子节点加入到”外壳“内
        }
        else{
          newNode.appendTo(obj.next());//将子节点加入到”外壳“内
        }
        obj.attr('class',PrentNodeClass + ' show');//激活父节点展开状态模式
        obj.next().css('display','');//展开子节点列表
      }
     
      with(newNode){
        html(EditHTML(NameStr)); // 这是用来显示编辑框的好像
        //---------------------------------动态添加事件-------------------------------
        mouseover(function(){
        TNode_MouseOver($(this));
        });
        
        mouseout(function(){
        TNode_MouseOut($(this));
        });
        
        find('.title').click(function(){
          TModuleNodeName_Click($(this));
        });
        
        find('.editArea').each(function(){
          EditArea_Event($(this));
        });
        //---------------------------------------------------------------------------
      }
  
      // 点击添加目录时，输入的名字就是传过去的
      // 调的 EditNode 方法，走编辑状态，这是第一种方法，把默认名字存进数据库再点击编辑进行修改新目录名称
      // EditNode(newNode.find('.title'),newNode.find('.title').html());//添加后自动切换到编辑状态

	// 这是第二种方法，直接把用户输入的目录名存进数据库
      var obj2 = newNode.find('.title');
      var text = newNode.find('.title').html();
      obj2.attr(Orititle,text);//将原来的text保存到Orititle中,         text是原来模块操作的名字
      obj2.html("<input type='text' class=input value=" + text + ">"); //切换成编辑模式
      obj2.parent().find('.editBT').html("<div class=ok title=确定></div><div class=cannel title=取消></div>");
      obj2.has('input').children().first().focusEnd();//聚焦到编辑框内
      console.log(obj2);
     // alert(obj.attr('data_id'));  // 得到id

      // 点击确定点击取消，触发的操作
      obj2.parent().find('.ok').click(function(){
          // alert('ok');
          var tempText = obj2.has('input').children().first().val();   // 文本内容
          // var id = obj.attr('data_id');   // 编辑操作的id
          // alert(tempText);
          $.ajax({
            url:'ewm-xuqiu_add333',
            type:'POST',
            data:{
                pid : id,        // 根据判断tag来决定传过来的id做父id还是它是子id       
                name: tempText,   // 默认名字  新建目录
                tag:tag,      // 判断是添加同级目录还是下级目录
            },
            dataType:'json',
            success:function(data){
                // console.log(data);
                if(data.code == '3'){
                     alert('添加分类成功');
                     // alert('data.id');
                }
                if(data.code == '4'){
                     alert('添加分类失败');
                }
                // location.reload(true);   
            },
            error:function(data){
                // console.log(data);
               // alert('添加失败');              
            }
        })  


        // 原先的js样式  
        if(CheckEdititon(obj2,tempText)){
          obj2.html(tempText);
        }
        else{
          obj2.html(obj2.attr(Orititle));  
        }
        obj2.removeAttr(Orititle);
        obj2.parent().find('.editBT').html('');


        });


        
        obj.parent().find('.cannel').click(function(){
          // Edit_Cannel(obj);
        });
  

    }

  }
 
 
  //=============================== [删除]按钮 ================================
  function DelNode(obj){    // 这个obj 是editarea的父节点    editarea父节点的find 发现 class等于title的标签，然后在取在这个标签的data_id 属性
    
    // console.log(obj);
    if(confirm('确定要删除吗？')){
      var objParent = obj.parent();
      var objChildren = obj.next('.Row');
      // var id = objParent.attr('data_id');
      var id = obj.find('.title').attr('data_id');  //节点名称
      $.ajax({
            url:'ewm-xuqiu_delete333',
            type:'POST',
            data:{
                id : id,
            },
            dataType:'json',
            success:function(data){
                // alert(111);
                console.log(data);
                if(data.code == '3'){
                     alert('删除分类成功');
                }
                if(data.code == '4'){
                     alert('删除分类失败');
                }
                if(data.code == '5'){
                     alert('模块下操作不能空，不能删除');
                }
                // location.reload(true);
            },
            error:function(data){
                alert(222);
                console.log(data);
            }
        }) 

      // 原来js样式
      obj.remove();//基于Jquery是利用析构函数，所以“删除”后其相关属性仍然存在，除非针对ID来操作就可以彻底删除
      objChildren.remove();//删除对象所有子节点
      ChangeParent(objParent);

    }
  }
  
  
  //===============================第3步 确定编辑操作  编辑[确定]按钮 ================================
  function Edit_OK(obj){
    var tempText = obj.has('input').children().first().val();   // 文本内容
    var id = obj.attr('data_id');   // 编辑操作的id
            
    $.ajax({
        url:'ewm-xuqiu_update333',
        type:'POST',
        data:{
            name : tempText,
            id : id,
        },
        dataType:'json',
        success:function(data){
            // console.log(data);
            if(data.code == '3'){
                 // alert('编辑成功');
            }
            if(data.code == '4'){
                 alert('编辑失败');
            }
            // location.reload(true);
        },
        error:function(data){
           alert('编辑失败');
        }
    })  

    // 原先的js样式  
    if(CheckEdititon(obj,tempText)){
      obj.html(tempText);
    }
    else{
      obj.html(obj.attr(Orititle));  
    }
    obj.removeAttr(Orititle);
    obj.parent().find('.editBT').html('');

  }
  
 
  //=============================== 编辑[取消]按钮 ================================
  function Edit_Cannel(obj){
    obj.html(obj.attr(Orititle));
    obj.removeAttr(Orititle);
    obj.parent().find('.editBT').html('');
  }
  
  //=============================== 改变父节点样式 ================================
  function ChangeParent(obj){
    if(obj.find('.ChildNode').length==0){//没有子节点
      obj.prev('.'+PrentNodeClass).attr('class',ChildNodeClass);
      obj.remove();
    }
  }
  
  //************************************************************************************************************
  //************************************************************************************************************
  //************************************************************************************************************
  
  //=============================== 设置聚焦并使光标设置在文字最后 ================================
  $.fn.setCursorPosition = function(position){  
    if(this.lengh == 0) return this;  
    return $(this).setSelection(position, position);  
  }  
    
  $.fn.setSelection = function(selectionStart, selectionEnd) {  
    if(this.lengh == 0) return this;  
    input = this[0];  
    
    if (input.createTextRange) {
      var range = input.createTextRange();  
      range.collapse(true); 
      range.moveEnd('character', selectionEnd);  
      range.moveStart('character', selectionStart);  
      range.select(); 
    } else if (input.setSelectionRange) {  
      input.focus(); 
      input.setSelectionRange(selectionStart, selectionEnd);  
    }  
    return this;  
  }  
    
  $.fn.focusEnd = function(){
    this.setCursorPosition(this.val().length);  
  }
  
  //=========================================================================================
  
});
</script>

<link href="/DemoShow/styles/public.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="TopAD"></div>
<div id="TopADCode" style="display:none">
  <script type="text/javascript" >BAIDU_CLB_SLOT_ID = "772619";</script>
  <script type="text/javascript" src="http://cbjs.baidu.com/js/o.js"></script>
</div>
<script type="text/javascript">
if(document.getElementById('TopAD')!=null){
  document.getElementById('TopAD').innerHTML = '<div class="SearchEngine_AD1">' + document.getElementById('TopADCode').innerHTML + '</div>';
}
</script>
<div id="AD_B"></div>

<div id="TreeList">
<{foreach $commlist as $data}>

  <{foreach $data.children as $child}>
    <div class="ParentNode hidden">
      <!-- <div class="title" id="dataid" data_id="<{$child.id}>"><{$child.name}></div> -->
      <div class="title"  data_id="<{$child.id}>"><{$child.name}></div>
      <div class="editBT"></div>
      <div class="editArea" id="<{$child.id}>"><span>[编辑]</span><span>[添加同级目录]</span><span>[添加下级目录]</span><span>[删除]</span></div>
    </div>
   
    <div class="Row" style="display:none">
    <{foreach $child.children as $grandson}>
      <div class="ParentNode">
        <div class="title"  data_id="<{$grandson.id}>"><{$grandson.name}></div>
        <div class="editBT"></div>
        <div class="editArea" id="<{$grandson.id}>"><span >[编辑]</span><span>[添加同级目录]</span><span>[添加下级目录]</span><span>[删除]</span></div>
      </div>

            <div class="Row" style="display:none">
      <{foreach $grandson.children as $grandsonson}>
              <div class="ChildNode">
                <div class="title"  data_id="<{$grandsonson.id}>"><{$grandsonson.name}></div>
                <div class="editBT"></div>
                <div class="editArea" id="<{$grandsonson.id}>"><span>[编辑]</span><span>[添加同级目录]</span><span>[添加下级目录]</span><span>[删除]</span></div>
              </div> 
      <{/foreach}>             
            </div>
        
      <{/foreach}>
    </div>
<{/foreach}>

<{/foreach}>
  </div>


<div id="AD_T"></div>
<div id="ADCode_B" style="display:none">
  <script src="/js/sogouad/AD_468-15.js" type="text/javascript"></script>
  <script language='JavaScript' type='text/javascript' src='http://images.sohu.com/cs/jsfile/js/l.js'></script>
</div>

<div id="ADCode_T" style="display:none">
  <script type="text/javascript" >BAIDU_CLB_SLOT_ID = "772426";</script>
  <script type="text/javascript" src="http://cbjs.baidu.com/js/o.js"></script>
</div>
<script type="text/javascript" >BAIDU_CLB_SLOT_ID = "772399";</script>
<script type="text/javascript" src="http://cbjs.baidu.com/js/o.js"></script>
<script type="text/javascript" src="/js/ad_alliance/ad_alliance.js"></script>

</body>
</html>

第2种页面，以 - 格式展示下级目录

         请选择父级分类：<select name="pid" size="20">

         <option value="0">根分类</option>

         {volist name="alist" id="vo"}

           <option value="{$vo['id']}">
	// 统计有几个 - 页面就显示几个 —
           {:str_repeat("__",$vo['count']-2)}

           {$vo['name']}

           </option>

         {/volist}

         </select><br />

         新的分类名称：<input type="text" name="name" /><br />

         <input type="submit" value="添加分类" />

  </form>

控制器中

第一种方法，以  -  递进格式展示的html页面
public function xuqiu()
{
    $list = K::M('code/xuqiu')->chaxun555();
    // var_dump($result);
    foreach($list as $key=>$value){
        $list[$key]['count']=count(explode('-',$value['bpath']));
    }
    // die;
    $this->pagedata['alist'] = $list;
    $this->tmpl = 'xuqiu_add.html';
}

public function xuqiu_list()
{
    $list = K::M('code/xuqiu')->chaxun555();
    foreach($list as $key=>$value){
        $list[$key]['count']=count(explode('-',$value['bpath']));
    }
     $this->pagedata['alist'] = $list;
    $this->tmpl = 'xuqiu_list.html';
}

public function xuqiu_add()
{
    echo '<pre>';
    $pid = $this->GP('pid');    // pid是新添加数据的id
    $name = $this->GP('name');
    // 执行添加操作
    $list = K::M('code/xuqiu')->add555($pid,$name);
    if($list)
    {
        $this->err->add('添加分类成功', 201);
    }else{
        $this->err->add('添加分类失败', 201);
    }
    
    // var_dump($list);
    // die;
    $this->tmpl = 'xuqiu_add.html';
}

// 应该是 ajax 删除
public function xuqiu_delete()
{
    echo '<pre>';
    $url = $this->request['uri'];    
    $url = explode('=',$url);
    $id = $url[1];
    $result = K::M('code/xuqiu')->chaxun222('pid',$id);
    // var_dump($result);
    // die;
    if($result)
    {
         $this->err->add('模块下操作不能空，不能删除', 201);
    }else{
         $list = K::M('code/xuqiu')->delete('id',$id);
        // 设置有子类的情况下不能删除
        if($list)
        {
            $this->err->add('删除分类成功', 201);
        }else{
            $this->err->add('删除分类失败', 201);
        }
    }
    $this->tmpl = 'xuqiu_list222.html';
}


// 第2 种方法，是  栏目层级的展示页面
public function xuqiu333()
{
    echo '<pre>';
    $list = K::M('code/xuqiu')->chaxun555();
    // $a = $this->array2level($list); // 这个有level字段
    $b = $this->arr2tree($list);    // 展示出树级结构，chilren,遍历显示在页面

    $this->pagedata['commlist'] = $b;
    $this->tmpl = 'xuqiu_list222.html';
    
}

public function xuqiu_add222()
{
    // echo '<pre>';
    $name = $this->GP('name');
    $pid = $this->GP('id');
    $list = K::M('code/xuqiu')->addfenlei($pid,$name);
    // 返回json数据给前台
    $returnData = json_encode($list,JSON_UNESCAPED_UNICODE); 
    // return $returnData;
    echo $returnData;   // 只有echo才打印信息，如果是return就返回信息为空，格式正确，但是走error
    exit;    
}

public function xuqiu_delete222()
{
    // echo '<pre>';
    $id = $this->GP('id');
    $a = K::M('code/xuqiu')->deletefenlei($id);
    $returnData = json_encode($a,JSON_UNESCAPED_UNICODE); 
    echo $returnData;   
    exit;    
}

// level 数据的展示
function array2level($array, $pid = 0, $level = 1) 
{ 
    static $list = []; 
    foreach ($array as $v) 
    { 
        if ($v['pid'] == $pid) 
        { 
            $v['level'] = $level;
            $list[] = $v; 
            $this->array2level($array, $v['id'], $level + 1);
         }
     } 
return $list; 
}

// tree 数据的展示
function arr2tree($tree, $rootId = 0,$level=1) 
{ 
    $return = array(); 
    foreach($tree as $leaf) 
    { 
        if($leaf['pid'] == $rootId) 
        { 
            $leaf["level"] = $level; 
            foreach($tree as $subleaf) 
            { 
                if($subleaf['pid'] == $leaf['id']) 
                { 
                    $leaf['children'] = $this->arr2tree($tree, $leaf['id'],$level+1); break; 
                } 
            } 
            $return[] = $leaf; 
        } 
    } 
    return $return;
 }

// 第三种
// 把增加同级目录，下级目录修改成，输入名字之后就存数据库

public function xuqiu_update333()
{
    // echo '<pre>';
    $name = $this->GP('name');
    $pid = $this->GP('id');
    $data['name'] = $name;
    $list = K::M('code/xuqiu')->update($pid,$data,true);
    if($list)
    {
        $returnData = ['code'=>3, 'info'=>'编辑成功'];
    }else{
        $returnData = ['code'=>4, 'info'=>'编辑失败'];
    }
    $returnData = json_encode($returnData,JSON_UNESCAPED_UNICODE); 
    echo $returnData;   // 只有echo才打印信息，如果是return就返回信息为空，格式正确，但是走error
    exit;
    // die;
     
}


public function xuqiu_delete333()
{
    // echo '<pre>';
    $id = $this->GP('id');
    // var_dump($id);
    // die;
    $a = K::M('code/xuqiu')->deletefenlei($id);
    $returnData = json_encode($a,JSON_UNESCAPED_UNICODE); 
    echo $returnData;   
    exit;    
}


public function xuqiu_add333()
{
    // 添加同级目录，就是添加id 的同pid =pid
    // 添加下级目录，就是pid=id
    // 添加同级还是下级 tag=0 添加同级 tag=1 添加下级
  
    echo '<pre>';
    $pid = $this->GP('pid');    // pid是新添加数据的id,当添加的是下级目录时，提示$pid没有定义
    $name = $this->GP('name');
    $tag = $this->GP('tag');
    var_dump($pid);
    // 执行添加操作
    $list = K::M('code/xuqiu')->add666($pid,$name,$tag);
    // die;
    // var_dump($pid);
    // var_dump($name);
    // var_dump($tag);
    // die;
    $returnData = json_encode($list,JSON_UNESCAPED_UNICODE); 
    echo $returnData;   // 只有echo才打印信息，如果是return就返回信息为空，格式正确，但是走error
    exit;
}

猜你喜欢

转载自blog.csdn.net/qq_39835505/article/details/85047081
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022