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

最新推荐文章于 2021-06-09 16:33:53 发布

奋斗de骚年

最新推荐文章于 2021-06-09 16:33:53 发布

阅读量398

点赞数

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

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

 
   [java]  
   view plaincopy
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，会显示上一篇的效果。

 
   [java]  
   view plaincopy
@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中）

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

table.jsp

 
   [html]  
   view plaincopy
<%@ 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传入到后台中

 
   [java]  
   view plaincopy
@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;  
  
}  

奋斗de骚年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
highcharts click事件获取数据传给datagrid ，动态加载数据

点击highcharts的柱子会触发click事件，并将数据传给后台获取到相应部门下的所有员工信息显示在datagrid如下：添加在charts的初始化里[java] view plain copyplotOptions : { series : { cursor : 'pointer', events...
复制链接

扫一扫