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>

页面显示效果:

服务器后台代码生成TreeView的json字符串的更多相关文章

  1. js如何解析后台传过来的json字符串

    1.js如何解析后台传过来的json字符串? 注意:js是无法直接接收和使用json或者Php的数据,用的话会出现undefined,所以要转换一下. 方式一: var str = '{"r ...

  2. 后台给前台传JSON字符串,前台解析并拼接显示

    后台传JSON public class CourseType : IHttpHandler { Epoint.PeiXun.Bizlogic.BLL.CourseLibrary.PX_CourseT ...

  3. 后台date类型转换为json字符串时,返回前台页面的是long类型的时间戳问题解决

    学习springboot框架,写个博客系统,在后台管理的日志管理中,遇到了后台查询的日期格式的结果返回到页面变成了日期的时间戳了.然后摸索了三种方法来解决.页面的显示问题如下图. 问题页面回顾: 本案 ...

  4. jQuery中使用$.each()遍历后台响应的json字符串问题

    今天在做练习项目的时候,使用$.each()方法遍历后台传过来的json字符串时,chrome浏览器中发现如下问题  Cannot use 'in' operator to search for 'l ...

  5. JSON字符串-赋张最初接触后台从map转json的方法

    **************************************** json数组: *************************************************** ...

  6. webpages框架使用@razor语法向js代码传递Json字符串

    进入web开发时间太短,一个人尝试着做了几个初级项目,遇到了太多的困难.尽管不是学开发专业的,仅为爱好所以硬着头皮坚持了下来. 将遇到的问题记录下来,备查. 使用vs2015中asp.net razo ...

  7. 彻底了解构建 JSON 字符串的三种方式

    原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7701856.html 前言:JSON 是轻量级的数据交换格式,很常用,尤其是在使用 Ajax ...

  8. 前后端交互json字符串

    //将需要的参数转成json字符串,然后用utf-8编码 var obj = encodeURIComponent(JSON.stringify(this.categories),"utf- ...

  9. SNF快速开发平台MVC-EasyUI3.9之-WebApi和MVC-controller层接收的json字符串的取值方法和调用后台服务方法

    最近项目组很多人问我,从前台页面传到后台controller控制层或者WebApi 时如何取值和运算操作. 今天就都大家一个在框架内一个取值技巧 前台JS调用代码: 1.下面是选中一行数据后右键点击时 ...

随机推荐

  1. for语句,range() 函式

    for 语句在任意序列 (列表或者字符串) 中迭代时, 总是按照元素在序列中的出现顺序依次迭代. 2 ... a = ['cat', 'window', 'defenestrate']3 >&g ...

  2. mayavi与X11的一些坑总结

    1. Mayavi:https://docs.enthought.com/mayavi/mayavi/ 适合渲染各种和图形有关的数据.在大批量处理数据时,一般不希望对每一个渲染好的对象都将其显示出来, ...

  3. webpack前端开发环境搭建

    要搭建webpack开发环境,首先要安装NodeJS,后面的过程均在NodeJS已经安装的基础上进行. 1. 首先建立一个工程目录,命名为,其目录结构如下: 其中dist目录用于存放生成的文件,src ...

  4. python 启动shell报错 Subprocess Startup Error

    如图所示启动python的IDLE以后,按F5启动module或者启动shell的时候就会启动失败提示上面错误,刚开始百度知道解决方案不靠谱,最后找到原因是我之前看小甲鱼的教学视频时,新建了一个pic ...

  5. mysql数据库 事务和索引

    1.MySQL数据库特性:  原子性(atomidity) 一个事务必须被视为一个不可分割的最小工作单元,整个事务中的所有操作要么全部提交成功,要么全部失败回滚,对于一个事务来说,不可能只执行其中的一 ...

  6. Vue双向数据绑定原理

    https://www.cnblogs.com/kidney/p/6052935.html?utm_source=gold_browser_extension

  7. Spock - Document -04- Interaction Based Testing

    Interaction Based Testing Peter Niederwieser, The Spock Framework TeamVersion 1.1 Interaction-based ...

  8. String对象的属性和方法

    String对象的属性和方法   创建字符串的两种方法: 1.直接量:var str = ""; 2.字符串对象创建: new String(""); Stri ...

  9. .singleton.php 文件 (单例模式可被继承 代码实例)

    <?phpnamespace lib;abstract class Singleton{ //设置一个私有的静态属性作为中间变量 private static $instancePool = [ ...

  10. .htaccess 文件来进行用户组的目录权限访问控制

    <IfModule rewrite_module>RewriteEngine onRewriteRule ^((?:bootstrap|css|img|js||MathJax|video) ...