`
chennaid2
  • 浏览: 51176 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
  • b_l_east： 在主动模式下，如果有多个客户端，服务器对每一个客户端均使用20 ...
    ftp

广告项目：（4） jquery树

jstree树 
阅读更多 
<%@ 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树

 

 

分享到：
| 广告项目:（3）FTP文件上传、Freemarker ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics