服务器后台代码生成TreeView的json字符串

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>

页面显示效果: