Ztree树结构的例子

这是我写的第一篇文章,就当记录一下这周在高人指点下所学一二。

首先要引入css样式的文件,其次需要引入js文件。分别如图所示。

在jsp页面中:

    1)依次引入

       <script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>
	<link rel="stylesheet" href="<%=basePath%>css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="<%=basePath%>js/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/jquery.ztree.excheck-3.5.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/jquery.ztree.exedit-3.5.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/TreeNode.js"></script>

  2)初始化函数

<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		var setting = {
				check : {
					enable : false
				},
				data : 
				    {
					simpleData : {
						enable : true
					}
				},
				callback : {
					//树节点点击事件注册:
					//onClick : zTreeOnClick
				},
				view : {
					showLine : true
				}
			};
			
			var mediaZTree;
    	
		$.ajax({
			url : encodeURI("<%=basePath%>ztree/doztree.action"),
			type : "POST",
			dataType : "json",//必须加这个
			contentType : "application/json;charset=utf-8",
			success : function(data)
		    {
		    //ztree的初始化init的方法
			mediaZTree = $.fn.zTree.init($("#treeDemo"), setting, data.root);
			}
		});
		});
	</script>

 

3)

 <div class="content_wrap1">
		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree" ></ul>
		</div>
	</div>

 在controller包中的ZtreeController类中:

package com.summer.controller;

@Controller

@RequestMapping("/ztree")
public class ZtreeController {
	@Autowired
	private CountryService cous;
	@Autowired
	private ZtreeService zservice;
	@RequestMapping("/doztree")
	public void searchTreenode(HttpServletRequest request,HttpServletResponse response) throws ParseException {
		//查询根节
	    JSONObject resultJsonObject = new JSONObject();
	    JSONArray jsonArray = new JSONArray();
	    JSONObject tempJsonObject = null;
	    
	    String getCountryName ="";
	    String countryID = "";
	    try {
			getCountryName=cous.getCountry().getCountryName();
		} catch (ParseException e2) {
			// TODO Auto-generated catch block
			e2.printStackTrace();
		}
	    
	   
	    try {
	    	 countryID=cous.getCountryID(getCountryName).getCountryID();
			
		} catch (ParseException e1) {
			// TODO Auto-generated catch block
			e1.printStackTrace();
		} 
	        tempJsonObject = new JSONObject();
			tempJsonObject.put("id", countryID); // 获得的id
			tempJsonObject.put("pid", 0);
			tempJsonObject.put("name", getCountryName); // 获得路径的名称
			tempJsonObject.put("open",true); // 设置默认父节点展开
			//ZtreeService zservice=new ZtreeService();
			 //判断国家下是否有省
			List<Province> plist=zservice.searchTreeNode();
			if(plist.size()==0)
			{
				tempJsonObject.put("isParent", false);	
			}
			else{
				tempJsonObject.put("isParent", true);
			}
			try {
				tempJsonObject.put("children", zservice.searchProvince(countryID, getCountryName));
			} catch (ParseException e1) {
				// TODO Auto-generated catch block
				e1.printStackTrace();
			}
			jsonArray.add(tempJsonObject);
			resultJsonObject.put("root", jsonArray.toString());
			
			try {
					response.getWriter().write(resultJsonObject.toString());
					System.out.println(resultJsonObject.toString());
				} catch (Exception e) {
					e.printStackTrace();
				}

	}
	
}

 在DAO包中的ZtreeDAO类中:

package com.summer.dao;
@Repository
public class ZtreeDAO {
	private Province province;
	ProvinceDAO pdao=new ProvinceDAO();
	CityDAO cdao=new CityDAO();
	@Transactional
 public List<Province> searchTreeNode()
 {
	 
	 Connection conn=null;
	 PreparedStatement ps=null;
	 ResultSet rs=null;
	 String sql="select ProvinceID from Province order by ID";
	 System.out.println(sql);
	 List<Province> plist=new ArrayList<Province>();
	 try{
		 conn=SQLHelper.getConnection();
		 ps=conn.prepareStatement(sql);
		 rs=ps.executeQuery();
		 
		 while(rs.next())
		 {
			 province=new Province();
			 province.setProvinceID(rs.getString("ProvinceID"));
			 plist.add(province);
		 }
		 
	 }catch(SQLException e)
	 {
		 e.printStackTrace();
	 }finally
	 {
		 SQLHelper.closeConnection(conn, ps, rs);
		 
	 }
	 return plist;
 }
 
 //查询Province表
@Transactional
 public JSONArray searchProvince(String CountryID, String getCountryName)throws ParseException {
		JSONObject ProvinceJsonObject = null;
		JSONArray ProvinceArray = new JSONArray();
		
		List<Province> list = searchTreeNode();
		for (Province rm : list) {
			ProvinceJsonObject = new JSONObject();
			ProvinceJsonObject.put("id", rm.getProvinceID()); // 获得的id
			ProvinceJsonObject.put("pid", CountryID);
			ProvinceJsonObject.put("name",pdao.getProvinceName(rm.getProvinceID()).getProvinceName()); // 获得路径的名称
			
			/*判断sheng是否有子节点*/
			List<City> citylist = new ArrayList<City>();
			citylist = cdao.getCity(rm.getProvinceID());
			if(citylist.size()==0){
				ProvinceJsonObject.put("isParent",false);
			}
			else{
				ProvinceJsonObject.put("isParent", true);
				ProvinceJsonObject.put("open",true); // 设置默认父节点展开
			}
			ProvinceJsonObject.put("children", searchCity(rm.getProvinceID()));
			ProvinceArray.add(ProvinceJsonObject);
		}
		return ProvinceArray;
	}
    //查city
@Transactional
 public JSONArray searchCity(String ProvinceId) throws ParseException {
		JSONObject cityJsonObject = null;
		JSONArray cityArray = new JSONArray();
		List<City> citylist = new ArrayList<City>();
		citylist = cdao.getCity(ProvinceId);
		if (citylist.size() != 0) {
			for (City cy : citylist) {
				cityJsonObject = new JSONObject();
				cityJsonObject.put("id", cy.getCityID());
				cityJsonObject.put("name", cy.getCityName());
				cityJsonObject.put("isParent", false);
				System.out.println(cy.getCityID());
				
				cityArray.add(cityJsonObject);
			}
		}
		return cityArray;
	}
}

 以上就是核心的代码。

你可能感兴趣的:(ztree)