1、在jquery ztree的官网上下载jquery.ztree.all-3.5.min.js、zTreeStyle.css
<script type="text/javascript" src="/js/jquery/ztree/jquery.ztree.all-3.5.min.js" ></script>
<link rel="stylesheet" type="text/css" href="/js/jquery/ztree/zTreeStyle.css"></link>
2、在后台设置ztree的json
(1)action:
public String getTree(){
ve_mkflbList = ve_mkflbService.getAll();
List<ZTreeNode> listlb = ZTree.toZTree(ve_mkflbList, new ZTreeNode("lbbh","", "lbmc",null));
ve_mkb.setOrderClause("SXH");
ve_mkbList = ve_mkbService.getByBean(ve_mkb);
for (int i = 0; i < ve_mkbList.size(); i++) {
if(ve_mkbList.get(i).getSjmkm().equals("0000")){
ve_mkbList.get(i).setSjmkm(ve_mkbList.get(i).getLbbh());
}
}
List<ZTreeNode> list = ZTree.toZTree(ve_mkbList, new ZTreeNode("bh","sjmkm", "mc",null));
List<ZTreeNode> listall=new ArrayList<ZTreeNode>();
for (int i = 0; i < listlb.size(); i++) {
ZTreeNode zTreeNode1=listlb.get(i);
listall.add(zTreeNode1);
}
for (int j = 0; j < list.size(); j++) {
ZTreeNode zTreeNode2=list.get(j);
listall.add(zTreeNode2);
}
RenderUtils.renderJson(JSONArray.fromCollection(listall).toString());
return null;
}
(2)ztreeNode bean:
public class ZTreeNode {
private String id;
private String pId;
private String name;
private Object attributes;
public ZTreeNode(){
}
public ZTreeNode(String id, String pId, String name) {
this.id = id;
this.pId = pId;
this.name = name;
this.attributes = new Object();
}
/**
* 需要其他属性时,attributes=null
* @param bh
* @param zwmc
* @param pyszm
* @param attributes
*/
public ZTreeNode(String id, String pId, String name,Object attributes) {
this.id = id;
this.pId = pId;
this.name = name;
this.attributes = attributes;
}
/**
* @return the id
*/
public String getId() {
return id;
}
/**
* @param id the id to set
*/
public void setId(String id) {
this.id = id;
}
/**
* @return the name
*/
public String getName() {
return name;
}
/**
* @param name the name to set
*/
public void setName(String name) {
this.name = name;
}
/**
* @return the pId
*/
public String getpId() {
return pId;
}
/**
* @param pId the pId to set
*/
public void setpId(String pId) {
this.pId = pId;
}
/**
* @return the attributes
*/
public Object getAttributes() {
return attributes;
}
/**
* @param attributes the attributes to set
*/
public void setAttributes(Object attributes) {
this.attributes = attributes;
}
}
(3)
public class ZTree {
/**
* 使用默认属性配置将数据转换成treeList
*
* @param datas
* 待转换的数据
* @param node
* 转换是datas中的数据对应到ZTreeNode中的属性对应
*/
public static List<ZTreeNode> toZTree(List<?> datas, ZTreeNode ztreeNode) {
ZTreeCopy copy = new ZTreeCopy(ztreeNode);
List<ZTreeNode> result = new ArrayList<ZTreeNode>();
for (Object obj : datas) {
ZTreeNode node = new ZTreeNode();
copy.copy(node,obj); // 拷贝自定义属性
result.add(node);
}
return result;
}
}
(4)
public class ZTreeCopy {
/**
* 配置拷贝的属性对应到传入list中的值 ComboNode中需要拷贝的属性需要有默认值
*/
private ZTreeNode defaultNode;
public ZTreeCopy() {
}
public ZTreeCopy(ZTreeNode node) {
this.defaultNode = node;
}
/**
* 拷贝Map
*
* @param node
* @param obj
*/
private void copyMap(ZTreeNode node, Map<?, ?> obj) {
node.setId(obj.get(defaultNode.getId()) != null ? obj.get(defaultNode.getId()).toString() : "");
node.setName(obj.get(defaultNode.getName()) != null ? obj.get(defaultNode.getName()).toString() : "");
node.setpId(obj.get(defaultNode.getpId()) != null ? obj.get(defaultNode.getpId()).toString() : "");
if(defaultNode.getAttributes()==null)
node.setAttributes(obj);
}
/**
* 拷贝对象中的属性
*
* @param node
* 拷贝的目标对象
* @param obj
* 待拷贝的对象
*/
private void copyBean(ZTreeNode node, Object obj) {
node.setId(propertyValue(obj, defaultNode.getId()));
node.setName(propertyValue(obj, defaultNode.getName()));
node.setpId(propertyValue(obj, defaultNode.getpId()));
if(defaultNode.getAttributes()==null)
node.setAttributes(obj);
}
/**
* 获得指定对象中指定属性的值,取不到则反馈空窜("")
*
* @param obj
* 需要取值的对象
* @param property
* 需要获得属性的属性名
*/
private String propertyValue(Object obj, String property) {
try {
return BeanUtils.getProperty(obj, property);
} catch (Exception e) {
// e.printStackTrace();
return "";
}
}
/**
* 将指定对象复制成一个ComboNode对象
*/
final void copy(ZTreeNode node, Object obj) {
if (obj instanceof Map) { // Map或javaBean
copyMap(node, (Map<?, ?>) obj);
} else {
copyBean(node, obj);
}
}
}
3、
<script type="text/javascript">
var setting = {
callback: {
onClick:onClick
},
data: {
simpleData: {
enable: true
}
},
async: {
enable: true,
url:"/airsa/ve_mkb!getTree.shtml",
dataFilter: ajaxDataFilter
}
};
//树节点上单击事件
function onClick(event,treeId,treeNode){
var url='';
if(treeNode.attributes.bh!=undefined&&treeNode.attributes.bh!=''){
var bh=treeNode.attributes.bh;
url='/airsa/ve_mkb!input.shtml?bh='+bh;
}else if(treeNode.attributes.lbbh!=undefined&&treeNode.attributes.lbbh!=''){
var lbbh=treeNode.attributes.lbbh;
url='/airsa/ve_mkflb!input.shtml?lbbh='+lbbh;
}
$('#mainframe').attr('src',url);
}
//设置图标
function ajaxDataFilter(treeId, parentNode, responseData) {
if (responseData) {
for(var i =0; i < responseData.length; i++) {
responseData[i].icon =responseData[i].attributes.pic;
}
}
return responseData;
};
var zTree, rMenu;
$(document).ready(function(){
//开始生成树,setting是设置树的属性
$.fn.zTree.init($("#yypt_tree"), setting);
zTree = $.fn.zTree.getZTreeObj("yypt_tree");
});
</script>
<body>
<table width="100%" height="100%" class="table" cellpadding="0" cellspacing="0" boder="1" >
<tr>
<td width="20%" valign="top">
<ul id="yypt_tree" class="ztree" style="height:598px;margin-top:0px;"></ul>
</td>
<td width="80%" valign="top">
<iframe id="mainframe" name="mainframe" src="/airsa/ve_mkflb!input.shtml" width="100%" height="600px" frameborder="no" style="border:1px solid #cccccc;"></iframe>
</td>
</tr>
</table>
</body>
</html>