EasyUI学习之DataGird分页显示数据


Posted in Javascript onDecember 29, 2016

本文实例为大家分享了EasyUI DataGird的使用方法,供大家参考,具体内容如下

1. html代码

<table 
  id="grid" 
  style="width: 940px" 
  title="用户操作" 
  data-options="iconCls:'icon-view'">
</table>

2.显示

EasyUI学习之DataGird分页显示数据

3.js代码

// 页面加载后显示表数据
$(function() {
  var queryData = {};// 可添加一些预设条件
  InitGrid(queryData);// 初始化Datagrid表格数据
});

// 实现对DataGird控件的绑定操作
function InitGrid(queryData) {
  $('#grid').datagrid({ // 定位到Table标签,Table标签的ID是grid
    url : 'getNoticesByUserId',// 指向后台的Action来获取当前用户的信息的Json格式的数据
    title : '公告管理',
    iconCls : 'icon-view',
    height : 650,
    width : function() {
      return document.body.clientWidth
    },// 自动宽度
    pagination : true,
    rownumbers : true,
    sortName : 'title', // 根据某个字段给easyUI排序
    pageSize : 20,
    sortOrder : 'asc',
    remoteSort : false,
    idField : 'id',
    queryParams : queryData, // 异步查询的参数
    columns : [ [ {
      field : 'ck',
      width : '1%',
      checkbox : true
    }, {
      title : '标题',
      field : 'title',
      width : '9%',
      sortable : true,
      halign : 'center'
    }, {
      title : '发布人',
      field : 'userName',
      width : '10%',
      sortable : true,
      halign : 'center'
    }, {
      title : '内容',
      field : 'content',
      width : '50%',
      sortable : true,
      halign : 'center',
      sortable : false
    }, {
      title : '创建日期',
      field : 'createDate',
      width : '20%',
      sortable : true,
      halign : 'center',
      align : 'center',
      sortable : false
    } ] ],
    toolbar : [ {
      id : 'btnAdd',
      text : '添加',
      iconCls : 'icon-add',
      handler : function() {
        ShowAddDialog();// 实现添加记录的页面
      }
    }, '-', {
      id : 'btnEdit',
      text : '修改',
      iconCls : 'icon-edit',
      handler : function() {
        ShowEditDialog();// 实现修改记录的方法
      }
    }, '-', {
      id : 'btnDelete',
      text : '删除',
      iconCls : 'icon-remove',
      handler : function() {
        Delete();// 实现直接删除数据的方法
      }
    } ]
  });

};

4.Json数据

{
  "total": 2,
  "rows":[{
      "content": "11",
      "createDate": "2016-12-15 23:03:50",
      "id": 1,
      "title": "11",
      "userName": "789"

    }, {
      "content": "我是",
      "createDate": "2016-12-16 20:10:03",
      "id": 4,
      "title": "为",
      "userName": "789"
    }
  ]
}

5.Java后台封装

/********************1.action代码*******************/
private NoticeManager noticeManager;
private int page;
private int rows;
Map<String, Object> map = new HashMap<String, Object>();

public NoticeManager getNoticeManager() {
  return noticeManager;
}
public void setNoticeManager(NoticeManager noticeManager) {
  this.noticeManager = noticeManager;
}
public int getPage() {
  return page;
}
public void setPage(int page) {
  this.page = page;
}
public int getRows() {
  return rows;
}
public void setRows(int rows) {
  this.rows = rows;
}
public Map<String, Object> getMap() {
  return map;
}
public void setMap(Map<String, Object> map) {
  this.map = map;
}

/**
 * @Title: getNoticesByUserId 
 * @Description: TODO(获取首页显示的所有公告数据) 
 * @return??? 设定文件
 * @return String??? 返回类型
 * @throws
 */
public String getNoticesByUserId() {
  // 存放数据的list
  List<ANotice> aNotices = new ArrayList<ANotice>();
  User u = (User) getSession().get("LoginUser");
  List<Notice> notices = noticeManager.GetNotices(page, rows, u.getId());

  for (Notice notice : notices) {
    ANotice aNotice = new ANotice();
    aNotice.setId(notice.getId());
    aNotice.setTitle(notice.getTitle());
    aNotice.setCreateDate(notice.getCreateDate());
    aNotice.setUserName(u.getUsername());
    aNotice.setContent(notice.getContent());
    aNotices.add(aNotice);
  }

  // total是easyui分页工具的总页数。名字固定。
  map.put("total", noticeManager.getTotal(page, rows, u.getId()));
  map.put("rows", aNotices);

  return SUCCESS;
}

// total是easyui分页工具的总页数。名字固定。
map.put("total", noticeManager.getTotal(page, rows, u.getId()));
map.put("rows", aNotices);

/********************2.Manager代码*******************/
@Override
public List<Notice> GetNotices(int page, int rows, int userId) {    
  String hql="From Notice Where 1=1 and userId = ?";
  return dao.find(hql, new Object[]{userId}, page, rows);   
}

@Override
public Long getTotal(int page, int rows, int userId) { 
  String hql="select count(*) from Notice Where 1=1 and userId = ?";
  return dao.count(hql, new Object[]{userId});
}

/********************3.dao代码*******************/
public List<T> find(String hql, Object[] param, Integer page, Integer rows) {
  if (page == null || page < 1) { 
    page = 1; 
  }
  if (rows == null || rows < 1) {
    rows = 10; 
  } 
  Query q = this.getCurrentSession().createQuery(hql); 
  if (param != null && param.length > 0) { 
    for (int i = 0; i < param.length; i++) { 
      q.setParameter(i, param[i]); 
    } 
  } 
  return q.setFirstResult((page - 1) * rows).setMaxResults(rows).list(); 
}

6.struts配置文件

<!--前后台通过Json方式传输数据 -->
<package name="jsonPackage" extends="struts-default,json-default">
  <action name="getNoticesByUserId" class="NoticeAction" method="getNoticesByUserId">
    <!-- 返回json类型数据 -->
    <result name="success" type="json">
      <param name="root">map</param>
    </result>
  </action>
</package>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
webpack打包多页面的方法
Nov 30 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 #Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 #Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 #Javascript
jQuery实现6位数字密码输入框
Dec 29 #Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 #Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 #Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 #Javascript
You might like
一个PHP的String类代码
2010/04/20 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
PHP编程风格规范分享
2014/01/15 PHP
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Python中删除文件的程序代码
2011/03/13 Python
python pandas修改列属性的方法详解
2018/06/09 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
django实现后台显示媒体文件
2020/04/07 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
进程的查看和调度分别使用什么命令
2015/03/25 面试题
优秀毕业生求职推荐信范文
2013/11/21 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
技术比武方案
2014/05/19 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python