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

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. ios10 no route to host

    IdTCPClient1 ios10 no route to host IOS 9 正常 IOS10 出错,参考下面的设置解决问题 http://www.sh-huhe.com/solution/14 ...

  2. mybatis支持属性使用驼峰的命名

    数据库字段,我们一般都用下划线分隔 但是Model中的属性,一般用驼峰命名 如果需要自动映射,则配置mybatis-config.xml文件 <settings> <setting ...

  3. linux病毒

    linux病毒查杀规范 一.病毒发现 1.ps -A.ps -ef.ps -aux查看是否有异常进程 2.last,lastlog命令可查看最近登录的帐户及时间 3.查看/var/log/messag ...

  4. C语言中两种方式表示时间日期值time_t和struct tm类型的相互转换

    使用gmtime函数或localtime函数将time_t类型的时间日期转换为structtm类型: 使用time函数返回的是一个long值,该值对用户的意义不大,一般不能根据其值确定具体的年.月.日 ...

  5. Md5 签名算法

    /// <summary>        /// MD5签名        /// </summary>        /// <param name="pre ...

  6. 使用CSS完美实现垂直居中的方法

    使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题,作为网页设计师或前端开发工程师,这个垂直居中问题也是必须掌握的技巧之一,一些互联网公司面试题中也会出现这类题目.今 ...

  7. 那些可能被你忽略的MySQL优化技巧

    说明:本文中的内容适用于MySQL5.1-5.6版本,不保证新的版本中仍然适用; 且只针对于大部分常见应用场景,是否有效果应以基于实际业务数据的测试为准. 1 优先把列设置为NOT NULL 允许NU ...

  8. 使用Linux碎解三_CentOS7搭建Lamp环境安装zabbix遇到的问题

    问题一:  执行不了 yum命令 解决方案:配置系统的DNS(详细参见碎解二) 问题二:  make 命令的时候,出现错误 提示 和没有gcc大体相关 解决方案:yum install gcc (在网 ...

  9. Jquery / js 判断数据类型方法（限制文本框类型输入）

    当想要判断文本框中的值是否为自己想要的类型时,可以通过一些方法作出判断,这里对于光标离开文本框时判断文本框中输入的是否是数值类型,如果不是,做出提示 $("#WORKYEARS") ...

  10. javascript 中的继承实现， call,apply,prototype,构造函数

    javascript中继承可以通过call.apply.protoperty实现 1.call call的含义: foo.call(thisObject, args...) 表示函数foo调用的时候, ...