服务器后台代码生成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>
页面显示效果:
服务器后台代码生成TreeView的json字符串的更多相关文章
- js如何解析后台传过来的json字符串
1.js如何解析后台传过来的json字符串? 注意:js是无法直接接收和使用json或者Php的数据,用的话会出现undefined,所以要转换一下. 方式一: var str = '{"r ...
- 后台给前台传JSON字符串,前台解析并拼接显示
后台传JSON public class CourseType : IHttpHandler { Epoint.PeiXun.Bizlogic.BLL.CourseLibrary.PX_CourseT ...
- 后台date类型转换为json字符串时,返回前台页面的是long类型的时间戳问题解决
学习springboot框架,写个博客系统,在后台管理的日志管理中,遇到了后台查询的日期格式的结果返回到页面变成了日期的时间戳了.然后摸索了三种方法来解决.页面的显示问题如下图. 问题页面回顾: 本案 ...
- jQuery中使用$.each()遍历后台响应的json字符串问题
今天在做练习项目的时候,使用$.each()方法遍历后台传过来的json字符串时,chrome浏览器中发现如下问题 Cannot use 'in' operator to search for 'l ...
- JSON字符串-赋张最初接触后台从map转json的方法
**************************************** json数组: *************************************************** ...
- webpages框架使用@razor语法向js代码传递Json字符串
进入web开发时间太短,一个人尝试着做了几个初级项目,遇到了太多的困难.尽管不是学开发专业的,仅为爱好所以硬着头皮坚持了下来. 将遇到的问题记录下来,备查. 使用vs2015中asp.net razo ...
- 彻底了解构建 JSON 字符串的三种方式
原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7701856.html 前言:JSON 是轻量级的数据交换格式,很常用,尤其是在使用 Ajax ...
- 前后端交互json字符串
//将需要的参数转成json字符串,然后用utf-8编码 var obj = encodeURIComponent(JSON.stringify(this.categories),"utf- ...
- SNF快速开发平台MVC-EasyUI3.9之-WebApi和MVC-controller层接收的json字符串的取值方法和调用后台服务方法
最近项目组很多人问我,从前台页面传到后台controller控制层或者WebApi 时如何取值和运算操作. 今天就都大家一个在框架内一个取值技巧 前台JS调用代码: 1.下面是选中一行数据后右键点击时 ...
随机推荐
- 阿里云物联网套件(iot)设备间通信(M2M)在web端的实践
之前通过nodejs连接到阿里云物联网mqtt,后又用浏览器连接,总结一下: 由于项目是SPA,使用webpack,关键代码: 同样使用mqtt.js之前先install: npm install - ...
- Java——string类型与date类型之间的转化
String类型转化为Date类型 方法一 Date date=new Date("2019-01-25"); 方法二 String =(new SimpleDateFormat( ...
- Installshield创建快捷方式不能正常运行的几种原因
Installshield软件提供创建快捷方式的功能,但是经常有朋友发现创建了以后快捷方式不能运行,在此列一下几种常见原因供各位朋友参考: 1. 没有选择相应的working directory,这种 ...
- vue.js 精学记录
v-bind:class使用的方式: 1.对象与法::class="{'active':isActive}" 此时当isActive为true时,会拥有active 2.数组语法: ...
- spring cloud gateway的stripPrefix配置
序 本文主要研究下spring cloud gateway的stripPrefix配置 使用zuul的配置 zuul: routes: demo: sensitiveHeaders: Access-C ...
- POJ - 1222: EXTENDED LIGHTS OUT (开关问题-高斯消元)
pro:给定5*6的灯的状态,如果我们按下一个灯的开关,它和周围4个都会改变状态.求一种合法状态,使得终状态全为关闭: sol:模2意义下的高斯消元. 终于自己手打了一个初级板子. #include& ...
- 搭建Jmeter + Grafana + InfluxDB性能测试监控环境
背景 Jmeter原生的实时监控每半分钟收集一次数据,只能在Linux控制台查看日志输出,界面看起来不直观,图表报告只能等压测结束后才能生成.如下图为jmeter在Linux下运行的实时日志: 那么如 ...
- (转)用JS获取地址栏参数的方法(超级简单)
转自http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获 ...
- cisco4507引擎模式切换
1.redu mode sso2.wri 可能存在的问题:无法切换至sso原因:ios镜像版本不一致 解决方法: 1. copy bootflash: slavebootflash: 2. d ...
- robotframework之滚动条
在测试过程中遇到侧边栏以及下拉框中元素超过div长度时,会自动增加滚动条 网上对于robotframework中的滚动条信息只有: Execute Javascript document.docume ...