ztree樹(shù)形結(jié)構(gòu)插件從接口中拿值,并在點(diǎn)擊事件后傳給其他調(diào)用的接口

首先上案例,效果如下:

ztree樹(shù)形傳值.gif

將樹(shù)形節(jié)點(diǎn)中,存儲(chǔ)的參數(shù),點(diǎn)擊以后賦給變量,已起到給下面接口調(diào)用的做用。
下面是全部代碼:

// 申明三個(gè)全局?jǐn)?shù)組用來(lái)綁定第二級(jí)結(jié)構(gòu)樹(shù)中點(diǎn)擊的參數(shù)
  var my_relatedtopos = [];

  //樹(shù)形結(jié)構(gòu)
  var zTree;
  var demoIframe;

  var setting = {
    check: {
      enable: true
    },
    view: {
      dblClickExpand: false,
      showLine: true,
      selectedMulti: false,
      showIcon: true
    },
    data: {
      simpleData: {
        enable: true,
        idKey: "id",
        pIdKey: "pId",
        rootPId: ""
      }
    },
    callback: {
      beforeClick: function (treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree");
        if (treeNode.isParent) {
          zTree.expandNode(treeNode);
          return false;
        } else {
          demoIframe.attr("src", treeNode.file + ".html");
          return true;
        }
      },
//復(fù)選框事件中給全局變量傳值
      onCheck: function (event, treeId, treeNode) {
        console.log(treeNode.id)
//判斷點(diǎn)擊的是不是最下級(jí)節(jié)點(diǎn),如果是則賦值
        if (treeNode.children == undefined) {
//判斷是選中復(fù)選框則賦值
          if (treeNode.checked == true) {
            my_relatedtopos.push(treeNode.id);
            my_relatedname.push(treeNode.name);
            console.log(my_relatedtopos);
//判斷是取消復(fù)選框則去值
          } else if (treeNode.checked == false) {
            remove_val_inarr(my_relatedtopos, treeNode.id);
          }
        }
      }
    }
  };

//樹(shù)形接口數(shù)據(jù)
  var zNodes = [{ id:1, pId:0, name:"普通的父節(jié)點(diǎn)"},
  { id:11, pId:1, name:"葉子節(jié)點(diǎn) - 1"},
  { id:12, pId:1, name:"葉子節(jié)點(diǎn) - 2"},
  { id:13, pId:1, name:"葉子節(jié)點(diǎn) - 3"},
  { id:2, pId:0, name:"NB的父節(jié)點(diǎn)"},
  { id:21, pId:2, name:"葉子節(jié)點(diǎn)2 - 1"},
  { id:22, pId:2, name:"葉子節(jié)點(diǎn)2 - 2"},
  { id:23, pId:2, name:"葉子節(jié)點(diǎn)2 - 3"},
  { id:3, pId:0, name:"郁悶的父節(jié)點(diǎn)"},
  { id:31, pId:3, name:"葉子節(jié)點(diǎn)3 - 1"},
  { id:32, pId:3, name:"葉子節(jié)點(diǎn)3 - 2"},
  { id:33, pId:3, name:"葉子節(jié)點(diǎn)3 - 3"}];
  
  $(document).ready(function () {
    var t = $("#tree");
    t = $.fn.zTree.init(t, setting, zNodes);
    var zTree = $.fn.zTree.getZTreeObj("tree");
     // 默認(rèn)加載完頁(yè)面展開(kāi)樹(shù)形
    zTree.expandAll(true);
  });

.
使用ztree的過(guò)程中,記得需要在html中引入所需要的script,才能實(shí)現(xiàn),代碼中相關(guān)的重要操作已經(jīng)在備注中提示,如果有需要案例的同學(xué),可以留言中留下郵箱。