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 相关文章推荐
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
用JQuery 实现的自定义对话框
2007/03/24 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
python迭代器与生成器详解
2016/03/10 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python爬取网易云音乐评论
2018/11/16 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
贝佳斯官方网站:Borghese
2020/05/08 全球购物
银行实习鉴定
2013/12/13 职场文书
更夫岗位责任制
2014/02/11 职场文书
装修施工安全责任书
2014/07/24 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
同事欢送会致辞
2015/07/31 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers