ztree实现可点击的树形下拉列表

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

1、前言

ztree是一个强大的基于jQuery实现的树形插件，基本上包含了所有的开发场景。功能强大，配置灵活。本次为大家介绍下，实现如下效果的可点击的树形下列表。

如上图所示，点击左侧的树形列表的选项，右侧的table会根据左侧的点击值随之变化。

2、html页面中定义dom节点

规定好div的样式，以及两个树形列表。

<div class="ZTreeQuery">
    <ul id="Ztree1" class="ztree"></ul>
    <ul id="Ztree2" class="ztree"></ul>
</div>

3、JS代码

在对应JS文件里，加入ztree下拉列表的初始化以及点击操作。

var socket;
var qCompany;
var qDesk;
var qBook;

/**
 * ztree的配置信息
 */
var setting = {
 check: {
  //节点是否可被点击
  enable: false
 },
 data: {
  simpleData: {
   enable: true
  }
 },
 view: {
  //定义ztree的CSS样式函数
  fontCss :getFont,
  nameIsHTML :true
 },
 callback : {
  //定义节点被点击后的回调函数
  onClick: selectPoint
 }
};

/**
 * ZTree相关函数-用于设置Ztree的CSS样式
 * @param treeId
 * @param node
 * @returns
 */
function getFont(treeId, node) {
    return node.font ? node.font : {};
};

$(function(){
 initZtree1();
});

/**
 * 定义ztree点击节点的事件
 */
function selectPoint(event, treeId, treeNode){
 if ("" != treeNode.id){
  if ('cdb' == treeNode.flag){
   var queryCompany = '';
   var queryDesk = '';
   var queryBook = '';
   if (1 == treeNode.level){//法人
    qCompany = treeNode.code;
    queryCompany = qCompany;
   }else if(2 == treeNode.level){//交易处室
    qCompany = treeNode.getParentNode().code;
    queryCompany = qCompany;
    qDesk = treeNode.code;
    queryDesk = qDesk;
   }else if(3 == treeNode.level){//账户
    qDesk = treeNode.getParentNode().code;
    queryDesk = qDesk;
    qCompany = treeNode.getParentNode().getParentNode().code;
    queryCompany = qCompany;
    qBook = treeNode.code;
    queryBook = qBook;
   }
   initZtree2(queryCompany, queryDesk, queryBook);
  }else if("T1" != treeNode.id && 'cdbc' == treeNode.flag){
   treeNode.fo_curves = K.field.value($("input[name=fo_curves]"));
   treeNode.search_date = SYSDATE;
   changeQueryParam(treeNode);
  }
 }
};

/**
 * 加载货币对
 */
var initZtree2 = function(queryCompany, queryDesk, queryBook){
 //查询数据获取分类数据
 var returnData = [];
 Util.ajaxRequest({
  url : 'queryCCYPair.json',
  params : {'company' : queryCompany, 'desk' : queryDesk, 'book' : queryBook},
  async : false,
  afterSuccess : function(json){
   if (json.returndata.ccyPairs.length > 0) {
    returnData = json.returndata.ccyPairs;
   }
  }
 }, false);
 if (returnData.length == 0){
  return;
 }
 //定义页面根节点
 var z_nodes = [{id:"T1", pId: 0, name:"Totals"}];
 var p_nodes = z_nodes.length;
 for(var data = 0; data < returnData.length; data++){
  var p_2nodes = {};
  //二级节点-货币对
  p_2nodes = {
      id : data + 1,
   pId: "T1",
   name: returnData[data],
   company: qCompany,
   desk: qDesk,
   book: qBook,
   ccy_pair : returnData[data],
   flag: 'cdbc'
  };
  z_nodes[p_nodes] = p_2nodes;
  p_nodes++;
 } 
 $.fn.zTree.init($("#Ztree2"), setting, z_nodes);
};

/**
 * 初始化法人-交易处室-账户树
 * @returns
 */
var initZtree1 = function(){
 //查询数据获取分类数据
 var returnData = [];
 Util.ajaxQuery({
  exeid : 'M8OrgHierarchyDefinitionES003',
  service_url : Cloud.UNDERLYING,
  async : false,
  afterSuccess : function(json){
   if (json.rows.length >0) {
    returnData = json.rows;
   }
  }
 }, false);
 var treeData = [];
 var p_nodes = 0;
 for(var data in returnData){
  var p_2nodes = {};
  if (returnData[data].dimension_level == 1){
   //一级节点-集团
   p_2nodes = {
     id: returnData[data].id,
     pId: 0,
     name: '集团 ' + returnData[data].subject_name
   };
  }else if (returnData[data].dimension_level == 2){
   //二级节点-法人
   p_2nodes = {
     id: returnData[data].id,
     pId: returnData[data].subject_parent_id,
     name: '法人 ' + returnData[data].subject_name,
     code: returnData[data].subject_code
   };
  }else if (returnData[data].dimension_level == 3){
   //三级节点-交易处室
   p_2nodes = {
     id: returnData[data].id,
     pId: returnData[data].subject_parent_id,
     name: '交易处室 ' + returnData[data].subject_name,
     code: returnData[data].department_id
   };
  }else if (returnData[data].dimension_level == 4){
   //四级节点-账户
   p_2nodes = {
     id: returnData[data].id,
     pId: returnData[data].subject_parent_id,
     name: '账户 ' + returnData[data].subject_name,
     code: returnData[data].account_id
   };
  }
  p_2nodes.flag = 'cdb';
  treeData[p_nodes] = p_2nodes;
  p_nodes++;
 } 
 $.fn.zTree.init($("#Ztree1"), setting, treeData);
};

好了、本期就先介绍到这里，有什么需要交流的，大家可以随时私信我。😊