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

来源：互联网发布：机械杆做丝安全数据编辑：程序博客网时间：2024/05/22 17:32

点击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")@ResponseBodypublic 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,// 每页显示的记录条数，默认为10pageList : [ 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")@ResponseBodypublic 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了

0 0