JS树简易实现

最新推荐文章于 2024-07-15 11:25:51 发布

jqrsdsy

最新推荐文章于 2024-07-15 11:25:51 发布

阅读量3.4k

点赞数 3

分类专栏： JavaScript 文章标签： tree string null button sql exception

JavaScript 专栏收录该内容

86 篇文章 0 订阅

订阅专栏

梅花雪树(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="展开" οnclick="tree.expandAll('33')" /> <input type="button" value="收缩" οnclick="tree.collapseAll('33')" /> <input type="button" value="选中" οnclick="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'></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; } }

jqrsdsy

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS树简易实现

<br />梅花雪树(MzTreeView2.0) <br /><br />先倒入2.0的js<br /><br />JSP代码：<br /><%@ 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/
复制链接

扫一扫

专栏目录