1.根据treeView控件的属性建立vo类
1 package cn.allen.tree.vo; 2 3 import java.util.List; 4 import java.util.Map; 5 6 public class JsonTreeDataVo { 7 8 private String id; 9 private String text; 10 private String parentId; 11 private String icon; 12 private String href; 13 private String tags; 14 15 16 private List<JsonTreeDataVo> nodes; 17 18 19 20 21 22 public String getId() { 23 return id; 24 } 25 public void setId(String id) { 26 this.id = id; 27 } 28 public String getText() { 29 return text; 30 } 31 public void setText(String text) { 32 this.text = text; 33 } 34 public String getParentId() { 35 return parentId; 36 } 37 public void setParentId(String parentId) { 38 this.parentId = parentId; 39 } 40 public String getIcon() { 41 return icon; 42 } 43 public void setIcon(String icon) { 44 this.icon = icon; 45 } 46 public String getHref() { 47 return href; 48 } 49 public void setHref(String href) { 50 this.href = href; 51 } 52 53 public String getTags() { 54 return tags; 55 } 56 public void setTags(String tags) { 57 this.tags = tags; 58 } 59 public List<JsonTreeDataVo> getNodes() { 60 return nodes; 61 } 62 public void setNodes(List<JsonTreeDataVo> nodes) { 63 this.nodes = nodes; 64 } 65 66 67 }
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; 400px; min-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;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+" "+XMLHttpRequest.readyState+" "+textStatus) alert("树形结构加载失败!") } }); }) </script>
页面显示效果: