ztree简单实例

最新推荐文章于 2025-06-19 15:01:34 发布

原创最新推荐文章于 2025-06-19 15:01:34 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ztree

本文详细介绍了如何在Web项目中集成ZTree和JQuery，实现材料ID搜索和树形展示功能。通过解析JSP代码，展示了使用JSTL标签库、ZTree插件和JQuery进行页面元素绑定及数据交互的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/WEB-INF/tlds/function.tld" prefix="fun" %>    
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
<script type="text/javascript" src="js/styleJS.js"></script> 

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/treeStyle/zTreeStyle.css" />
//引入ztree的必要js
<script type="text/javascript" src="<%=request.getContextPath()%>/treeStyle/js/jquery.ztree.all-3.5.min.js"></script>

<div class="panel-body">
    <div class="e-persons-search">
		<span class="e-persons-search-i" id="searchBtn">
        <i class="fa fa-search"></i></span> 
        <input type="text" class="form-control e-persons-search-t" id="key"
			placeholder="<fmt:message key='bms.materiel.searchMateriel'/>">
	</div>
	<div class="e-persons-search-l">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</div>

js代码

<script>
var setting = {

		data: {
			key: {
				name: "materialId"
			},
			simpleData: {
				enable:true,
				idKey: "id",
				pIdKey: "materialParentId",
				rootPId: ""
			}
		},
		view: {
			showLine: true,
			selectedMulti: false,
			dblClickExpand: false,
			fontCss: setFontCss_ztree ,
			expandSpeed: ""
		},
		callback: {                            //这是对应调用方法
			//onClick: onClickFunc,            
			//onAsyncSuccess: selectedNodes,

       }
	};
var materialDatas = JSON.parse('<%=request.getAttribute("list")%>');//树数据

$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting,materialDatas);
    //ztree实例必须执行这个init方法，三个参数，一个为存放ztree的容器，一个为setting，最后是树数据
}


</script>