使用html标签、jQuery-EasyUI和Ext4分别展示json数据的效果

最新推荐文章于 2019-11-09 23:15:00 发布

a506944719

最新推荐文章于 2019-11-09 23:15:00 发布

阅读量1k

点赞数

分类专栏：案例驱动文章标签： html ext4 json easyui

本文链接：https://blog.csdn.net/a506944719/article/details/52576560

版权

案例驱动专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在准备第一个小实例的时候，其实是想做一个人员信息增删该查的功能，最后想想还是先做一个显示效果的展示，对比一下html标签、jQuery-EasyUI和Ext4相应的显示效果，以及显示的代码实现方式。要说明的是，这只是展示效果，不做优劣的对比，不同的框架所实现的功能各有各的长处，在选择前台框架时功能性应该放在首位。好了，废话不多说，直接进入正题。

先铺一张工作图
这里写图片描述
最近几年这个intellij idea很火，为了体验，也为了学习，我放弃了上班在用的eclipse和MyEclipse使用idea来进行开发，然后我使用的是java目前最新的jdk1.8。同时我发现我使用intellij idea2016.1.2也必须在环境变量中配置1.8的jdk才能启动。在这里要说的是idea这个开发工具我也是第一次用，也不是很熟练。就像昨天我搭建环境的时候准备使用Maven的方式，结果oracle的驱动包怎么也同步不下来，找了网上各种解决办法还是没有弄好，最后觉得这样太拖节奏了，就还是采用了我最熟悉的手工导jar包的方式。然后在以后的开发中慢慢转成Maven的方式。所以如果有高手看到我的用法有什么不妥的地方，欢迎指出了，但是不有喷我，我的承受能力很弱。
在上图，左边就是我的这个实例的目录结构。要提前把待会要用到的jar包（fastjson和ojdbc6）,jQuery-EasyUI框架和Ext4框架准备好。

接着来说说后台实现
后台使用流行的mvc设计模式来搭建，就像这个小实例的Service层并没有做什么操作，但是为了让它看起来复合mvc模式，我还是加上了Service层。
既然是第一个小实例，我便使用了最基础的servlet来编写，并且使用java原生的jdbc来进行查询操作，这里要说明的是，在本实例中，只做了一个简单的查询操作。在以后我会完成增删改查的一系列操作。接下来贴代码：

数据库的工具类

package com.leo.utils;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

/**
 * company:****技术股份有限公司
 * Created by leo on 2016/9/17.
 */
public class DBUtil {
    public void close(ResultSet rs, PreparedStatement ps, Connection conn){
        if(rs != null) try {
            rs.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }

        if(ps!=null) try {
            ps.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }

        if(conn != null){
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

控制层的Servlet.java

package com.leo.servlet;

import com.alibaba.fastjson.JSONObject;
import com.leo.service.Service;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.Map;

/**
 * company:**数码技术股份有限公司
 * Created by leo on 2016/9/17.
 */

public class Servlet extends HttpServlet {
    private Service service = new Service();

    protected void doPost(HttpServletRequest request, HttpServletResponse response){
        List<Map<String,Object>> userData = service.queryUserData();
        PrintWriter out = null;
        try {
            out = response.getWriter();
            JSONObject jsonObject = new JSONObject();
            out.write(jsonObject.toJSONString(userData));
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response){
        doPost(request, response);
    }
}

业务层的Service.java

package com.leo.service;

import com.leo.dao.Dao;

import java.util.List;
import java.util.Map;

/**
 * company:**数码技术股份有限公司
 * Created by leo on 2016/9/17.
 */
public class Service {
    private Dao dao = new Dao();

    public List<Map<String,Object>> queryUserData(){
        try {
            return dao.selectUserData();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

}

持久层的Dao.java

package com.leo.dao;

import com.leo.utils.DBUtil;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * company:**数码技术股份有限公司
 * Created by leo on 2016/9/17.
 */
public class Dao {
    public List<Map<String, Object>> selectUserData() throws Exception{
        Class.forName("oracle.jdbc.OracleDriver");
        Connection conn = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:orcl","leo","leo");
        PreparedStatement ps = null;
        ResultSet rs = null;
        String sql = "select employee_id,first_name,last_name,email,phone_number,hire_date,salary from employees";
        ps=conn.prepareStatement(sql);
        rs=ps.executeQuery();
        List<Map<String,Object>> list = new ArrayList<>();
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        while (rs.next()){
            Map<String,Object> map = new HashMap<>();
            map.put("employeeid",rs.getString("employee_id".toUpperCase()));
            map.put("firstname",rs.getString("first_name").toUpperCase());
            map.put("lastname",rs.getString("last_name").toUpperCase());
            map.put("email",rs.getString("email".toUpperCase()));
            map.put("phonenumber",rs.getString("phone_number".toUpperCase()));
            map.put("hiredate",sdf.format(rs.getDate("hire_date".toUpperCase())));
            map.put("salary",rs.getLong("salary".toUpperCase()));
            list.add(map);
        }
        new DBUtil().close(rs,ps,conn);
        return list;
    }
}

java代码编写完成以后要在web.xml配置servlet和拦截路径：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <servlet>
        <servlet-name>Servlet</servlet-name>
        <servlet-class>com.leo.servlet.Servlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Servlet</servlet-name>
        <url-pattern>/queryServlet</url-pattern>
    </servlet-mapping>
</web-app>

接下来就是前台的实现代码：

<%--
  Created by IntelliJ IDEA.
  User: leo
  Date: 2016/9/17
  Time: 15:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String path = request.getContextPath();
  String context = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <title>数据展示</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="-1">
    <link rel="stylesheet" type="text/css" href="jslib/jQuery-easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jslib/jQuery-easyUI/themes/icon.css">
    <script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="jslib/jQuery-easyUI/jquery.easyui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jslib/ext4.2.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="jslib/ext4.2.1/bootstrap.js"></script>
    <script type="text/javascript">
      $(function(){
      debugger;
        $.ajax({
          url:'<%=context%>queryServlet',
          dataType:'json',
          success:function(data){
            $("#display").html("");
            $("#display").append("<tr> <th>employee_id</th> <th>first_name</th> <th>last_name</th> <th>email</th> <th>phone_number</th> <th>hire_date</th> <th>salary</th> </tr>");
            for(var i in data){
              $("#display").append("<tr> <td>"+data[i].employeeid+"</td> <td>"+data[i].firstname+"</td> <td>"+data[i].lastname+"</td> <td>"+data[i].email+"</td> <td>"+data[i].phonenumber+"</td> <td>"+data[i].hiredate+"</td> <td>"+data[i].salary+"</td> </tr>");
            }
            $("#display_easyui").datagrid({
              data:data,
              singleSelect:true,
              striped:true
            });

            Ext.define('User', {
              extend: 'Ext.data.Model',
              fields: ['employeeid', 'firstname', 'lastname','email','phonenumber','hiredate','salary']
            });
            var store = Ext.create('Ext.data.Store', {
              model:'User',
              data: data
            });

            var grid = Ext.create('Ext.grid.Panel', {
              store: store,
              columns: [
                {
                  text     : 'employee_id',
                  sortable : true,
                  dataIndex: 'employeeid'
                },
                {
                  text     : 'first_name',
                  sortable : true,
                  dataIndex: 'firstname'
                },
                {
                  text     : 'last_name',
                  sortable : true,
                  dataIndex: 'lastname'
                },
                {
                  text     : 'email',
                  sortable : true,
                  dataIndex: 'email'
                },
                {
                  text     : 'phone_number',
                  sortable : true,
                  dataIndex: 'phonenumber'
                },
                {
                  text     : 'hire_date',
                  sortable : true,
                  dataIndex: 'hiredate'
                },
                {
                  text     : 'salary',
                  sortable : true,
                  dataIndex: 'salary'
                }
              ],
              title: 'Array Grid',
              renderTo: 'display_ext',
              viewConfig: {
                stripeRows: true
              }
            });
          }
        });
      })
    </script>
  </head>
  <body>
    <h2>使用html原生表格标签来展示数据</h2>
    <table id="display" border="1" cellspacing="0" cellpadding="3">

    </table>
    <h2>使用EasyUI框架来展示数据</h2>
    <table id="display_easyui" class="easyui-datagrid" border="1" cellspacing="0" cellpadding="3">
      <thead>
        <tr>
          <th data-options="field:'employeeid',align:'center'">employee_id</th>
          <th data-options="field:'firstname',align:'center'">first_name</th>
          <th data-options="field:'lastname',align:'center'">last_name</th>
          <th data-options="field:'email',align:'center'">email</th>
          <th data-options="field:'phonenumber',align:'center'">phone_number</th>
          <th data-options="field:'hiredate',align:'center'">hire_date</th>
          <th data-options="field:'salary',align:'center'">salary</th>
        </tr>
      </thead>
    </table>
    <h2>使用Ext4.*框架来展示数据</h2>
    <div id="display_ext"></div>
  </body>
</html>

在前台中使用了三种展现形式。

第一种是直接使用JQuery生成html代码
在这种方式中，只需要引入jQuery的js。通过JQuery的ajax访问后台，获取要展示的数据，然后通过for循环遍历后台返回的json数据，并将数据拼接成html代码填充到页面中即可。
第二种是使用jQuery-EasyUI框架
在这种方式中，需要先定义表格的表头（也可以在js中定义表头），接着就是将后台返回的json数据传给datagrid框架即可。
第三种是使用Ext4框架
在这种方式中，相对于上面两种要复杂，但是使用Ext不需要编写过多的html代码。对于我们这个小实例来说，需要先定义一个数据模型，这个模型要跟返回的json数据相匹配。接着要创建数据仓库，并且将后台返回的数据附加到数据仓库中。最后才能定义面板，在面板中需要定义表头并将数据仓库填充到面板中。

程序运行后的效果
这里写图片描述

这篇博客涉及的完整项目在这里下载

a506944719

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用html标签、jQuery-EasyUI和Ext4分别展示json数据的效果

在准备第一个小实例的时候，其实是想做一个人员信息增删该查的功能，最后想想还是先做一个显示效果的展示，对比一下html标签、jQuery-EasyUI和Ext4相应的显示效果，以及显示的代码实现方式。要说明的是，这只是展示效果，不做优劣的对比，不同的框架所实现的功能各有各的长处，在选择前台框架时功能性应该放在首位。好了，废话不多说，直接进入正题。先铺一张工作图最近几年这个intellij id
复制链接

扫一扫