广告项目：（4） jquery树

最新推荐文章于 2024-06-19 21:34:23 发布

cc752184245

最新推荐文章于 2024-06-19 21:34:23 发布

阅读量99

点赞数

文章标签： jstree树

本文链接：https://blog.youkuaiyun.com/cc752184245/article/details/84212696

版权

<%@ 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 οnlοad="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树