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

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. TCP拥塞控制算法 优缺点 适用环境 性能分析

    [摘要]对多种TCP拥塞控制算法进行简要说明,指出它们的优缺点.以及它们的适用环境. [关键字]TCP拥塞控制算法 优点    缺点   适用环境公平性 公平性 公平性是在发生拥塞时各源端(或同一源端 ...

  2. 旋转机械中Pitch Change的经验

    针对CFX (Compound File EXplorer)中rotor-stator interface 网格的处理,Pitch Change方法提供了四种交接算法(intersection alg ...

  3. strcpy 和 strcat

    strcpy 原型:char *strcpy( char *dest, char *src )  头文件:#include <string.h> 功能:将src地址开始且含有NULL结束符 ...

  4. InnoDB is limited to row-logging when transaction isolation level is READ COMMIT

    分析: http://blog.csdn.net/lingli219/article/details/46372737 解决办法: http://niuzhenxin.iteye.com/blog/1 ...

  5. Form提交是会刷新页面的

    今天发现如果页面中有form,点击提交按钮是会刷新页面的,为了禁止页面刷新行为,可以这么做: <form class="form-horizontal" id="u ...

  6. LeetCode 445 Add Two Numbers II

    445-Add Two Numbers II You are given two linked lists representing two non-negative numbers. The mos ...

  7. 通过rpc访问比特币核心钱包

    开发环境和工具 1. window 10 64 2. 比特核心钱包:bitcoin core 64 配置过程 1. 下载比特币核心钱包,下载链接https://bitcoin.org/en/downl ...

  8. jquery里面的名称冲突解决方法

    jQuery 使用 $ 符号作为 jQuery 的简介方式. 某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号. jQuery 使用名为 noConflict( ...

  9. WebService基本概念及原理

    一.Web Service基本概念 WebService是一种跨编程语言和跨操作系统平台的远程调用技术.Web Service也叫XML Web Service WebService是一种可以接收从I ...

  10. 16.10.17学到的Java知识

    1. 例:3-2.6==0.4的值是什么?可能乍一看,感觉是返回TRUE,因为3-2.6=0.4,0.4==0.4:所以返回TRUE. 然而,上面分析在JAVA中是错的. 由于浮点数的运算在JAVA中 ...