Ztree异步加载：无法正常显示数据

问答首页 → 移动开发技术

0 0

Ztree异步加载：无法正常显示数据15

ztree异步加载时无法正常显示数据

1.环境配置
MySQL 5.6
Tomcate 7.0
Windows 7

2.测试数据

ID PID Name Isparent

0 -1 FMD-2013 TRUE

1 0 A-1 TRUE

2 1 Mechanical Failure:71.4% FALSE

3 1 Electrical Failure:28.6% FALSE

4 1 Machine Gun TRUE

5 4 Worn:100% FALSE

6 0 A-2 TRUE

7 6 Seal Failure:100% FALSE

8 6 Electrical TRUE

9 8 High Temperature TRUE

10 9 Failed To Operate:46.70% FALSE

11 9 Vibration:20.00% FALSE

12 9 Defective:6.70% FALSE

13 9 Distorted:6.70% FALSE

14 9 Noisy:6.70% FALSE

15 9 Out of Specification:6.70% FALSE

16 9 Short:6.70% FALSE

17 0 A-3 TRUE

18 17 Contaminated:42.10% FALSE

19 17 Metal Shavings:21.10% FALSE

20 17 Bearing Failure:15.80% FALSE

21 17 Failed To Operate:7.90% FALSE

22 17 Worn:7.90% FALSE

23 17 Broken:5.30% FALSE

24 0 A-4 TRUE

25 24 Leaking:31.50% FALSE

26 24 Seized:27.80% FALSE

27 24 Worn:24.60% FALSE

28 24 Mechanical Failure:16.10% FALSE

29 24 Hydraulic TRUE

30 29 Leakage:19.60% FALSE

31 29 Corrosion:17.60% FALSE

32 29 Inoperative:15.70% FALSE

33 29 Ruptured:13.70% FALSE

34 29 Oil Leakage:11.80% FALSE

35 29 Pressure Incorrect:11.80% FALSE

36 29 Broken:9.80% FALSE

37 24 Pneumatic TRUE

38 37 Broken:50% FALSE

39 37 Leakage:50% FALSE

40 24 Pressurized TRUE

41 40 Hydraulic TRUE

42 41 Leaking:75.90% FALSE

43 41 No Operation:10.30% FALSE

44 41 Mechanical Failure:6.90% FALSE

45 41 Breach:3.4% FALSE

46 41 Out of Specification:3.40% FALSE

3. 数据库sql格式 ztree.sql

DROP DATABASE IF EXISTS `test22`;
CREATE DATABASE `test22` /*!40100 DEFAULT CHARACTER SET utf8 */;
USE `test22`;

#
# Table structure for table dtree
#

CREATE TABLE `ztree` (
  `id` int(11) NOT NULL default '0',
  `pid` int(11) NOT NULL default '0',
  `name` varchar(100) NOT NULL default '' COMMENT 'node name',
  `isparent` boolean default false COMMENT 'false:close,true：open',
  `url` varchar(20) default '' COMMENT 'node path',
  `title` varchar(50) default '' COMMENT 'node title',
  `target` varchar(20) default '' COMMENT 'node tardet',
  `icon` varchar(11) default '',
  `iconOpen` varchar(20) default '',
  `openstatue` boolean default false COMMENT 'false:close,true：open',
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=REDUNDANT;

4.数据库连接信息 inc.jsp

<%@ page import="java.sql.Connection"%>
<%@ page import="java.sql.DriverManager"%>
<%@ page import="java.sql.Statement"%>
<%@ page import="java.sql.ResultSet"%>
<%@ page import="java.sql.ResultSetMetaData"%>
<%
String drv = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/test22";
String usr = "root";
String pwd = "123456";
%>

5.HTML文件 bigDataDemo_normal.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="css/demoStyle/demo.css" type="text/css">
  <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="js/jquery-ztree-2.4.js"></script>
  
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	var zTree1;
	var setting;

	setting = {
		expandSpeed: "",
		checkable : true,
		async:  true,
		//asyncUrl: "asyncData/nodeForBigData.php",
		asyncUrl: "data/asyncData/nodeForBigData.jsp",
		asyncParam: ["prod_id"]
	};

	$(document).ready(function(){
		reloadTree();
	});

	function reloadTree() {

		var nodes = [];

		if ($("#init_2").attr("checked")) {
			setting.async = false;
			nodes = zNodesBig;
		} else {
			setting.async = true;
			nodes = [];
		}
		zTree1 = $("#treeDemo").zTree(setting, nodes);
		
	}	

  //-->
  </SCRIPT>
 </HEAD>

<BODY>
<center class="headTitle">大数据量演示<span> —— 普通加载</span></center>
<TABLE border=0 width="700" class="tb1">
	<TR>
		<TD width=340px align=center valign=top>
		<div class="zTreeDemoBackground">
			<ul id="treeDemo" class="tree"></ul>
		</div>		
		</TD>
		<TD width=360px align=left valign=top>
		<div class="demoContent">
			<li class="title focus">
				<font color="red" style="font-size:12px;">此演示需要发布到 php 服务器下方能正常执行。<br/>
				使用 Tomcat 的朋友，请修改asyncUrl的值</font>
			</li>
			<li class="title focus">
				<button class="ico star" onfocus="this.blur();"></button>加载方式
				<ul class="remark">——改换不同的加载方式进行比较(总节点数：397 个)</ul>
				<ul>
					&nbsp;
					<INPUT TYPE="radio" id="init_1" NAME="initRadio" checked onclick="reloadTree();">异步加载&nbsp;
					<INPUT TYPE="radio" id="init_2" NAME="initRadio" onclick="reloadTree();">一次性加载(<font color="red">会假死</font>)
				</ul>
			</li>
			<li class="title focus">
				<button class="ico books" onfocus="this.blur();"></button>建议说明
				<ul class="remark">1、这个 Demo 是针对总节点数较多，但每一级节点数量较少的例子</ul>
				<ul class="event">
					<li>&nbsp;&nbsp;浏览器整体的性能都不是特别好，尤其是IE，因此对于节点总数较多，每层节点数不多，层数较复杂的情况，建议使用异步加载模式，因为异步加载模式最大的好处就是用多少加载多少，对于一个复杂的树来说，用户访问页面时一般情况下是不会一个个全部节点点击一遍</li>
					<li></li>
					<li>&nbsp;&nbsp;对于同级节点数据量很多时，异步加载也会出现假死，建议模仿“大数据量演示”下的“高级异步加载”的例子进行自定义的异步加载</li>
				</ul>
				<ul class="remark">2、取消展开、折叠特效 &nbsp;setting.expandSpeed = "";</ul>
				<ul class="event">
					<li>&nbsp;&nbsp;动画特效会比较耗费资源，因此对于节点很多的情况下，就不要使用动画特效了</li>
				</ul>
				<ul class="remark">3、如果你有好的建议，也请提供出来，谢谢了</ul>
				<ul class="event">
					<li>&nbsp;&nbsp;</li>
				</ul>
					
			</li>
		</div>	
		</TD>
	</TR>
</TABLE>
</BODY>
</HTML>

6.从数据库读取ztree节点文件 nodeForBigData.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page language="java"  pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" buffer="none"%>
<%@ include file="inc.jsp"%>
<%@ page language="java" contentType="text/html; charset=utf-8" import="java.util.*"
    pageEncoding="utf-8"%>
	<%!
	
   	class DemoObj {
       	public String id;
       	public String pId;
       	public String code;
       	public String name;
       	public String state;
       	public List<DemoObj> nodes = new ArrayList<DemoObj>();
    }
    class DemoData {
    	
    	private List<DemoObj> demoDataList;
    	private Map<String, DemoObj> demoDataMap;
    	
    	public List<DemoObj> getDataByPId(String pId) {
    		if (pId!=null && demoDataMap.containsKey(pId)) {
    			return demoDataMap.get(pId).nodes;
    		} else {
    			return demoDataList;
    		}
    	}
    	public DemoData () {
		
			try {				
				Class.forName(drv).newInstance();
				Connection conn = DriverManager.getConnection(url, usr, pwd);
				Statement stm = conn.createStatement();
				
				ResultSet rs = stm.executeQuery("select * from ztree;");
				ResultSetMetaData rsmd = rs.getMetaData();

				demoDataList = new ArrayList<DemoObj>();
   			    demoDataMap = new HashMap<String, DemoObj>();
				
				while (rs.next()) {
				
				DemoObj d0 = new DemoObj();
				d0.id=rs.getString(1); d0.pId=rs.getString(2); d0.code=rs.getString(5); d0.name=rs.getString(3); d0.state=rs.getString(10);
				demoDataMap.put(d0.id, d0);
			
				}				
				rs.close();
				stm.close();
				conn.close();
				} catch (Exception e) {
				e.printStackTrace();
				out.println(e);
				}
   			

   		    for(String key : demoDataMap.keySet()){

   		    	DemoObj d = demoDataMap.get(key);
   		    	if (demoDataMap.containsKey(d.pId)) {
   		    		demoDataMap.get(d.pId).nodes.add(d);
   		    	} else {
   		    		demoDataList.add(d);
   		    	}
   		    }
    	}
    }
%>


[<%
String pId = request.getParameter("prod_id");
String pCount = request.getParameter("count");
DemoData d = new DemoData();
List<DemoObj> nodes = (d.getDataByPId(pId));

int i=0;
for (DemoObj o : nodes) {
	if (i>0) {%>,<%}
	%>{ "prod_id": "<%=o.id%>", "prod_code": "<%=o.code%>", "name": "<%=o.name%>", "prod_parent_id": "<%=o.pId%>", "prod_state": "<%=o.state%>"<%
	if (o.nodes != null && o.nodes.size()>0 ) {
		%>, isParent:true<%
	}
	%>}<%
	i++;
}
%>]