学习背景 前两个星期用springMVC和mybatis写运维配置管理系统的后台,
增删改查全部使用json作为数据交换的标准
现在需要用easyUI来实现前后台的对接
easyui背景知识：
同事用easyui实现了简单的样式和静态页面，我需要用datagrid来渲染后台返回的数据，
后台返回的是具有内嵌对象的json数组
比如：[{“ptId”:2,”qxyId”:2,”ptmc”:”期货资管云４”,”ywzfzrId”:3,”ywbgId”:4,”qysj”:”2016-03-16”,”zt”:”已启用”,”jcpt”:”阿里云”,”ptdz”:”杭州”,”ptyt”:null,”pttp”:null,”bz”:”备注２”,”qxy”:{“qxyId”:2,”mc”:”经济云”},”zg”:{“ryId”:null,”xm”:”陈磊”,”gw”:null},”bg”:{“ryId”:null,”xm”:”谭俊”,”gw”:null},”ywList”:[{“ywId”:null,”ywmc”:”恒生估值2.0”,”ptId”:2,”bbh”:null,”bz”:null}]}]
需要解决的问题
解决思路和方法 datagrid 关于数据的属性 名称 类型 描述 默认值 method string 请求远程数据的方法（method）类型。 post url string 从远程站点请求数据的 URL。 null queryParams object 当请求远程数据时，发送的额外参数。 {} data array,object 要加载的数据。该属性自版本 1.3.2 起可用。 null loader function 定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数： json loader
后台接收的类型必须是序列化后的json,而且请求方式必须是post，但是datagrid的queryParams的形式是一个对象，json对象，而不是字符串
不管datagrid选项中有没有queryParams,后面跟{}或者JSON.stringify({})
都是报415错误
queryParams后面跟JSON.stringify({})
queryParams后面跟{}或者无queryParams
解决方法：用ajax请求数据，将请求后的数据作为datagrid的本地数据
1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
type:"post" ,
url:urlPrefix + '/pt/query.do' ,
dataType:"json" ,
contentType:"application/json;charset=UTF-8" ,
data:JSON .stringify(queryCondition),
success: function (data )
*****
}
error:function (data )
}
@RequestBody要求必须有参数EasyUI中文官网文档
js 是如何访问嵌套的json的？下面是在node中实现的 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
shuai@localhost ~ % node
> var a = {}
undefined
> a.name = 'siyongshuai'
'siyongshuai'
> var b = {}
undefined
> b.a = a
{ name : 'siyongshuai' }
> b.a.name
'siyongshuai'
var d= [{"ptId" :2 ,"qxyId" :2 ,"ptmc" :"期货资管云４" ,"ywzfzrId" :3 ,"ywbgId" :4 ,"qysj" :"2016-03-16" ,"zt" :"已启用" ,"jcpt" :"阿里云" ,"ptdz" :"杭州" ,"ptyt" :null ,"pttp" :null ,"bz" :"备注２" ,"qxy" :{"qxyId" :2 ,"mc" :"经济云" },"zg" :{"ryId" :null ,"xm" :"陈磊" ,"gw" :null },"bg" :{"ryId" :null ,"xm" :"谭俊" ,"gw" :null },"ywList" :[{"ywId" :null ,"ywmc" :"恒生估值2.0" ,"ptId" :2 ,"bbh" :null ,"bz" :null }]}]
undefined
> d.zg.xm
> d[0 ].zg.xm
'陈磊'
> var e ={"ptId" :2 ,"qxyId" :2 ,"ptmc" :"期货资管云４" ,"ywzfzrId" :3 ,"ywbgId" :4 ,"qysj" :"2016-03-16" ,"zt" :"已启用" ,"jcpt" :"阿里云" ,"ptdz" :"杭州" ,"ptyt" :null ,"pttp" :null ,"bz" :"备注２" ,"qxy" :{"qxyId" :2 ,"mc" :"经济云" },"zg" :{"ryId" :null ,"xm" :"陈磊" ,"gw" :null },"bg" :{"ryId" :null ,"xm" :"谭俊" ,"gw" :null },"ywList" :[{"ywId" :null ,"ywmc" :"恒生估值2.0" ,"ptId" :2 ,"bbh" :null ,"bz" :null }]}
undefined
> e.ptmc
'期货资管云４'
> e.zg.xm
'陈磊'
>
datagrid 操作json的方式，一级属性可通过下面的配置直接访问1
2
3
4
5
6
7
8
9
10
11
12
{
field : 'ywbgId' ,
title : '运维备岗' ,
width : 200 ,
align : 'center' ,
editor : {
type : 'validatebox' ,
options : {
required : false
}
}
}
若把filedfiled换成bg.xm1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
field : 'ywbgId' ,
title : '运维备岗' ,
width : 200 ,
align : 'center' ,
editor : {
type : 'validatebox' ,
options : {
required : false
}
},
formatter : function (value, row, index )
if (row.zg) {
return row.zg.xm;
} else {
return value;
}
}
}
贴一下平台管理模块控制层（controller）代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
package com.hundsun.acm.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.hundsun.acm.model.Pt;
import com.hundsun.acm.service.impl.PtServiceImpl;
@Controller
@RequestMapping ("manage_page" )
public class PtController
@Autowired
private PtServiceImpl ptService;
@RequestMapping (value = "/pt/get.do" )
public @ResponseBody List<Pt> get () {
Pt pt = new Pt();
return ptService.getPtByCondition(pt);
}
@RequestMapping (value = "/pt/query.do" )
public @ResponseBody List<Pt> getPtByName (@RequestBody Pt condition) {
try {
return ptService.getPtByCondition(condition);
} catch (Exception e) {
System.out.println("查询××××××××××平台信息×××××××××发生异常" );
return null ;
}
}
@RequestMapping (value = "/pt/update" , method = RequestMethod.POST)
public @ResponseBody String updatePt (@RequestBody Pt record) {
try {
int flag = ptService.updateById(record);
if (flag == 1 ) {
return "success" ;
} else {
return "error" ;
}
} catch (Exception e) {
System.out.println("更新××××××××××平台信息×××××××××发生异常" );
return null ;
}
}
@RequestMapping (value = "/pt/add.do" )
public @ResponseBody String addPt (@RequestBody Pt record) {
try {
int flag = this .ptService.add(record);
if (flag == 1 ) {
return "success" ;
} else {
return "error" ;
}
} catch (Exception e) {
System.out.println("增加××××××××××平台信息×××××××××发生异常" );
return null ;
}
}
@RequestMapping (value = "/pt/delete.do" , method = RequestMethod.POST)
public @ResponseBody String deletePtByConditon (@RequestBody Pt record) {
try {
int flag = this .ptService.deleteById(record);
if (flag == 1 ) {
return "success" ;
} else {
return "error" ;
}
} catch (Exception e) {
System.out.println("删除××××××××××平台信息×××××××××发生异常" );
return null ;
}
}
}