用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):三次握手四次挥手模 ...

随机推荐

python-etcd
Client 对象 ['_MDELETE', '_MGET', '_MPOST', '_MPUT', '__class__', '__contains__', '__del__', '__delatt ...
WeedFS问题收集
weed fs FAQ Moving files to a different server Q: Hello,is it possible to move manually the .dat and ...
柯朗数(Courant number)研究
在数值计算过程中,对于计算结果的准确性和效率有很高的要求,但是这两者之间往往互相矛盾:而使用柯朗数可用于平衡两者. 1.柯朗数的定义: C = sqrt(gh)*t/s 其中,t是时间步长,s是网格在 ...
网络存储技术(3) based on zt
各种术语介绍一 ESCON 1991 年,IBM公司在S/390服务器中推出了ESCON(Enterprise System Connection)技术.它是基于光纤介质,最大传输速率达1 ...
nginx的反向代理和负载均衡的一个总结
之前一直觉的nginx的反向代理和负载均衡很厉害的样子,最近有机会接触了一下公司的这方面的技术,发现技术就是一张窗户纸呀,捅破了啥都明白了! 接下来先看一下nginx的反向代理: 简单的来说就是ngi ...
fcitx jdk maven profile配置
#小企鹅输入法配置 export GTK_IM_MODULE=fcitx export QT_IM_MODULE=fcitx export XMODIFIERS="@im=fcitx&quo ...
vim中 set 用法设置
vi set用法from google search一.常用收集如下:(vi set)set autoindent 在插入模式下,对每行按与上行同样的标准进行缩进,与shiftwidth选项结 ...
Net分布式系统之五：C#使用Redis集群缓存
本文介绍系统缓存组件,采用NOSQL之Redis作为系统缓存层. 一.背景系统考虑到高并发的使用场景.对于并发提交场景,通过上一章节介绍的RabbitMQ组件解决.对于系统高并发查询,为了提供性能减 ...
如何在Flex标签中写事件函数
在事件变量值中直接写函数语句,如果是多条语句,则用";"号隔开. 示例如下: <mx:Box id="label" backgroundColor=&qu ...
oracle数据库导入、导出
导出:exp BFXXLZ/BFXXLZ123@192.168.63.63:1521/ORCL file=d:\BFXXLZ.dmp 导入:imp BFXXLZ/BFXXLZ123@ORCL file ...

用datagrid实现完整的一个页面

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

随机推荐

热门专题