ztree一次性加载数据

1.引入css和js

<script type="text/javascript" src="${base}/resources/admin/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.validate.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.ztree.core-3.0.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.ztree.excheck-3.0.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.ztree.exedit-3.0.js"></script>

2.js代码

<script type="text/javascript">
	var $deleteButton = $("#deleteButton");
	var setting = {
			data: {
				simpleData: {
					enable: true
				}
			}
			,edit: {
				enable: true,
				showRemoveBtn: true,
				showRenameBtn: false
			}
			,callback: {
				onClick: onClick,
				onRemove: onRemove
				//onCheck:onCheck
			}
		};
		
	function onClick(event, treeId, treeNode, clickFlag) 
	{
		$("#iframe").attr("src","${base}/admin/navigation/edit.jhtml?id="+treeNode.id);
	}		

	function onRemove(e, treeId, treeNode)
	{
		location.href="delete.jhtml?ids="+treeNode.id;
	}
    
$().ready(function() {

	[@flash_message /]
	 onloadf();

});

	function onloadf()
	{
		$.ajax({
			type:"post",
			url:"getData.jhtml",
			success:function(data)
			{
				$.fn.zTree.init($("#treeDemo"), setting, eval(data));	
			}
		})
	}
	
	function SetWinHeight(obj)  
	{  
		var win=obj;  
		if (document.getElementById)  
		{  
		   if (win && !window.opera)  
		   {  
		    	if (win.contentDocument && win.contentDocument.body.offsetHeight)  
		     		win.height = win.contentDocument.body.offsetHeight;  
		    	else if(win.Document && win.Document.body.scrollHeight)  
		     		win.height = win.Document.body.scrollHeight;  
		   }  
		}  
	} 

</script>

3.html代码

<div style="width:15%;height:1000px;float:left;background-color:#daf3fd">
		<div class="bar">
			<a href="add.jhtml" class="iconButton">
				<span class="addIcon"> </span>添加
			</a>
			<a href="javascript:;" id="refreshButton" class="iconButton">
				<span class="refreshIcon"> </span>${message("admin.common.refresh")}
			</a>
		</div>
		<ul id="treeDemo" class="ztree" style="width:15%;height:100%;"></ul>
	</div>

4.java代码

@RequestMapping(value = "/getData", method = RequestMethod.POST,produces = "application/json; charset=utf-8")
	@ResponseBody
	public String getData()
	{
		JSONObject json = new JSONObject();
		List<HashMap<String,Object>> list = new ArrayList<HashMap<String,Object>>();
		
		List<Navigation> alls = navigationService.findAll();
		for(int i = 0; i < alls.size(); i++)
		{
			HashMap<String,Object> hm = new HashMap<String,Object>();   //最外层,父节点
			Navigation n = alls.get(i);
			hm.put("id", n.getId());//id属性  ,数据传递  
			hm.put("name", n.getName()); //name属性,显示节点名称  
			hm.put("pId", n.getParent()==null?0:n.getParent().getId());
			hm.put("isParent", n.getParent()==null?true:navigationService.isParent(n));
			list.add(hm);
		}
		JSONArray arr = new JSONArray(list);
		try {
			json.put("success", true);
			json.put("arr", arr);
		} catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return arr.toString();
	}

5.效果






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

甘蓝聊Java

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值