用datagrid实现完整的一个页面
Posted 扬也
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用datagrid实现完整的一个页面相关的知识，希望对你有一定的参考价值。
打怪升级真的好难，记录一点一滴，一滴一点，先上效果图。
1.想完成一个界面，先得有界面。界面是在WebRoot下的根目录文件中新建的zjqktj.jsp中建立的，再通过java在后台调用数据库取出数据实现图表显示。这里提示引用了easyui里的css框架，zjqktj.jsp代码显示：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% 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>My JSP \'zjqktj.jsp\' starting page</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="css/easyui.css"> <link rel="stylesheet" type="text/css" href="css/icon.css"> <script type="text/javascript" src="js/jquery_min.js"></script> <script type="text/javascript" src="js/jquery_easyui_min.js"></script> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <div> <table class="easyui-datagrid" data-options="url:\'Zjqktj.do\',title:\'装机情况统计\'" > <thead> <tr> <th data-options="field:\'dzmc\',width:100">电站名称</th> <th data-options="field:\'sjzjrl\',width:100 ">设计装机容量(MW)</th> <th data-options="field:\'ytcrl\',width:100">已投产容量(MW)</th> <th data-options="field:\'azfszl\',width:100">安装方式种类(种)</th> <th data-options="field:\'nbqcjs\',width:100">逆变器厂家(家)</th> <th data-options="field:\'nbqsl\',width:100">逆变器数量(台)</th> <th data-options="field:\'njhdxlyxss\',width:100">年计划等效利用小时(h)</th> </tr> </thead> </table> </div> </body> </html>
2.前端界面做好了，在model包里面新建一个java类。引包，定义变量，数据库连接，sql语句一样都不能少。最后打注释的一段是代码写完后用来测试是否能取到数据的，右键单击空白界面处，选中“debug as”。
package com.pv.model; import java.sql.*; import java.util.ArrayList; public class GetZjqktj { public ArrayList getZjqktj(String username) throws SQLException{ //根据用户名取出群组 Statement st=null; ResultSet rs =null; Connection ct=null; ArrayList al= new ArrayList(); try{ //取出用户的所有电站信息 ct=(new ConnectDB()).ConnDB(); st =ct.createStatement(); rs=st.executeQuery("select A.`电站名称`,A.`装机容量`,A.`已投产容量`,COUNT(DISTINCT B.`厂家`) AS 厂家数,COUNT(DISTINCT A.`安装方式`) AS 安装方式种类,COUNT(B.`设备ID`)AS 逆变器数量,ROUND( D.`年总发电量`/A.`装机容量`,2 )AS 年计划等效利用小时数 from `电站信息列表` A ,`逆变器信息列表` B,`用户信息表` C,`电站月统计表` D WHERE A.`电站编码`=B.`组列表_电站编码`"+ "AND A.`电站编码`=C.`电站信息列表_电站编码`AND A.`电站编码`=D.`电站信息列表_电站编码`AND C.`用户名`=\'"+username+"\' GROUP BY a.`电站编码`"); while(rs.next()){ String[]str=new String[7]; str[0]=rs.getString(1); str[1]=rs.getString(2); str[2]=rs.getString(3); str[3]=rs.getString(4); str[4]=rs.getString(5); str[5]=rs.getString(6); str[6]=rs.getString(7); al.add(str); } }catch(Exception e){ e.printStackTrace(); } return al; } } // public static void main(String[] args) throws SQLException{ // GetZjqktj zz=new GetZjqktj(); // ArrayList al=zz.getZjqktj("yangyang"); // for(int i=0;i<al.size();i++) // { // String[] str=(String[])al.get(i); // for(int j=0;j<str.length;j++){ // System.out.println(str[j]); } // } // } // // // }
3.为了实现jsp页面的优雅化，不在其中增加java片段。因此在controller包中新建ZjqktjController.java类，通过json传参直接将数据库中取出的数据对应到前端界面中来，这部分还需要消化。
package com.pv.control; import java.io.IOException; import java.sql.SQLException; import java.util.ArrayList; import java.util.HashMap; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; import com.pv.model.GetGroup; import com.pv.model.GetZjqktj; @Controller public class ZjqktjController { @RequestMapping(value = "Zjqktj.do") public void Zjqktj(HttpServletRequest req,HttpServletResponse res) throws IOException, SQLException{ Map<String, Object> result = new HashMap<String, Object>(2) ; String username= (String)req.getAttribute("username"); res.setCharacterEncoding("utf-8"); JSONArray jsonArray = new JSONArray(); GetZjqktj zz = new GetZjqktj(); ArrayList al=zz.getZjqktj("yangyang"); if(al.size()==0) { } else { for(int i=0;i<al.size();i++){ JSONObject jsonObject = new JSONObject(); String[] str = (String[]) al.get(i); jsonObject.put("dzmc", str[0]); jsonObject.put("sjzjrl",str[1]); jsonObject.put("ytcrl", str[2]); jsonObject.put("nbqcjs",str[3]); jsonObject.put("azfszl", str[4]); jsonObject.put("nbqsl", str[5]); jsonObject.put("njhdxlyxss", str[6]); jsonArray.add(jsonObject) ; } result.put("total", 1); result.put("rows",jsonArray) ; Object o=JSONObject.toJSON(result); res.getWriter().write(o.toString()); res.getWriter().flush(); res.getWriter().close(); } } }
4.需要强化基本语法，或者尝试用别的方法实现界面。先慢慢爬，再学会走。
以上是关于用datagrid实现完整的一个页面的主要内容，如果未能解决你的问题，请参考以下文章