ztree如何實(shí)現(xiàn)左邊動(dòng)態(tài)生成樹(shù)右邊為內(nèi)容

這篇文章主要介紹了ztree如何實(shí)現(xiàn)左邊動(dòng)態(tài)生成樹(shù)右邊為內(nèi)容，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

目前成都創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、安陽(yáng)縣網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

zTree 是利用 JQuery 的核心代碼，實(shí)現(xiàn)一套能完成大部分常用功能的 Tree 插件,兼容 IE、FireFox、Chrome 等瀏覽器 在一個(gè)頁(yè)面內(nèi)可同時(shí)生成多個(gè) Tree 實(shí)例 支持 JSON 數(shù)據(jù) 支持一次性靜態(tài)生成 和 Ajax 異步加載 兩種方式 支持多種事件響應(yīng)及反饋 支持 Tree 的節(jié)點(diǎn)移動(dòng)、編輯、刪除 支持任意更換皮膚 / 個(gè)性化圖標(biāo)（依靠css） 。

頁(yè)面原型圖：

功能需求：點(diǎn)擊左邊樹(shù)上的子節(jié)點(diǎn)，像后臺(tái)發(fā)送請(qǐng)求，將請(qǐng)求到的信息展示在右邊的表單里面

前端代碼實(shí)現(xiàn)：

引入css文檔：

" />
" />
" />

引入js文件：

jsp 部分：HTML部分很簡(jiǎn)單，就是相當(dāng)于一個(gè)盛放樹(shù)的div

js 部分：

設(shè)置樹(shù)節(jié)點(diǎn)

var setting = {
    check : {
      enable : false
    },
    view : {
      selectedMulti : false,
    // addHoverDom: addHoverDom,
    // removeHoverDom: removeHoverDom,
    },
    data : {
      key : {
        name : "name"
      },
      simpleData : {
        enable : true,
        idKey : "id",
        pIdKey : "pId"
      }
    },
    edit : {
      enable : true,
      removeTitle : "刪除節(jié)點(diǎn)",
      showRemoveBtn : $("#pdelete").val() == "delete" ? setRemoveBtn : false,
      showRenameBtn : false
    },
    callback : {
      // onRightClick : onRightClick,
      // 單擊事件
      onClick : zTreeOnClick,
      onNodeCreated : zTreeOnNodeCreated,
      beforeRemove : zTreeBeforeRemove,
      onRemove : zTreeOnRemove
    }
  };

初始化，判斷是否展開(kāi)節(jié)點(diǎn)：

var zTreeObj;
  function initTree() {
    $.get(basePath + "/system/organ/getOrganTreeList", function(data) {
      zTreeObj = $.fn.zTree.init($("#organTree"), setting,
          data.returnData.organTree);
      zTreeObj.expandAll(false);
    });
  }
// 給生成的節(jié)點(diǎn)添加class屬性
// 控制節(jié)點(diǎn)是否顯示刪除圖標(biāo)
  function setRemoveBtn(treeId, treeNode) {
    return treeNode.pId != null;
  }
  // 給生成的節(jié)點(diǎn)添加class屬性
  function zTreeOnNodeCreated(event, treeId, treeNode) {
    var str = treeNode.tId + "_span";
    $("#" + str).addClass(treeNode.type);
  }

單擊事件，像后臺(tái)發(fā)起請(qǐng)求，請(qǐng)求右側(cè)的信息

// 單擊事件，向后臺(tái)發(fā)起請(qǐng)求
  function zTreeOnClick(event, treeId, treeNode) {
    if (treeNode.id == "1") {
      return;
    }
    $("#moreinform").show();
    $("#baseinform").hide();
    $(".po_phone_num_r").css("display", "none");
    $(" .po_email_r").css("display", "none");
    if (treeNode.type == "organ") {
      $("#organ").html("部門(mén)名稱(chēng)");
      $("#Partman").show();
      $("#Email").hide();
      $("#sorgan").html("上級(jí)部門(mén)");
      $("#partaddress").html("部門(mén)地址");
      $("#partman").html("部門(mén)負(fù)責(zé)人");
      $("#parttel").html("手機(jī)");
      if (treeNode.id == "1") {
        $("#po").hide();
      } else {
        $("#po").show();
      }
      $.ajax({
        url : basePath + "/system/organ/" + treeNode.id,
        type : "get",
        success : function(data) {
          var organ = data.returnData.organ;
          $("#organId").val(organ.organId);
          $("#sex").hide();
          $("#name").val(organ.organName);
          $("#diz").val(organ.address);
          $("#tel").val(organ.phone);
          $("#manage").val(organ.manager);
          $("#parentOrgan").val(organ.parentId);
        }
      });
    } else {
      $("#po").show();
      $("#organ").html("姓名");
      $("#sex").show();
      $("#Email").show();
      $("#Partman").hide();
      $("#sorgan").html("所屬部門(mén)");
      $("#partaddress").html("職位");
      $("#parttel").html("手機(jī)");
      $.ajax({
        url : basePath + "/system/organ/getStaff/" + treeNode.id,
        type : "get",
        success : function(data) {
          var staff = data.returnData.staff;
          $("#organId").val(staff.id);
          $("#name").val(staff.name);
          $("#diz").val(staff.position);
          $("#tel").val(staff.tel);
          $("#profession").val(staff.sex)
          $("#Email02").val(staff.email);
          $("#parentOrgan").val(staff.organId);
        }
      });
    }
  }

刪除事件：

// 刪除節(jié)點(diǎn)事件
  function zTreeOnRemove(event, treeId, treeNode) {
    if (treeNode.type == "organ") {
      $.ajax({
        url : basePath + "/system/organ/" + treeNode.id,
        type : "DELETE",
        success : function(data) {
          $("#confirmDialog").modal("hide"); // 點(diǎn)擊刪除按鈕，隱藏彈框
          if (customGlobal.ajaxCallback(data)) {
            location.reload();
          }
        }
      });
    } else {
      $.ajax({
        url : basePath + "/system/organ/deleteStaff/" + treeNode.id,
        type : "DELETE",
        success : function(data) {
          $("#confirmDialog").modal("hide"); // 點(diǎn)擊刪除按鈕，隱藏彈框
          if (customGlobal.ajaxCallback(data)) {
            initTree();
          }
        }
      });
    }
  }

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“ztree如何實(shí)現(xiàn)左邊動(dòng)態(tài)生成樹(shù)右邊為內(nèi)容”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

當(dāng)前名稱(chēng)：ztree如何實(shí)現(xiàn)左邊動(dòng)態(tài)生成樹(shù)右邊為內(nèi)容
網(wǎng)頁(yè)鏈接：http://m.jiaotiyi.com/article/iicpeg.html