您的位置：首页 > 其它

highcharts click事件获取数据传给datagrid ，动态加载数据

2016-02-23 17:21 453 查看

点击highcharts的柱子会触发click事件，并将数据传给后台获取到相应部门下的所有员工信息显示在datagrid

如下：添加在charts的初始化里

plotOptions : {
series : {
cursor : 'pointer',
events : {
click : function(e) {
var value=e.point.id;
location.href ="user/showTable.shtml?id=" +value;
}
}
},

这里的e.point.id 是我再后台返回json数据时在jsonobject添加的，表明了部门的id编号，这样后台就可以根据id获取该部门下的用户

在后台，json数据里获取到了一些value，会显示上一篇的效果。

@RequestMapping(value="/getChartsJson" ,produces = "text/html;charset=UTF-8")
@ResponseBody
public String getJson() {
/*
JSONObject params = new JSONObject();
params.put("name", deptService.getDeptname());
params.put("count", userService.getDeptCountList());
*/
List<Integer> listcount=userService.getDeptCountList();
List<String> listname=deptService.getDeptname();
List<Integer> listdeptid=deptService.getDeptid();

JSONArray jsonarray=new JSONArray();
for(int i=0;i<listcount.size();i++){
JSONObject params = new JSONObject();
params.put("name", listname.get(i));
params.put("count", listcount.get(i) );
params.put("id", listdeptid.get(i) );

jsonarray.add(i,params );
}
JSONObject json = new JSONObject();
json.put("list", jsonarray);
String s=json.toString();
return s;

}

再点击柱子后会调到后台，目的是将我们获取到该柱子所表示的部门id值传入到要显示datagrid的jsp中（这里传入到了table.jsp中）

@RequestMapping("/showTable")
public ModelAndView showTable(Integer id) throws Exception {
ModelAndView mav = new ModelAndView("table");
mav.addObject("id", id);
return mav;
}

table.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>员工管理</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<script type="text/javascript"
src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<script type="text/javascript" src="jquery-form.js"></script>
<link href="jquery-easyui-1.4.4/themes/default/easyui.css"
rel="stylesheet" type="text/css" />
<link href="jquery-easyui-1.4.4/themes/icon.css" rel="stylesheet"
type="text/css" />

<link href="css/userdlg.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
$(function () {
$('#dgg').datagrid({
// url:"user/showUser.shtml",
//url:"user/showPageUser.shtml",
url : "user/getUserByDeptno.shtml?id=" + ${id},

columns : [ [  {
field : 'id',
title : '编号',
align : 'center',
width : 60
}, {
field : 'userName',
title : '用户名',
align : 'center',
width : 60
}, {
field : 'age',
title : '年龄',
width : 60,
align : 'center'
}, {
field : 'position',
title : '职位',
width : 60,
align : 'center'
}, {
field : 'sex',
title : '性别',
width : 60,
align : 'center'
}, {
field : 'deptno',
title : '部门编号',
width : 60,
height:60,
align : 'center'
} ] ]
});
var p = $("#dgg").datagrid("getPager");
$(p).pagination({
pageSize : 10,// 每页显示的记录条数，默认为10
pageList : [ 5, 10, 15 ],// 可以设置每页记录条数的列表
beforePageText : '第',// 页数文本框前显示的汉字
afterPageText : '页    共 {pages} 页',
displayMsg : '当前显示 {from} - {to} 条记录   共 {total} 条记录',

});

});

</script>
</head>

<body>

<table id="dgg" title="部门员工" class="easyui-datagrid"
style="width: 90%; height: 80%" fitcolumns="true"
pagination="true" rownumbers="true">

</table>

<input type="button" value="返回" onclick="javascript:history.go(-1);">
</body>
</html>

datagrid动态加载url，将id传入到后台中

@RequestMapping(value = "/getUserByDeptno", produces = "text/html;charset=UTF-8")
@ResponseBody
public String getUserByDeptno(HttpServletResponse response,
@RequestParam(required = false, defaultValue = "10") Integer rows,
@RequestParam(required = false, defaultValue = "1") Integer page,
@RequestParam(value = "id") Integer id) {
// response.setContentType("application/json; charset=utf-8");
// response.setContentType("text/json");
// response.setCharacterEncoding("UTF-8");
JSONObject params = new JSONObject();
params.put("pageIndex", (page - 1) * rows);
params.put("pageSize", rows);
params.put("id", id);
List<User> user = userService.getUserByDeptno(params);
JSONArray jsonArray = JSONArray.fromObject(user);
JSONObject user_json = new JSONObject();
user_json.put("total", userService.getCountByDeptno(id));
user_json.put("rows", jsonArray);
String s = user_json.toString();
return s;

}

这样就显示我们需要的user了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航