jQuery EasyUI教程之datagrid应用（一）

最近一段时间都在做人事系统的项目，主要用到了EasyUI，数据库操作，然后抽点时间整理一下EasyUI的内容。

这里我们就以一个简洁的电话簿软件为基础，具体地说一下datagrid应用吧

datagrid就是一个表格，那我们怎么让数据库中的数据显示在其中呢?

第一步：各种配置这肯定不用说，你要想正常的应用一款软件就需要加载配置，这里我们不做详细说明 ；

第二步：配置加载完毕，我们就需要写方法调用数据库来获取数据了，

　　　　1.最底层的方法也就是Dao了 ,我们需要获取所有的联系人信息，

　　　　2.这里我们定义两个共用方法来初始化Hibernate和最后的释放资源

　　　　

public class PhoneDAO {

     List<Deal> list = null ;
      private SessionFactory sf = null ;
      private Session se = null ;
      private Transaction ts = null ;
      Configuration cfg = null;
      ServiceRegistry sr = null ;
       //在测试用例方法被执行之前自动执行的方法
        //一般用来初始化对象
       public  PhoneDAO() {
             //1获取配置文件
                  cfg = new Configuration().configure() ;

                 //2注册配置
                  sr = new StandardServiceRegistryBuilder().
                                                            applySettings(cfg.getProperties()).build();

        }
          public void init ()
        {
              try{

             //3获取SessionFactory
             sf = cfg.buildSessionFactory(sr) ;

              }catch(Exception e)
              {

                  //1获取配置文件
                  cfg = new Configuration().configure() ;

                 //2注册配置
                  sr = new StandardServiceRegistryBuilder().
                                                            applySettings(cfg.getProperties()).build();
                //3获取SessionFactory
                     sf = cfg.buildSessionFactory(sr) ;

              }

              //4产生Session
                 se =sf.openSession() ;

                 //5启动事务
                 ts = se.beginTransaction() ;
        }

    //后置对象
          //用来释放资源
          public void destroy()
          {
              try
              {
                    //7提交数据
                   ts.commit();
              }catch(Exception e)
              {
                  cfg = new Configuration().configure() ;

                     //2注册配置
                      sr = new StandardServiceRegistryBuilder().
                                                                applySettings(cfg.getProperties()).build();
                    //3获取SessionFactory
                         sf = cfg.buildSessionFactory(sr) ;
                         //4产生Session
                         se =sf.openSession() ;

                         //5启动事务
                         ts = se.beginTransaction() ;
                  ts.commit();
              }
              //8释放资源
              se.close();
              sf.close(); //关闭，释放资源
           }
}

　　　　3.之后我们写入查询的方法

//查询联系人
      public List<Phone> showAll()
      {
          init() ;
          List<Phone> list = null ;

          list = se.createQuery("from Phone").list() ;

          destroy();

          return list;
      }

这里我们就获得了所有联系人列表

第三步：这里我们定义了一个json封装的泛型实体类，用来包装并返回json格式

package p_phone;

import java.util.ArrayList;
import java.util.List;

/**
 * @author Administrator
 *封装类
 *通过泛型封装JSON的结果数据
 *total 初始化为0
 *rows为List集合的泛型
 */

/*
 * 该类为封装JSON的结果数据集，
 * 所以两个变量的名字要对应JSON的格式
 * 并且为了简便省去拼接，我们定义row为List的集合
 */

public class PageJSON<T> {

    private int total = 0 ;//定义total并初始化

    private List<T> rows = new ArrayList<T>() ;//定义List集合的泛型

    /*
     * setting 、getting  方法
     */
    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }

}

　　下面的是实体类

package p_phone;
// Generated 2016-12-14 14:17:07 by Hibernate Tools 3.4.0.CR1

import java.util.Date;

/**
 * Phone generated by hbm2java
 */
public class Phone implements java.io.Serializable {

    private String PNumber;
    private String PName;
    private Date PBirthday;
    private String PRemark;

    public Phone() {
    }

    public Phone(String PNumber, String PName, Date PBirthday) {
        this.PNumber = PNumber;
        this.PName = PName;
        this.PBirthday = PBirthday;
    }

    public Phone(String PNumber, String PName, Date PBirthday, String PRemark) {
        this.PNumber = PNumber;
        this.PName = PName;
        this.PBirthday = PBirthday;
        this.PRemark = PRemark;
    }

    public String getPNumber() {
        return this.PNumber;
    }

    public void setPNumber(String PNumber) {
        this.PNumber = PNumber;
    }

    public String getPName() {
        return this.PName;
    }

    public void setPName(String PName) {
        this.PName = PName;
    }

    public Date getPBirthday() {
        return this.PBirthday;
    }

    public void setPBirthday(Date PBirthday) {
        this.PBirthday = PBirthday;
    }

    public String getPRemark() {
        return this.PRemark;
    }

    public void setPRemark(String PRemark) {
        this.PRemark = PRemark;
    }

}

之后在service层中我们写一个方法返回json类型的所有联系人列表

public String getPageJSON()
    {
        String rtn = "{\"total\":0,\"rows\":[ ]}";//定义变量并初始化JSON格式的结果集

        PageJSON<Phone> pjson = new PageJSON<Phone>() ;//封装Rate类

        List<Phone> list = new PhoneDAO().showAll() ;//定义List集合并赋值

        String json_list = JSONArray.toJSONString(list) ; //将List集合转为JSON集合
        System.out.println(json_list);
            /*
             * 通过set方法给实例化的对象赋值
             */
        pjson.setRows(list);
        pjson.setTotal(2);

        rtn = JSONArray.toJSONString(pjson) ; //将对象JSON类型的数组

        return rtn ; //返回JSON类型的结果集
    }

第四步：到这里已经接近尾声了，我们再写一个Servlet，将数据传递到页面，重写doGet方法

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //转码
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");

        String json_list = new PhoneService().getPageJSON() ;

        response.getWriter().write(json_list) ;

    }

第五步：也就是最后一步了，我们怎么让它显示到页面上呢？上面我们在Servlet中已经将获取到的json类型的所有联系人写到了网页上，之后我们在页面获取就好了

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>联系人</title>
<!-- 1    jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>

<!-- 2    css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">

<!-- 3    图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css"> 

<!-- 4    EasyUI的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<!-- 5    本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

</head>
<body>
<script type="text/javascript">
$(function(){

    $("#dg").datagrid({
        url:'SelectPhone' ,
        idField:'pNumber',
        columns:[[
                  {field:'pName',title:'姓名',width:100},
                  {field:'pNumber',title:'电话',width:100},
                  {field:'pBirthday',title:'生日',width:100,align:'right'},
                  {field:'pRemark',title:'备注',width:100,align:'right'}
              ]]
    }) ;

})
</script>
<table id="dg"></table>
</body>
</html>

到这里就全部完成了，运行一下，看看效果

是不是将数据库的内容显示到网页上了，虽然样式不太好看，但是别着急我们一步一步慢慢来，

上面也说到了，样式不好看，那我们能不能改呢，当然能，datagrid为我们提供了方法，稍加修改，页面变成了下面的样子

修改下之前的代码：

columns:[[
                  {field:'pName',title:'姓名',width:100,align:'center'},
                  {field:'pNumber',title:'电话',width:100,align:'center'},
                  {field:'pBirthday',title:'生日',width:100,align:'right',align:'center'},
                  {field:'pRemark',title:'备注',width:100,align:'right',align:'center'}
              ]],
              pagination:true,//分页
              fitColumns:true,//列自适应宽度
              rownumbers:true,//显示行号
              striped:true,//斑马线
              singleSelect:false,//是否单选

现在在页面上我们看到了分页，这是因为我们开启了分页功能，

想了解分页功能请点击链接 ：jQuery EasyUI教程之datagrid应用（二）