DTree的学习与使用 Dtree点击展开获取json数据

最新推荐文章于 2022-03-21 17:57:42 发布

IT编程猿

最新推荐文章于 2022-03-21 17:57:42 发布

阅读量3k

点赞数

分类专栏：开发插件使用文章标签： dtree 异步加载json数据

本文链接：https://blog.youkuaiyun.com/maojycom/article/details/45932843

版权

开发插件使用专栏收录该内容

1 篇文章

订阅专栏

首先下载dtree：

去dtree主页下载：http://destroydrop.com/javascripts/tree/ 或者到：http://download.youkuaiyun.com/download/maojycom/8730069这里下载。

下载完后解压到项目中去。

在项目代码中引入相关的css、js文件。

如下代码所示，这里修改了dtree.js作为扩展自己需要的功能。

<span style="font-size:18px;">                <link rel="stylesheet" href="dtree.css" type="text/css"></link>
		<script type="text/javascript" src="jquery_js/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="dtree.js"></script>
		<script type="text/javascript">
			dTree.prototype.getChildren = function(pid){
				var tree=this;
				//console.log("pid:"+pid);
				var jsonstr={"pId":pid};
				$.ajax({
						url:urlto,
						type:"post",
						data:jsonstr,
						dataType:"json",
						success:function(data){
						//根目录
					    	tree.add(0,-1,"总的根目录",'','','','',"false");
							for(var i=0;i<data.length;i++){
								//console.log(data);
								//一级目录
								if(pid==null){
						    	          tree.add(data[i].cid,0, data[i].name,'','',"target",tree.icon.folder,'','',true,true);
						    	          //tree.getChildren(list[i].id);
						    	          tree.show();
						    	          tree.openTo(i);
						    	  }
						    	 //若不是子节点，则可展开
								 else if(data[i].isLeaf==1){
						    	         tree.add(data[i].cid, pid,data[i].name,'','','target',tree.icon.folder,'','',true,true); 
						    	         //子节点
						    	 }else{
						    	        tree.add(data[i].cid, pid,data[i].name,'','',"target");
						    	 }
						     	if(pid!=null){
						   	     	tree.show();
							     	tree.openTo(pid);
							   	}
						}
						}
					}); 
			}
			
			//点击节点时跳转查找
			function target(id,name){
				window.open("findDatat.action?cid="+id);
			}
			
			var basepath="<%=path%>/jsp/dtree/";
			var base='<%=path%>';
			var urlto=base+"/servlet/TreeInfoServlet";
			//初始化，页面加载时加载
		    $(function(){
			    d = new dTree('d',"cataTree");
				d.getChildren(null);
		    });
	    </script>
		<style type="text/css">
			body{min-height:350px;}
		</style>
	</head>
	<body>
		<div id="cataTree" class="dtree" style=""></div>
	</body></span>

以下是servlet,dtree中调用它来获取json数据：

<span style="font-size:18px;">package com.demo.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.demo.utils.JdbcUtils;
import com.demo.utils.StringUtils;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

/**
 * 首页点击树异步加载数据，返回json数据给前台使用
 */
public class TreeInfoServlet extends HttpServlet {

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	Connection conn;
	PreparedStatement pstm = null;
	ResultSet rs = null;
	
	/**
	 * 通过父级id来查找其下的子节点的集合
	 * @param pid
	 * @return jsonString
	 */
	public String getNodesInfo(Integer pid){
		JdbcUtils jdbcUtils = new JdbcUtils();
		conn = jdbcUtils.getConnection();
		String sql = "select cid,pid,name,isLeaf from medclass where 1=1 and pid = ?";
		String jsonString = null;
		try {
			pstm = conn.prepareStatement(sql);
			if(pid == null){
				pstm.setInt(1, 0);
			}else{
				pstm.setInt(1, pid);
			}
			rs = pstm.executeQuery();
			JSONArray jsonArray = new JSONArray();
			while (rs.next()) {
				JSONObject jsonObject = new JSONObject();
				jsonObject.put("cid", rs.getInt("cid"));
				jsonObject.put("pId", rs.getString("pid"));
				jsonObject.put("name", rs.getString("name"));
				jsonObject.put("isLeaf", rs.getInt("isLeaf"));
				jsonObject.put("isParent", rs.getInt("isLeaf"));
				jsonArray.add(jsonObject);
			}
			jsonString = jsonArray.toJSONString();
		} catch (SQLException e) {
			e.printStackTrace();
		} finally{
			jdbcUtils.close(rs, pstm, conn);
		}
		return jsonString;
	}
	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		Integer pid = null;
		response.setContentType("text/plain");
		//response.setContentType("text/json; charset=UTF-8");  
		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		//String pId = request.getParameter("pId");
		String pId = request.getParameter("cid");
		//System.out.println("id:"+pId);
		if(!StringUtils.isNullStr(pId) || "0".equals(pId)){
			pid = null;
		}else{
			pid = Integer.valueOf(pId);
		}
		String nodesInfo = getNodesInfo(pid);
		//System.out.println("json:"+nodesInfo);
		out.print(nodesInfo);
	}
	
}
</span>

至此，在前台就可以看到一颗树形菜单，点击父节点可异步加载其下子节点信息。