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应用（二）

巴特西

jQuery EasyUI教程之datagrid应用（一）

最新文章

热门文章