打怪升级真的好难，记录一点一滴，一滴一点，先上效果图。

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实现完整的一个页面的更多相关文章

  1. 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签

    今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...

  2. Div里面载入另一个页面的实现(取代框架)（AJax）（转）

    随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...

  3. JavaScript网站设计实践（七）编写最后一个页面 改进表单

    一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...

  4. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  5. Div里面载入另一个页面的实现(取代框架)（AJax）

    随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...

  6. Flutter - 添加从左向右滑动，返回上一个页面

    很多App比如微信.IT之家等都支持从屏幕左侧向右滑动,来返回上一个页面. 很多iOS上的App也都支持. 那么这个神奇的手势滑动是怎么实现的呢? 其实非常简单,只需要添加一句话即可. platfor ...

  7. Bootstrap--模仿官网写一个页面

    本文参考Bootstrap官方文档写了简单页面来熟悉Bootstrap的栅格系统.常用CSS样.Javascript插件和部分组件. 以下html代码可以直接复制本地运行: BootstrapPage ...

  8. ASP.NET MVC WebApi 返回数据类型序列化控制（json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面，各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

  9. 一个页面从输入URL到加载显示完成，发生了什么？

    面试经典题--URL加载 一.涉及基本知识点: 1. 计算机网络 五层因特尔协议栈: 应用层(dns.http):DNS解析成IP并完成http请求发送: 传输层(tcp.udp):三次握手四次挥手模 ...

随机推荐

  1. Google Protocol Buffer 的使用

    简介 Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准,目前已经正在使用的有超过 48,162 种报文格式定义和超过 12,183 ...

  2. 并发编程中.net与java的一些对比

    Java在并发编程中进行使用java.util.concurrent.atomic来处理一些轻量级变量 如AtomicInteger AtomicBoolean等 .Net中则使用Interlocke ...

  3. Office 365 系列二 ------- 如何批量部署Office 客户端

    针对于第一篇文章所讲的,我们最用使用用户可以单个点击进行安装,但是如果我们终端用户太多的情况,不可能大家都点击单个文件进行安装了,这样子既耗费时间也耗费 公司的网络带宽,那么我们可以采取离线下载的方式 ...

  4. js上传压缩图片

    原文链接:http://blog.csdn.net/iefreer/article/details/53039848 手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力. 因此在某些应用下( ...

  5. SQL Server查询结果插入表

    a) 插入新表 select * into newtable from table b) 插入已经存在的表 insert into table select * from table2 where.. ...

  6. python 连接redis工具类

    #!/usr/bin/python # coding=utf-8 __author__ = 'shuangjiang' import redis import sys default_encoding ...

  7. 当前界面最上面添加视图（UIWimdow）

    -(void)windowAddPushVc:(UIView *)pushView WithTitle:(NSString *)title { UIWindow *window = [UIApplic ...

  8. javascript全局变量和局部变量

    局部变量和全局变量可以同名.不过在函数体内部,局部变量的优先级高于全局变量.需要格外注意:专用于函数体内部的变量一定要用var关键字声明,否则该变量会变成全局变量.因为js是弱类型语言,所以它可以存放 ...

  9. [问题解决]《GPU高性能编程CUDA实战》中第4章Julia实例“显示器驱动已停止响应，并且已恢复”问题的解决方法

    以下问题的出现及解决都基于"WIN7+CUDA7.5". 问题描述:当我编译运行<GPU高性能编程CUDA实战>中第4章所给Julia实例代码时,出现了显示器闪动的现象 ...

  10. oracle计算时间秒数差

    --计算plsql处理时间差 --qzq declare time1 timestamp; --开始时间 time2 timestamp; --结束时间 sum1 ); --时间差(s) begin ...