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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
js格式化时间小结
Nov 03 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 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
体育彩票排列三组选三算法分享
2014/03/07 PHP
php时间函数用法分析
2016/05/28 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
理解javascript中的闭包
2017/01/11 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
python九九乘法表的实例
2017/09/26 Python
详解Python自建logging模块
2018/01/29 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
浅析Python中字符串的intern机制
2020/10/03 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
音乐系毕业生自荐信
2013/10/27 职场文书
人事部经理岗位职责
2014/03/07 职场文书
英文演讲稿开场白
2014/08/25 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
2015年服务员工作总结
2015/04/08 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
vue打包时去掉所有的console.log
2022/04/10 Vue.js