用datagrid实现完整的一个页面

Posted 扬也

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用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实现完整的一个页面的主要内容,如果未能解决你的问题,请参考以下文章

后台返回完整的HTML页面代码,如何打开展示

easyUi动态生成datagrid列

单页面应用和多页面应用的区别对比

单页应用及多页应用

datagrid——jQuery EasyUI

easyUI datagrid 多行多列数据渲染异常缓慢原因以及解决方法