服务器后台代码生成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>

页面显示效果: