<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <!-- JQUERY 主要JS库--> <script type="text/javascript" src="../../js/lib/jquery.js"></script> <!-- JSTREE 主要JS库--> <script type="text/javascript" src="../../js/lib/jquery.cookie.js"></script> <script type="text/javascript" src="../../js/lib/jquery.hotkeys.js"></script> <script type="text/javascript" src="../../js/jquery.jstree.js"></script> <script type="text/javascript" src="../../js/util.js"></script> <link href="../../css/style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> html,body { margin: 0; padding: 0; } body,td,th,pre,code,select,option,input,textarea { font-family: verdana, arial, sans-serif; font-size: 12px; } #tree { width: 200px; height: 400px; overflow: auto; border: 1px solid gray; } #code { width: 400px; height: 200px; overflow: auto; border: 1px solid gray; overflow: auto; margin-top: 10px } </style> </head> <body onload="init();"> <div id="tree" class="tree"></div> <script type="text/javascript"> function init(){ $.ajax({ type:"post", url: getContextPath() + '/material/listMaterialType.do', dataType :"String", success:function(json){ var str = json.replace(/\"id"/g, 'attr:{"id"'); var str2 = str.replace(/\,"data"/g, '},data'); var jsondata = eval(str2); jtree(jsondata); }, error:function(){ alert("服务器异常,请稍后重试!"); }, async:false }); } function jtree(o){ $("#tree").jstree( //json加载数据节点 { //json数据区域 "json_data" :{data:o} , //要使用到的插件 "plugins" : [ "themes", "json_data", "ui", "crrm", "cookies", "dnd", "search", "types", "hotkeys", "contextmenu" ] }) //选择事件 .bind("select_node.jstree", function(e, data) { var id = parseInt(data.rslt.obj.attr("id")); document.getElementById("code").value =id; }) } </script> <input type="hidden" value="" id="code" /> </body> </html>
1.jQueryTree树