项目中简单使用ztree,简单数据。

时间:2023-03-09 07:07:56
项目中简单使用ztree,简单数据。

由于公司架构较旧,使用的jdk版本为1.4,页面上也没有el表达式。

加入 js 文件

<%
String context = request.getContextPath();
%> <link rel="stylesheet" href="<%=context%>/tfms/contract/js/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="<%=context%>/tfms/contract/js/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=context%>/tfms/contract/js/zTree_v3/js/jquery.ztree.core.js"></script>

js部分

$(function(){

    var setting = {
async:{
enable : true, // 开启异步加载
url: "<%=context%>/tfms/contract/manage/list.do?action=tadta", // url
otherParam: ["id",''] // 初始化发送的参数可要可不要,如果传["id",null] 时,后台会解析成 : "null"
},
data: {
simpleData: {
enable: true, // 简单数据模式
idKey: "id",
pIdKey: "pId",
rootPId: null
}
},
view:{
selectMulti:false //表示禁止多选
},
check:{ },
callback:{
onClick:function(event,treeId,treeNode){ // 点击 事件
alert(treeNode.name+"<--->"+treeNode.id);
}
}
}; $.fn.zTree.init($("#ztree"), setting, null); });

html

<ul id="ztree" class="ztree"></ul>

简单数据模式很方便。例

var treeNodes = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"}
];

后台

public void tadta(ActionHelper help) throws IOException{
HttpServletResponse response = help.getResponse();
HttpServletRequest request = help.getRequest();
ContractService contractService = (ContractService) help.getService(); // 项目架构 struts1 + hibernate3 没有 spring
String id = request.getParameter("id");
List list = contractService.queryByTestCage(id);
StringBuffer bstr = new StringBuffer("[");
list.remove(0); // 这个节点是项目中所用到的,所以不展示这个节点
for (int i = 0; i < list.size(); i++) {
ContractCagetoryVO vo = (ContractCagetoryVO) list.get(i); //拼凑需要 数据的格式
bstr.append(i==0?"{id:'"+vo.getFid()+"',name:'"+vo.getFname()+"',pId:'"+vo.getFparent_id()+"'}":",{id:'"+vo.getFid()+"',name:'"+vo.getFname()+"',pId:'"+vo.getFparent_id()+"'}");
}
bstr.append("]");
response.setCharacterEncoding("utf-8"); // 如果不设置 utf-8 中文会变 ??
response.getWriter().print(bstr);
}

ztree的数据格式比较好组装,可以不使用 JSON 嵌套格式数据!!

效果

项目中简单使用ztree,简单数据。