bootstrap table处理含有子集json的数据以及fastjson禁止循环引用的问题
2015-12-16 13:52
906 查看
先简要介绍下项目:springmvc+hibernate框架,为了方便呈现数据前台使用了bootstrap的插件,使用的json是阿里巴巴的fastjson。
首先是bootstrap table呈现含有子json的json数据问题。官方demo里给出的json数据是酱紫:
但是我们从后台传值的json是含有子json字符串的,data-filed输入 username,editor.username等都无法呈现数据:
度娘输入bootstrap table json根本木有任何搜索结果,后来想到自己曾经用过的easyui的table ,搜索了下有相关博客介绍,于是按照类似easyui的table修改bootstrap,代码如下
这样最终证明是可以呈现数据的。
!但是测试时总是显示row.chiefeditor.username 为undefined。在控制台输出json数据时是以类似于这样的形式 {"$ref":"$.data[1]"}输出的。当时没想到是json循环引用js没有识别的问题,尝试各种结果后在度娘里输入js json $ref 后来发现是前端无法解析。于是开始搜索fastjson 禁止循环引用相关的博客,做了修改如下:
springmvc配置文件:
Java代码:在对象转换为json时候禁止循环引用
PS:关于配置文件,当时根据网上很多的博客给的方案去修改配置文件运行都会提示messageconvert冲突,又经历各种搜索,在度娘输入spring mvc fastjsonHttpMesageConverter配置抱着尝试的心态去运行,最终成功了。所以说尽信书不如无书,还是要自己多尝试实践。
最终的结果:
愉快的呈现了数据~~~
首先是bootstrap table呈现含有子json的json数据问题。官方demo里给出的json数据是酱紫:
但是我们从后台传值的json是含有子json字符串的,data-filed输入 username,editor.username等都无法呈现数据:
度娘输入bootstrap table json根本木有任何搜索结果,后来想到自己曾经用过的easyui的table ,搜索了下有相关博客介绍,于是按照类似easyui的table修改bootstrap,代码如下
这样最终证明是可以呈现数据的。
!但是测试时总是显示row.chiefeditor.username 为undefined。在控制台输出json数据时是以类似于这样的形式 {"$ref":"$.data[1]"}输出的。当时没想到是json循环引用js没有识别的问题,尝试各种结果后在度娘里输入js json $ref 后来发现是前端无法解析。于是开始搜索fastjson 禁止循环引用相关的博客,做了修改如下:
springmvc配置文件:
<!-- 启用spring mvc--> <mvc:annotation-driven> <mvc:message-converters register-defaults="true"> <!-- 避免IE执行AJAX时,返回JSON出现下载文件 --> <bean id="fastJsonHttpMessageConverter" class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter"> <property name="supportedMediaTypes"> <list> <value>application/json;charset=UTF-8</value> </list> </property> <property name="features"> <list> <value>WriteMapNullValue</value> <value>QuoteFieldNames</value> </list> </property> </bean> </mvc:message-converters> </mvc:annotation-driven>
Java代码:在对象转换为json时候禁止循环引用
JSONArray checkedAds=JSONArray.parseArray(JSON.toJSONString(checkedAdvers,SerializerFeature.DisableCircularReferenceDetect));
PS:关于配置文件,当时根据网上很多的博客给的方案去修改配置文件运行都会提示messageconvert冲突,又经历各种搜索,在度娘输入spring mvc fastjsonHttpMesageConverter配置抱着尝试的心态去运行,最终成功了。所以说尽信书不如无书,还是要自己多尝试实践。
最终的结果:
愉快的呈现了数据~~~
相关文章推荐
- Django+Jquery+Bootstrap Modal+Iframe使用异步机制上传文件实现方法
- JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示
- bootstrap修改默认字体,更换为微软雅黑或其他字体的方法
- bootstrap-wysiwyg整合ajaxFileUpload实现图片实时上传刷新
- [置顶] bootstrap创建登录注册页面
- 响应式bootstrap - demo
- Bootstrap <第一篇>
- BootStrap DateTimePicker使用
- 使用bootstrap tooltip控件动态修改提示内容
- 使用bootstrap tooltip控件动态修改提示内容
- angular-bootstrap
- 【转】让Bootstrap轮播插件carousel支持左右滑动手势的三种方法
- EF+MVC+Bootstrap 项目实践 Day7
- Bootstrap4
- EF+MVC+Bootstrap 项目实践 Day6
- BootStrap table 数据填充与分页应用总结
- bootstrap的验证和确认对话框
- Bootstrap 进度条
- Bootstrap3.0入门学习系列教程
- 扩展bootstrap的popover, 增加在指定时间内fadeOut的功能