您的位置：首页 > Web前端 > JavaScript

JS树简易实现

2010-12-02 22:16 513 查看

梅花雪树(MzTreeView2.0)

先倒入2.0的js

JSP代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<HTML>
<HEAD>
<TITLE>MzTreeView 2</TITLE>
<mce:script src="tree/scripts/jsframework.js" mce_src="tree/scripts/jsframework.js"></mce:script>
</HEAD>
<%
String treeData = (String)request.getAttribute("treeData");
//out.print(treeData);
%>
<BODY>
<input type="button" value="展开" onclick="tree.expandAll('33')" />
<input type="button" value="收缩" onclick="tree.collapseAll('33')" />
<input type="button" value="选中" onclick="checkSel()" />
<SCRIPT LANGUAGE="JavaScript">
var data = {};
data["-1_33"] = "text: 起点;";//nodes的下标和1.0的格式是一样的。
//data['1_9001'] = 'text: 首页;';
data['33_9002'] = 'text: 介绍; XMLData: data/data.xml ';
//data['1_9009'] = 'text: 帮助; url:page/help?typenum=1&roomid=1 ; JSData: data/help.js ';//可以设置url的弹出方式target:_blank;,其默认是_self。
var xmlstr = '<nodes>' + '<node text="中国" />' + '<node text="江西" />'
+ '<node text="广东">' + '<node text="梅州" />' + '<node text="深圳" />'
+ '</node>' + '<node text="河北" />' + '</nodes>';
Using("System.Web.UI.WebControls.MzTreeView");
var tree = new MzTreeView();
tree.dataSource = data;
//tree.loadXmlDataString(xmlstr, 1);//xml字符串作为数据源,loadXmlDataString方法的第一个参数是xml字符串，第二个参数父节点ID
//tree.setJsDataPath("data/");//设置数据源的位置
//tree.setXmlDataPath("data/");
tree.autoSort = false;
tree.useCheckbox = true;//是否使用checkbox
tree.canOperate = true;
document.write(tree.render());//输出树
tree.expandLevel(1);//展开1节点
function checkSel() {
var text = "";
var nodes = tree.nodes;
for ( var i in nodes) {
if (nodes[i].checked) {
alert("text== " + nodes[i].text);
alert("id== " + nodes[i].id);
//控制选中checked
alert(nodes[i].checked);
nodes[i].check(false);
alert(nodes[i].checked);
}
}
alert(text);
}
</SCRIPT>
</BODY>
</HTML>

后台代码

package tree;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MzTreeView20 extends HttpServlet {
private static final long serialVersionUID = 1L;
private Dom4jXML dom4jXML = new Dom4jXML();
public MzTreeView20() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
String sql = "select * from tree";
List<Tree> trees = this.getResultSet(sql);
String treeName = "testTree";//这个是树的名称要和页面的名称相同

//dom4jXML.createXML(trees);

StringBuffer treeBf = new StringBuffer("");
treeBf.append("<mce:script language='javascript' type='text/javascript'><!--
");
treeBf.append("var data={};");//为MzTreeView生成数据源

if(trees.size()>0){
treeBf.append("data[/"-1_0001/"]=/"text:根节点/";");
for(Tree tree :trees){
if (tree.getPid() == 0){
treeBf.append("data['0001_" + tree.getId().toString() + "']='text:" + tree.getDesc() + ";");
//append(@"target:ModuleData;");
//append("method:window.parent.document.main(iframe_ModuleData).location.reload();");
treeBf.append(" ';");
treeBf.append("/n");
}else{
treeBf.append("data['" + tree.getPid().toString() + "_" + tree.getId().toString() + "']='text:" + tree.getDesc() + ";");
//append(@"target:ModuleData;");
treeBf.append(" ';");
treeBf.append("/n");
}
}
}
treeBf.append("Using('System.Web.UI.WebControls.MzTreeView');");
treeBf.append(" var tree=new MzTreeView();");
treeBf.append("tree.dataSource=data;");
treeBf.append("tree.useCheckbox=true;");
treeBf.append("document.write(tree.render());");
treeBf.append("tree.expandAll('0001');");
treeBf.append("
// --></mce:script>");

System.out.println(treeBf.toString());
//   PrintWriter out = response.getWriter();
//   out.print("<%@ page language='java' import='java.util.*' pageEncoding='UTF-8'%>");
//   out.print("<html>");
//   out.print("<head>");
//   out.print("<mce:script src="tree/scripts/jsframework.js" mce_src="tree/scripts/jsframework.js"></mce:script>");
//   out.print("</head>");
//   out.print(treeBf);
//   out.print("</body></html>");
request.getRequestDispatcher("/tree20.jsp").forward(request, response);

}
public void init() throws ServletException {
}
public List<Tree> getResultSet(String sql) {
Connection conn = null;
PreparedStatement psm = null;
ResultSet rs = null;
//String sql = "select * from tree";
List<Tree> trees = new ArrayList<Tree>();
try {
Class.forName("org.gjt.mm.mysql.Driver");
conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/dwr", "root", "");
psm = conn.prepareStatement(sql);
rs = psm.executeQuery();
Tree tree = null;
while(rs.next()){
tree = new Tree();
tree.setId(rs.getInt("id"));
tree.setDesc(rs.getString("desc"));
tree.setPid(rs.getInt("pid"));
trees.add(tree);
}
} catch (Exception e) {
e.printStackTrace();
}finally{
try {if(rs != null){rs.close();}} catch (SQLException e) {}
try {if(psm != null){psm.close();}} catch (SQLException e) {}
try {if(conn != null){conn.close();}} catch (SQLException e) {}
}
return trees;
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航