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

用javascript 写个函数返回一个页面里共使用了多少种HTML 标签
今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到是否蒙B了,如果是我面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...
Div里面载入另一个页面的实现(取代框架)（AJax）（转）
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便今天突然遇到一个问题,那就是需要导入另一个页 ...
JavaScript网站设计实践（七）编写最后一个页面改进表单
一.最后一个页面 contact.html.改进表单在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...
webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
Div里面载入另一个页面的实现(取代框架)（AJax）
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便今天突然遇到一个问题,那就是需要导入另一个页 ...
Flutter - 添加从左向右滑动，返回上一个页面
很多App比如微信.IT之家等都支持从屏幕左侧向右滑动,来返回上一个页面. 很多iOS上的App也都支持. 那么这个神奇的手势滑动是怎么实现的呢? 其实非常简单,只需要添加一句话即可. platfor ...
Bootstrap--模仿官网写一个页面
本文参考Bootstrap官方文档写了简单页面来熟悉Bootstrap的栅格系统.常用CSS样.Javascript插件和部分组件. 以下html代码可以直接复制本地运行: BootstrapPage ...
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的返回值自动进行各种序列化处理(序列化为 ...
一个页面从输入URL到加载显示完成，发生了什么？
面试经典题--URL加载一.涉及基本知识点: 1. 计算机网络五层因特尔协议栈: 应用层(dns.http):DNS解析成IP并完成http请求发送: 传输层(tcp.udp):三次握手四次挥手模 ...

随机推荐

Ios学习之容器的理解
UInavgationController 和 UITabbarController 都是容器 1:uinavigationcontroller (导航控制器) uinavigationcontrol ...
C#中有哪些类型的数组
一维数组(Single-Dimensional)多维数组(Multidimensional)交错数组(Jagged arrays):交错数组是元素为数组的数组.交错数组元素的维度和大小可以不同.交错数 ...
Apache Server 添加虚拟主机（Virtual Host ）
当前许多虚拟服务器如阿里云的ECS服务器,都提供各式各样的虚拟机,常见的有Linux.Windows等,如果我们使用了Apache Server作为虚拟机的Web服务器,并且我们希望多个web应用程序 ...
linux 学习10 shell 基础
10.1 Shell概述 .Shell是什么 Shell是一个命令行解释器,它为用户提供了一个向Linux内核发送请求以便运行程序的界面系统级程序,用户可以用Shell来启动.挂起.停止甚至是编写一 ...
asp.net(C#)利用QRCode生成二维码(续)-在二维码图片中心加Logo或图像
<%@ WebHandler Language="C#" Class="GetQRCode" %> using System; using Syst ...
android_demo之自动生成动态表格
今天我们学习了如何更好的利用Android 的 layout 布局. 接下来是个简单的栗子去了解这个自动生成的动态的控件(自动生成表格) 这是我们的layout 页面 <?xml version ...
控制台telnet连接后无法关闭
按下ctrl+］然后再quit就可以close connection
WPF功能点
if ("TextBoxBase".Contains(Keyboard.FocusedElement.GetType().BaseType.Name)) { return; } 1 ...
初学c# -- 学习笔记（五） winfrom自定义滚动条
找了些例子,要么庞大.要么搞个安装组件什么的,我要求能用就行了.实在找例子修改麻烦,就做了一个.其实实现挺简单,就是panel或图片什么的跟着鼠标走就行了. 这里panel自己可以加背景图或直接搞个图 ...
阿里巴巴Java招聘
大家好: 我是阿里巴巴B2B的应用架构师,现在大量招聘Java工程师,对自己技术有信心的兄弟姐妹,请联系我吧. 版权声明:本文为博主原创文章,未经博主允许不得转载.

用datagrid实现完整的一个页面

用datagrid实现完整的一个页面的更多相关文章

随机推荐

热门专题