jQuery EasyUI教程之datagrid应用(二)

上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下:

上次显示的结果是这样的

点击查看上篇:jQuery EasyUI教程之datagrid应用(一)

这里不难发现生日的格式是毫秒(long型数据),并不是我们想要的年月日的格式,那我们就修改一下

我们在js中写入格式时间的方法,并在生日一列用formatter来调用方法格式时间,

//格式化时间
//把long型日期转为想要类型
function getDate(date)
{
    //得到日期对象
    var d = new Date(date) ;

    //得到年月日
    var year = d.getFullYear() ;
    var month = (d.getMonth()+ 1) ;
    var day = d.getDate() ;

    //封装
    var tt = year+"-"+(month<10?"0"+month: month)+"-"+(day<10?"0"+day:day) ;

    return tt ;
    }

此时,我们在查看页面,我们就发现生日栏变成我们想要的结果了

接下来就是分页了,原理 :datagrid有分页功能,我们只要把分页打开就好,当发送请求时,他会自己传递两个参数到Servlet,我们接受下再传递给dao,Hibernate也提供了分页功能,我们一结合就好了,

1.我们现在dao层修改下上次的代码,将参数传递过去

//查询联系人
      public List<Phone> showAll(int page, int rows)
      {
          init() ;

          List<Phone> list = null ;

          String hql = "from Phone where 1=1 " ;

          list = se.createQuery(hql)
                          .setMaxResults(rows)
                          .setFirstResult((page - 1) * rows )
                          .list() ;

          destroy();

          return list;
      }
    

2.并且还要增加一个查询总数的方法

  这里我们要查询总数,值得注意的是我们这用的是Object类型的List集合

//获取联系人记录条数
      public int getTotal()
      {
          init() ;

          int rtn = 0 ;

          List<Object> list = null ;

          String hql = "select count(1) from Phone where 1=1 " ;

          list = se.createQuery(hql).list() ;

          if(list != null && list.size() > 0 )//判断获取的集合非空及长度
            {
                rtn = Integer.parseInt(list.get(0).toString()) ;//给变量rtn赋值
            }

          destroy();

          return rtn;
      }

3.接下来我们再在service层修改下我们的方法,将记录的条数添加进去

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

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

        int total =  new PhoneDAO().getTotal() ;

        if(total > 0)
        {
            List<Phone> list = new PhoneDAO().showAll(page, rows) ;//定义List集合并赋值

            String json_list = JSONArray.toJSONString(list) ; //将List集合转为JSON集合

                /*
                 * 通过set方法给实例化的对象赋值
                 */
            pjson.setRows(list);
            pjson.setTotal(total);

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

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

4.最后我们在修改下Servlet的doGet方法

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

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

        //接收请求
            //1每页行数
        String rows = request.getParameter("rows") ;

            //2页码
        String page = request.getParameter("page") ;

        if(rows != null && page != null)//非空判断
        {
            int rowss = Integer.parseInt(rows) ;//类型转换

            int pagess = Integer.parseInt(page) ;//类型转换

            String json_list = new PhoneService().getPageJSON(pagess, rowss) ;//方法调用

            response.getWriter().write(json_list) ;
        }
        else
        {
            response.getWriter().write("{\"total\":0,\"rows\":[ ]}") ;
        }

    }

到这里我们的分页功能就实现了。

下篇datagrid增删改

时间: 2024-10-17 20:26:15

jQuery EasyUI教程之datagrid应用(二)的相关文章

jQuery EasyUI教程之datagrid应用(三)

今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能:jQuery EasyUI教程之datagrid应用(二) 接下来就是数据的增删改查了,首先我们在页面中添加功能按钮 这里很简单就是datagrid的toolbar属性 接下来我们实现按键的功能 查询比较麻烦我们最后写,先写添加吧,既然要添加,就应该有表格或是输入的文本框吧,还要进行提交,那就要有f

jQuery EasyUI教程之datagrid应用(一)

一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 . 我们会用到如下插件: · datagrid: 列表显示数据. · dialog: 增加或编辑单个用户信息. · form: 用来提交表单数据. · messager: 用来显示操作信息. 第一步:准备数据库 使

jQuery EasyUI教程之datagrid应用

三.设定或定制各种功能 1.增加分页 创建DataGrid数据表格 设置“url”属性,用来装入远端服务器数据,服务器返回JSON格式数据. Html代码代码   <table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid2_getdata.php" title="Load Data" ic

jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]

jQuery EasyUI API - Grid - DataGrid [原创汉化官方API] 2014-04-02   DataGrid 继承自 $.fn.panel.defaults,覆盖默认值 $.fn.datagrid.defaults. DataGrid控件显示数据以表格的形式提供了丰富的选择,支持排序,组和编辑数据. DataGrid控件被设计来减少开发时间和要求开发商没有特定的知识.它是轻量级的和功能丰富的.合并单元格,多列标题,冻结列和页脚是仅有的几个特点. [依赖于] pane

jQuery easyui中获取datagrid某一列的值之和

我想实现的功能就是加载datagrid之和能够计算出某一列的值之和,删除某一行数据的时候会从总数里面减去这列这行的数据,新增一条记录的时候也会把这个数据加在总数上面..说起来不知道能不能被人理解... 求大神帮忙.. 下面是部分代码.. 有些代码已经省略了..  怎么获取“我是那个数”的所有列的值的和呢?? 和删除增加那列数据呢 $(function() {$('#content').datagrid( {toolbar : [ {text : '新增',iconCls : 'icon-add'

jQuery基础教程之is()方法和has() 方法

is()方法 —— 用于筛选 语法: jQueryObject.is( expr )返回值: is()函数的返回值为Boolean类型.true或者false.只要其中至少有一个元素符合给定的表达式就返回true,否则就返回false.说明: is()方法用于判断与当前jQuery对象相匹配的元素是否符合指定的表达式.这里的表达式包括:选择器(字符串).DOM元素(Element).jQuery对象.函数.可以看出来,它是根据选择器.DOM元素或jQuery 对象来检测匹配元素集合. has()

python 教程之Django(二)

官网: https://www.djangoproject.com/download/ 1.简单方法: A.pip 命令安装方法 pip install Django 打开dos命令窗口 输入命令回车,工具包会去github上去下载 B.手动安装(官网下载) 下载右侧标记的包.解压,这里我把python.django放在一起了如图: 打开dos  进入到django目录下 输入安装命令: 整个安装会将所有必要的文件复制到python35下 这时我们要配一个环境变量,方便我们执行命令,如果不配可以

[jQuery EasyUI系列] 创建增删改查应用

一.数据收集并妥善管理数据是网络应用共同的必要.CRUD允许我们生产页面列表并编辑数据库记录. 本文主要演示如何使用jQuery EasyUI实现CRUD DataGrid. 将使用到的插件有: datagrid:向用户展示列表数据 dialog:创建并编辑一条单一的数据 form:用于提交表单数据 messager:显示一些操作信息 二.操作步骤 1.准备数据库并创建实例数据 2.创建DataGrid来显示用户信息 创建没有JavaScript代码的DataGrid 1 <table id=&qu

ASP.NET网站权限设计实现(三)——套用JQuery EasyUI列表显示数据、分页、查询

一.说明: JQuery EasyUI下载地址:http://jquery-easyui.wikidot.com/download,最新版本1.2.2. 首先预览一下界面: 本例实现的功能: 1.多标签 2.分页列表显示数据 3.获取选中行的标识值,删除选中行 实现以上功能主要使用了: 1.layout:布局 2.tabs:多标签 3.datagrid:表格显示数据,并可以分页 4.messager:消息框 5.window:窗口 要了解用法,下载之后,参阅demo文件夹下的demo和官方文档.