Ztree 无限分类

最新推荐文章于 2024-06-09 17:13:00 发布

qq_27878777

最新推荐文章于 2024-06-09 17:13:00 发布

阅读量298

点赞数

分类专栏： php 文章标签：分类 jquery 数据挖掘

本文链接：https://blog.csdn.net/qq_27878777/article/details/123131395

版权

php 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

无限分类的节点增删改查

参考 https://www.cnblogs.com/melodygkx/p/10027600.html
拖拽操作 https://www.cnblogs.com/fengch/p/9343144.html

效果图

在这里插入图片描述

<!DOCTYPE html>
<HTML>
<HEAD>
  <TITLE>jQuery自定义编辑的树形菜单代码 - 站长素材</TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <!--排版所需文件-->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">

  <!--Ztree 所需文件-->
  <link rel="stylesheet" href="./static/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
  <script type="text/javascript" src="./static/js/jquery.min.js"></script>
  <script type="text/javascript" src="./static/js/jquery.ztree.core.js"></script>
  <script type="text/javascript" src="./static/js/jquery.ztree.excheck.js"></script>
  <script type="text/javascript" src="./static/js/jquery.ztree.exedit.js"></script>
  <style>
   .col-lg-3{
     background-color: #e6e2eb;
   }
   .col-lg-9{
     background-color: #e6e2eb;
   }

   /*.page-header{*/
   /*  background-color: #e6e2eb;*/
   /*}*/
  </style>
  <SCRIPT type="text/javascript">
      //节点配置
      var setting = {
          view: {
              addHoverDom: addHoverDom, //节点新增
              removeHoverDom: removeHoverDom, //节点删除
              selectedMulti: false
          },
          check: {
              enable: true
          },
          callback: {
              onRename: zTreeOnRename,//修改
              onRemove: zTreeOnRemove,//删除
              onClick: zTreeOnClickRight,  //右键点击
              beforeDrag:beforeDrag,      //拖拽
              beforeDrop: beforeDrop,     //释放
              // onAsyncSuccess : ztreeOnAsyncSuccess  //异步获取数据
          },
          data: {
              simpleData: {
                  enable: true
              }
          },
          edit: {
              enable: true,
              showRemoveBtn: true,
              showRenameBtn: true,
              removeTitle: "删除",
              renameTitle: "修改",
              drag: {
                  isCopy: false,//所有操作都是move
                  isMove: true,
                  prev: true,
                  next: true,
                  inner: false
              }
          }
      };

      //异步获取数据
      // function ztreeOnAsyncSuccess(event, treeId, treeNode, msg) {
      //         var nodes = ztree.getNodes();
      //     	ztree.selectNode(nodes[0].children[0].children[0]); //选中第一个三级子节点
      //     var node = ztree.getNodeByParam("name", "[节点名称]")
      //     ztree.selectNode(node);
      //     ztree.setting.callback.beforeClick( ztree.setting.treeId, node);//调用事件
      // };

    var res =$.ajax({ url: "http://localhost/php/demo1/demo5.php", async: false ,dataType: "json"});
    var zNodes = res.responseJSON.data;
      $(document).ready(function(){
          treeShow(zNodes)
          // $.fn.zTree.init($("#treeDemo"), setting, zNodes);
      });

      //初始化树
      function treeShow(data) {
          zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
          zTreeObj.expandAll(true);
      }

      //新增节点初始化编号
      var newCount = 1;
      //添加元素
      function addHoverDom(treeId, treeNode) {
          var sObj = $("#" + treeNode.tId + "_span");

          if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;

          var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
              + "' title='add node' onfocus='this.blur();'></span>";

          sObj.after(addStr);

          var btn = $("#addBtn_"+treeNode.tId);

          if (btn) btn.bind("click",function(){
              var zTree = $.fn.zTree.getZTreeObj("treeDemo");
              $.ajax({
                  url: "./AddNode.php",
                  data: { ParentId: treeNode.id, name: "new node" + (newCount++) },
                  dataType: 'json',
                  type: "post",
                  success: function (data) {
                      // var res =  JSON.parse(data)
                      console.log(data)
                      if (data.message == "success") {
                          //此方法是js在前段增加节点方法，一定要通过后台返回的id来增加，不然新增的节点会出现节点id为null的问题
                          zTree.addNodes(treeNode, { id: data.id, ParentId: treeNode.id, name: "new node" + (newCount++) });
                      }
                      else {
                          alert("新增节点失败！联系管理员！")
                          // $.messageBox5s('@Resource.Tip', "新增节点失败！联系管理员！");
                      }
                  }
              })
              return false;
          });
      };

      //删除节点
      function zTreeOnRemove(event, treeId, treeNode) {
          {
              $.ajax({
                  url: "./DeleteNode.php",
                  type: "post",
                  dataType:'json',
                  data: { NodeId: treeNode.id },
                  success: function (data) {
                      if (data.message == "success") {
                          alert("删除节点成功！")
                      } else {
                          alert("删除节点失败！联系管理员！")
                          // $.messageBox5s('@Resource.Tip', "删除节点失败！联系管理员！");
                      }
                  }
              })
          }
      }

      //移除元素
      function removeHoverDom(treeId, treeNode) {
          $("#addBtn_" + treeNode.tId).unbind().remove();

      };

      //修改节点
      function zTreeOnRename(event, treeId, treeNode) {
          $.ajax({
              url: "EditNode.php",
              dataType:'json',
              type: "post",
              data: { NodeId: $.trim(treeNode.id), name: treeNode.name },
              success: function (data) {
                  if (data != "success") {
                      alert("修改节点成功！")
                  }else{
                      alert("新增节点失败！联系管理员！")
                  }
              }
          })
      };


      // 树的单击事件
      function zTreeOnClickRight(event, treeId, treeNode) {
          var treeid = treeNode.id;

          $("#hidId").val(treeid);

          $("#ifm").attr("src", "http://localhost/php/demo1/detail.html?id=" + treeid);
      }


      //拖拽排序, 同一级别排序
      //拖拽前执行
      var dragId;
      function beforeDrag(treeId, treeNodes) {
          for (var i=0,l=treeNodes.length; i<l; i++) {
              dragId = treeNodes[i].pId;
              if (treeNodes[i].drag === false) {
                  return false;
              }
          }
          return true;
      }
      //拖拽释放之后执行
      function beforeDrop(treeId, treeNodes, targetNode, moveType) {
          if(targetNode.pId == dragId){
              var data = {id:treeNodes[0].id,targetId:targetNode.id,moveType:moveType};
              var confirmVal = false;
              $.ajax({
                  async: false,
                  type: "post",
                  data:data,
                  dataType:'json',
                  url:"./siblingsort.php ",
                  success: function(json){
                      if(json.message=="success" ){
                          confirmVal = true;
                          alert('操作成功!');
                      } else{
                          alert('亲，操作失败');
                      }
                  },
                  error: function(){
                      alert('亲，网络有点不给力呀！');
                  }
              });
              return confirmVal;
          } else{
              alert('亲，只能进行同级排序！');
              return false;
          }
      }




  </SCRIPT>
</HEAD>

<BODY>

<div class="container container-fiuled" >
  <div class="row">
    <div class="page-header">
      <h1>zTree - bootstrap 风格
        <small>子标题</small>
      </h1>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-3" >
      <button class="shangqiao" style="text-align: left;">新增顶级</button>
        <!--<button id="addtop" style="margin-top: 2rem;">新增顶级</button>-->
    </div>

    <div class="col-lg-9"></div>
  </div>

  <input type="hidden" id="hidId" value=""></input>

    <div class="row">
        <div class="col-lg-3">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
  
          <div class="col-lg-9">
            <iframe id="ifm" src="" height="100%" width="100%" style="background-color: #e6e2eb"></iframe>
        </div>
    </div>
  
</div>


</BODY>
</HTML>







<!--当前界面打开新窗口-->
<script type="text/javascript">
    function openWin(url)
    {
        var name;                           //网页名称，可为空;
        var iWidth=500;                         //弹出窗口的宽度;
        var iHeight=500;                        //弹出窗口的高度;
        //window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
        var iTop = (window.screen.height-30-iHeight)/2;       //获得窗口的垂直位置;
        var iLeft = (window.screen.width-10-iWidth)/2;        //获得窗口的水平位置;
        window.open(url,name,'height='+iHeight+',innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
    }
    $(function() {
        $('.shangqiao').click(function() {
            openWin('./addtop.html');
        });
    });
</script>






<script type="text/javascript">
  //添加顶级
  $('#addtop').on('click',function(){
    $('#showIframe').css('display','block');
      // window.open('./addtop.html')
  })
</script>

qq_27878777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ztree 无限分类

无限分类的节点增删改查参考 https://www.cnblogs.com/melodygkx/p/10027600.html拖拽操作 https://www.cnblogs.com/fengch/p/9343144.html效果图<!DOCTYPE html><HTML><HEAD> <TITLE>jQuery自定义编辑的树形菜单代码 - 站长素材</TITLE> <meta http-equiv="conte
复制链接

扫一扫