ztree树形结构插件点击,复选框事件给传值

ztree树形结构插件从接口中拿值,并在点击事件后传给其他调用的接口

首先上案例,效果如下:

ztree树形传值.gif

将树形节点中,存储的参数,点击以后赋给变量,已起到给下面接口调用的做用。
下面是全部代码:

// 申明三个全局数组用来绑定第二级结构树中点击的参数
  var my_relatedtopos = [];

  //树形结构
  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;
        }
      },
//复选框事件中给全局变量传值
      onCheck: function (event, treeId, treeNode) {
        console.log(treeNode.id)
//判断点击的是不是最下级节点,如果是则赋值
        if (treeNode.children == undefined) {
//判断是选中复选框则赋值
          if (treeNode.checked == true) {
            my_relatedtopos.push(treeNode.id);
            my_relatedname.push(treeNode.name);
            console.log(my_relatedtopos);
//判断是取消复选框则去值
          } else if (treeNode.checked == false) {
            remove_val_inarr(my_relatedtopos, treeNode.id);
          }
        }
      }
    }
  };

//树形接口数据
  var zNodes = [{ id:1, pId:0, name:"普通的父节点"},
  { id:11, pId:1, name:"叶子节点 - 1"},
  { id:12, pId:1, name:"叶子节点 - 2"},
  { id:13, pId:1, name:"叶子节点 - 3"},
  { id:2, pId:0, name:"NB的父节点"},
  { id:21, pId:2, name:"叶子节点2 - 1"},
  { id:22, pId:2, name:"叶子节点2 - 2"},
  { id:23, pId:2, name:"叶子节点2 - 3"},
  { id:3, pId:0, name:"郁闷的父节点"},
  { id:31, pId:3, name:"叶子节点3 - 1"},
  { id:32, pId:3, name:"叶子节点3 - 2"},
  { id:33, pId:3, name:"叶子节点3 - 3"}];
  
  $(document).ready(function () {
    var t = $("#tree");
    t = $.fn.zTree.init(t, setting, zNodes);
    var zTree = $.fn.zTree.getZTreeObj("tree");
     // 默认加载完页面展开树形
    zTree.expandAll(true);
  });

.
使用ztree的过程中,记得需要在html中引入所需要的script,才能实现,代码中相关的重要操作已经在备注中提示,如果有需要案例的同学,可以留言中留下邮箱。