• Ztree的简单使用和后台交互的写法(一)


    一、引入ztree的头文件

    <!-- 引入ztree/-->
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/ztree/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/lib/ztree/js/jquery.ztree.exhide-3.5.js"></script>

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/ztree/css/zTreeStyle/zTreeStyle.css" />

    二、正文中ZTree出现的地方写入

    <div class="ibox-content" style="height:700px;">
      <ul id="tree1" class="ztree"></ul>   //id="tree1"是ZTree的标识 ,class="ztree"是引入ztree的类
    </div>

    三、js实现树的数据填充

    $(function(){

      var setting = {
          data: {
      simpleData: {
      enable: true,
      idKey:"id",
      idPKey:"pId",
             }
     },
      async: {
      enable: true, //开启异步加载
      url:baseCtx+"/media/getOrgZTree.action", //设置获取异步动态加载的数据
      dataType: "text",
      autoParam:["id"],
      otherParam: { },
      dataFilter: filter
    },

    callback: {
      onClick: onClick  //回调函数为单击操作
    }
    };
    //滤波
    function filter(treeId, parentNode, childNodes) {
      var array = childNodes;
      return array;
    }


    //单击操作---------------------------------------------------------------------------------------------
    function onClick(event, treeId, treeNode, clickFlag) {
      if (treeNode.isParent) {
      var zTree = $.fn.zTree.getZTreeObj(treeId);
      //扩展所有子节点
      zTree.expandNode(treeNode);
    }
      //单击后在标题处 重新拼接html,显示为***部门的任务信息概览
      document.getElementById('dg_h').innerHTML = '<h5>['+treeNode.name+']任务信息概览</h5>';

         //单击后的操作
      onClickAjax(treeNode.name);
    }

    //初始化操作---严格按照头文件加载,否则会出现init函数没有定义这种情况-------------------------------------------------------------------------------------
    function init(){
      $.post(baseCtx+"/media/getOrgZTree.action",{id:3},function(data){  //id=3是初始输入,确立根节点的id=3
      var result= $.parseJSON(data);
      rw_tree=$.fn.zTree.init($("#tree1"),setting, result); //将得到的数据解析并填充到ZTree上

    });
    }
    init();
    });

    /**
    * =====点击节点的操作来获取相应的信息的后台请求操作=======================
    * =============================
    * */
    function onClickAjax(treeNodeName) {


      $.ajax({
      url:baseCtx+"/media/OrgTaskAssess.action",
      data:{ ORG_NAME:treeNodeName}, //向后台传递的数据是名字 也可以是id 可以根据实际情况来定
      type : 'post',
      async : false,
      dataType : "json", //返回的数据类型是json
      success: function(data){
      //alert('got it!');
      $('#dg').datagrid('loadData', data);//回调成功后重新加载表格的数据 ,前提是表格的字段已经确定
    },
    });

    }

    四、后台web请求的写法

    1.action的写法

    package com.*****.media.action;

    import javax.annotation.Resource;
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;

    import org.apache.struts2.convention.annotation.Action;
    //bpo
    import com.*****.media.bpo.OrgZTreeBPO;
    import com.*****.common.web.BaseAction;

    public class OrgZTreeAction extends BaseAction{

    private static final long serialVersionUID = 1L;

    private String id;
    private String name;
    private String pid;

    /**
    * 利用Ztree插件获取动态树-----------------------------------------------
    * @return
    */
    @Action(value = "getOrgZTree")

    public String getOrgZTree(){


    List<Map<String, Object>> resultList = new ArrayList<Map<String, Object>>();

      //第一级数据(根节点)
      Map<String, Object> orgMap = new HashMap<String, Object>();
      orgMap.put("isParent", true);//设置根节点为父节点
      orgMap.put("open", true); //根节点展开
      orgMap.put("id", id);//根节点的ID
      orgMap.put("name", "TEST"); //根节点的名字
      resultList.add(orgMap); //列表中先添加第一级的数据

      //第二级数据(下级)
      List<Map<String, Object>> OrgresultList1 = new ArrayList<Map<String, Object>>();
      OrgresultList1 = orgZTreeBPO.getOrgList(orgMap);//根据第一级节点的数据获取下一级的数据
      //判断列表是否为空
      if(null != OrgresultList1 && OrgresultList1.size() !=0)
      {
        for (Map<String, Object> map1 : OrgresultList1) { //将下一级别的数据用循环读取
        resultList.add(map1);

        //获取第三级数据
        List<Map<String, Object>> OrgresultList2 = new ArrayList<Map<String, Object>>();
        OrgresultList2 = orgZTreeBPO.getOrgList(map1);
        if(null != OrgresultList2 && OrgresultList2.size() !=0)
          {
            for (Map<String, Object> map2 : OrgresultList2) {
            resultList.add(map2);

            //获取第四级数据
            List<Map<String, Object>> OrgresultList3 = new ArrayList<Map<String, Object>>();
            OrgresultList2 = orgZTreeBPO.getOrgList(map2);
            if(null != OrgresultList3 && OrgresultList3.size() !=0)
              {
                for (Map<String, Object> map3 : OrgresultList2) {
                resultList.add(map3);

                 }
              }
            }
          }
        }
    }

    outputJson(resultList);//输出数据库中获得的数据(数据库中的存储也是以树的形式保存的)
    System.out.println(resultList);
    return NONE;
    }

    //字段的get set方法  必须有,不能忽略掉

    public String getId() {
    return id;
    }

    public void setId(String id) {
    this.id = id;
    }


    public String getName() {
    return name;
    }


    public void setName(String name) {
    this.name = name;
    }


    public String getPid() {
    return pid;
    }


    public void setPid(String pid) {
    this.pid = pid;
    }

    2.xml的写法

    <!--Ztree获取部门列表-->
    <resultMap type="map" id="RwgzInfo">
      <result property="name" column="ORG_NAME" />  //column 列是数据库中的存储字段,property是Java实体的字段名
      <result property="id" column="ORG_ID" />
      <result property="pId" column="ORG_HIGHER_ID" />
    </resultMap>


    <select id="getOrgList" parameterType="map" resultMap="RwgzInfo" >
      select ORG_ID,ORG_NAME,ORG_HIGHER_ID from yhgl.wpy_org_test
    <where>
      <if test="id!=null and id!=''">
        and ORG_HIGHER_ID = #{id}
      </if>
    </where>
    </select>

  • 相关阅读:
    sql语句
    CSS笔记
    mysql与oracle区别
    ajax请求aspx
    列表简单排序
    列表删除元素
    正则表达式简介
    创建列表
    动态串 StringBuilder
    StrinBuilder 追加 ,插入,删除,和替换操作
  • 原文地址:https://www.cnblogs.com/Lxiaojiang/p/6038169.html
Copyright © 2020-2023  润新知