SpringMVC作为Controller向前端传递JSON数据,前端用Extjs接收
来源:互联网 发布:网络盒子断网处理方法 编辑:程序博客网 时间:2024/06/03 20:12
由于项目需求,前端使用Extjs的treePanel组件做菜单,一个与后台交互的树形菜单需要三个重要的组件:
1、model:model作为数据源,是将后台传过来的json数据与前端统一。
例如:后台获取到一组对象集合List< User >,在User中使用@JsonProperty注解定义json名,此处省略get/set方法
这里需要注意的一点事引入json的注解包:com.fasterxml.jackson.annotation.JsonProperty,之前因为没注意,导致json字段重命名失败,ext又不认识name,数据展示不出来的情况。
public class TreeItem {@JsonProperty("Id")private Integer id;@JsonProperty("text")private String name;@JsonProperty("ParentmenuID")private String parentId;private List<TreeItem> children= new ArrayList<TreeItem>();@JsonProperty("leaf")private boolean leaf;
那么页面上用定义数据源就是这样:
//树形菜单数据源Ext.define("ModuleStore", {extend: "Ext.data.Model",fields: [ { name: "Id", mapping:"Id", type: "int" }, { name: "text", mapping: "Mname", type: "string" }, { name: "ParentmenuID", marpping: "ParentmenuID", type:"string" } ]});
fields中对应的属性正是刚才json重命名的字段名,至于为什么要把name重命名为text,是因为之后要在treePanel里配置store,而treePanel只认属性为text的为名称;
2、创建store,一般组件创建store只需继承Ext.data.Store,但是作为treePanel的Store必须继承于Ext.data.TreeStore。
关于store和model的关系,之前看过一篇文章,说的比较好。model相当于java中的对象,而store相当于为这些对象存储数据的集合。
var store = Ext.create("Ext.data.TreeStore", { fields: ["Id", "Mname", "ParentmenuID"], proxy: { type: "ajax", url: "/user/getMenuList.do", reader:{ type:'json' } } });
3、最后就是创建树形菜单,再将数据加进来
var treePanel = new Ext.tree.TreePanel({ border: false, autoScroll: true, store: store, rootVisible: false, enable: false, dataType: "json",//提交参数的数据类型 });
这样,将这个树形菜单加在ViewPort布局的west中,一个菜单功能基本就完成了。
阅读全文
1 0
- SpringMVC作为Controller向前端传递JSON数据,前端用Extjs接收
- springMVC接收前端json数据的总结
- SpringMVC,Controller如何接收前端传递过来的数组
- servlet向前端传递json数据
- JSON后端向前端传递数据 JAVA
- springmvc和js前端的数据传递和接收方式
- springMVC如何接收前端传递的数组数据
- springmvc和js前端的数据传递和接收方式
- springMVC @ResponseBody接收前端Json字符串
- SpringMVC中controller接收Json数据
- springMVC中前端将传递数据传递到后端后端的接收方式
- jsp 向controller传递json数据
- SpringMVC 前端接收ResponseBody数据例子
- springmvc 接收前端数据 map。数组
- springMVC 中接收前端传递的对象、数组等数据的方式详解
- Springmvc json加载数据 前端拼接技术
- Spring MVC 接收前端传递的表单json字符串
- 怎么在SpringMvc拦截器或者request中取得前端传递过来的Json数据
- RocketMQ存储篇——整体结构以及MappedFile讲解
- Numpy库部分函数使用
- RePlugin的一些问题
- C# Socket客户端断开后 服务器端没能判断客户端断开
- SpannableStringBuilder的setSpan方法使用需注意点!
- SpringMVC作为Controller向前端传递JSON数据,前端用Extjs接收
- React Native之ScrollView控件详解
- React中一个没人能解释清楚的问题——为什么要使用Virtual DOM
- Java集合框架源码解析-ArrayList
- CSS布局模型
- 层次聚类算法
- ng-options详解
- 日志过滤查找 并输出到指定文件
- php数据类型vs JS 数据类型