1.根据treeView控件的属性建立vo类
package cn.allen.tree.vo; import java.util.List;
import java.util.Map; public class JsonTreeDataVo { private String id;
private String text;
private String parentId;
private String icon;
private String href;
private String tags; private List<JsonTreeDataVo> nodes; public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getParentId() {
return parentId;
}
public void setParentId(String parentId) {
this.parentId = parentId;
}
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public String getHref() {
return href;
}
public void setHref(String href) {
this.href = href;
} public String getTags() {
return tags;
}
public void setTags(String tags) {
this.tags = tags;
}
public List<JsonTreeDataVo> getNodes() {
return nodes;
}
public void setNodes(List<JsonTreeDataVo> nodes) {
this.nodes = nodes;
} }
2.组装需要输出的json数组类
package cn.tisson.icsp.app.business.directive; import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component; import com.alibaba.dubbo.common.json.JSONObject;
import com.alibaba.dubbo.common.json.Jackson;
import com.alibaba.fastjson.JSONArray;
import com.fasterxml.jackson.databind.util.JSONPObject; import cn.allen.tree.vo; /**
* @author
* 2016年12月7日
*/
@Component
public class createTreeView{ @Autowired
private ItmDemandManageStub itmDemandManageStub; @Override
public Map getTreeViewData(Map map) throws IOException, Exception { //获取原始数据
List<Map<String, Object>> treeNodeList=itmDemandManageStub.treeData(); //组装需要返回给页面使用的json数据
List<JsonTreeDataVo> treeDataList = new ArrayList<JsonTreeDataVo>();
for (Map demandType : treeNodeList) {
JsonTreeDataVo treeData = new JsonTreeDataVo(); treeData.setId(String.valueOf(demandType.get("id")));
treeData.setText(String.valueOf(demandType.get("name")));
treeData.setParentId(String.valueOf(demandType.get("pId")));
treeDataList.add(treeData);
}
List<JsonTreeDataVo> newTreeDataList = this.getfatherNode(treeDataList); //递归遍历获取结果 map.put("treeNodeList",newTreeDataList);
} /*
*
* 方法描述:获取父节点
*
* */
public final static List<JsonTreeDataVo> getfatherNode(List<JsonTreeDataVo> treeDataList) {
List<JsonTreeDataVo> newTreeDataList = new ArrayList<JsonTreeDataVo>();
for (JsonTreeDataVo jsonTreeData : treeDataList) {
if(jsonTreeData.getParentId().equals("0")) {
//获取父节点下的子节点
jsonTreeData.setNodes(getChildrenNode(jsonTreeData.getId(),treeDataList));
newTreeDataList.add(jsonTreeData);
}
}
return newTreeDataList;
} /*
*
* 方法描述:获取子节点
*
* */
private final static List<JsonTreeDataVo> getChildrenNode(String id , List<JsonTreeDataVo> treeDataList) {
List<JsonTreeDataVo> newTreeDataList = new ArrayList<JsonTreeDataVo>();
for (JsonTreeDataVo jsonTreeData : treeDataList) {
if(jsonTreeData.getParentId().equals("0")) continue;
//这是一个子节点
if(jsonTreeData.getParentId().equals(id)){
//递归获取子节点下的子节点
if(treeDataList.size()>0){
jsonTreeData.setNodes(getChildrenNode(jsonTreeData.getId() , treeDataList));
newTreeDataList.add(jsonTreeData);
} }
}
return newTreeDataList;
}
}
3.页面显示调用
<input id="nameId" name="" type="text" value="测试" />
<!--机构树-->
<div id="tree" style="display:none;">
<div class="main">
<div class="closeSelect"><a href="javascript:void(0)" class="closeSelectTree" >关闭</a></div>
<div id="tree" class="treeview"></div>
</div>
</div> <style type="text/css">
/*弹出窗口*/
#tree{
border:1px solid #000;
width:400px;
min-width:780px;
height:400px;
OVERFLOW-Y: auto;
OVERFLOW-X:hidden;
background-color:#f5f8fc;
position:absolute;
z-index:1000;
} /*关闭按钮*/
#tree .closeSelect{height:50px;}
#tree .closeSelect a.closeSelectTree{position:absolute;top:10px;right:10px;display:block;width:60px;padding:4px 0;text-align:center;background:#fff;border:1px solid #85B6E2;color:#333;}
#tree .closeSelect a.closeSelectTree{color:#fff;border:1px solid #85B6E2;background:#85B6E2;}
#tree .closeSelect a:hover{border:1px solid #ccc} </style> <script type="text/javascript">
$(function(){ //打开tree弹窗
$("#nameId").click(function(){
$("#tree").show(); }) //关闭tree弹窗
$("#tree .closeSelectTree").click(function(){
$("#tree").hide();
}) //递归删除nodes为null的节点
function delNullNodes(data){
if(data){
for(var i=0; i<data.length; i++){
if(data[i].nodes==null||data[i].nodes.length==0){
delete data[i].nodes; //移除json对象的nodes属性
}else{
delNullNodes(data[i].nodes);//递归调用
}
}
}
return data;
} //加载treeView
$.ajax({
type: "post",
url:"${ctx}/xxxx/getTreeViewData",
dataType: "json",
success: function (result) { var treeData=delNullNodes(result.treeNodeList);//递归删除nodes为null的节点,重新生成json数据
$("#tree .treeview").treeview({
data:treeData, // 数据源
showCheckbox: false, //是否显示复选框
highlightSelected: true, //是否高亮选中
nodeIcon: 'glyphicon glyphicon-globe',
multiSelect: false, //多选
backColor:"#f5f8fc",//设置所有列表树节点的背景颜色。
levels:1, //设置继承树默认展开的级别。
onNodeSelected:function (event, node) { var parentId=node.parentId;
var nodeId=node.nodeId;
var text=node.demandTypePath;//node.text
$("#tree").hide(); //关闭tree树弹窗 } });
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.error(XMLHttpRequest.status+"\n"+XMLHttpRequest.readyState+"\n"+textStatus)
alert("树形结构加载失败！")
}
});
})
</script>
页面显示效果: