文档章节

easyUI-DataGrid加载数据和分页

Clover286
 Clover286
发布于 2017/03/17 21:12
字数 495
阅读 180
收藏 0

一.参考文献

1.中文官网:http://www.jeasyui.net/

2.官方aip:http://www.jeasyui.com/documentation/

二.引入方法

1.把解压包直接放到项目中(包里有的东西可以直接删除,我直接用,不删)

2.引入依赖

<link rel="stylesheet" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" href="easyui/themes/icon.css">

<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

目录结构如下图:

三.使用方法

1.官网比较慢,建议下载一个CHM格式的API文件。

2.可以直接用html+css的格式引入各个插件模块到页面,也可以用js,建议用js,简洁方便。

3.实例:

3.1DataGrid(数据表格)的使用(js调用)

前端:

HTML:

<table id="dg"></table>

js:

$('#dg').datagrid({
    url:'manage/discuss',
    title:'评价列表',
    width:400,
    columns:[[
        {field:'userId',title:'用户名',width:100},
        {field:'detail',title:'内容',width:100},
        {field:'creatTime',title:'时间',width:100,align:'right'}
    ]],
    pagination:true,
    pageList:[5,10,15,20],
    pageSize:5
});

后端:

easyui DataGrid 要求后台传出json格式的数据,并且格式有要求:

{                                                     
    "total":239,                                                     
    "rows":[                                                         
        {"code":"001","name":"Name 1","addr":"Address 11","col4":"col4 data"},        
        {"code":"002","name":"Name 2","addr":"Address 13","col4":"col4 data"}      
      
    ]                                                         
}

下面是根据easyui要求的json格式封装的json类:

package shop.dto;

import java.util.List;

/**
 * easyUI要求的json输出格式
 * Created by Administrator on 2017/3/18.
 */
public class EasyUiJson<T> {
    private long total;
    private T rows;

    public long getTotal() {
        return total;
    }
    public void setTotal(long total) {
        this.total = total;
    }

    public T getRows() {
        return rows;
    }

    public void setRows(T rows) {
        this.rows = rows;
    }

    @Override
    public String toString() {
        return "EasyUiJson{" +
                "total=" + total +
                ", rows=" + rows +
                '}';
    }
}

control层(说明:pageInfo是pagehelper分页插件里的对象,我直接从pageInfo里获取了总记录数,easyui穿给后台的数据是page和rows,分别表示第几页和一页显示几个数据,注意page和rows变量名别写出了)

@RequestMapping()
    public String manage(Model model){
        return "manage";
    }
    //传评论json数据到前台
    @RequestMapping(value = "/discuss", method = RequestMethod.POST, produces = {
            "application/json;charset=utf-8" })
    @ResponseBody
    public EasyUiJson<List<Discuss>> getDiscuss(@RequestParam("page") int pageNum, @RequestParam("rows") int pageSize
                                         ) {
        PageInfo<Discuss> pageInfo=mp.queryAllDiscsss(pageNum,pageSize);
        EasyUiJson<List<Discuss>> ey=new EasyUiJson<>();
        ey.setRows(pageInfo.getList());
        ey.setTotal(pageInfo.getTotal());
        return ey;
    }

 

© 著作权归作者所有

Clover286
粉丝 10
博文 211
码字总数 66809
作品 0
武汉
程序员
私信 提问
easyui 中的datagrid 请求action没有进入action方法?也不知道什么原因?

$(function(){ $('#test').datagrid({ title:'我的表格', iconCls:'icon-save', width:700, height:350, nowrap: true, autoRowHeight: false, striped: true, collapsible:true, url:'show......

我爱编程zc
2016/08/28
814
0
jquery easyui datagrid 分页数据请求

jquery easyui datagrid内置了分页的功能,当设置为 pagination: true 以后就能够启用分页功能。 启用分页以后,jquery easyui datagrid发送的数据请求中会包含两个参数: int iPageIndex =...

我吃火锅你吃调料-快给我打钱-房子不要钱
2015/11/02
476
0
Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,二话不说,上图直观! 2、easyui的datagrid的...

岁月无痕
2013/04/17
9.8K
3
jquery jsp 获取被选中的数据中的日期值

$(function(){ $('#xmhk').datagrid({ url:'../json/getCashList.jsp', iconCls:'icon-save', nowrap: false, striped: true, collapsible:true, remoteSort: false, fitColumns: true, sort......

wenwen1
2012/08/27
2.2K
1
AngularJS和EasyUI结合使用的注意点

最近在着手用angular重构一个项目,原来的前台是纯easyui做的,最近花了一周学了angular,决定把它们结合下,用纯html 和 暴露后台rest api搞起。结果在ng-view多页切换的时候遇到了一个问题...

Big_BoBo
2013/12/26
14.6K
8

没有更多内容

加载失败,请刷新页面

加载更多

vue入门--简单路由配置

本文转载于:专业的前端网站➜vue入门--简单路由配置   在初始化vue init webpack <工程名>时,有一步是询问是否安装vue-router,选择yes,如果没有安装的话,后面需要自己安装。然后在目录...

前端老手
36分钟前
3
0
怎么给视频配音

很多刚开始尝试视频制作的小伙伴,帮助到怎么给制作完成的视频配音,其实给视频配音的方法非常简单,在手机上可以进行制作,下面一起来看看给视频配音的方法吧! 具体步骤如下: 1、首先在手...

白米稀饭2019
45分钟前
3
0
windows批处理bat脚本编写

什么是bat脚本 .bat结尾的文件其实就是windows上的批处理脚本,Windows中的bat文件相当于 Linux中shell编程的.sh脚本,批量执行DOS命令。 其最简单的例子,是逐行书写在命令行中会用到的各种...

孙幼凌
53分钟前
3
0
华为手机翻译功能怎么使用?这三种方法请务必收藏

华为手机翻译功能怎么使用?在我们的生活中会经常遇到翻译问题,许多外语不好的朋友该怎么办呢?华为手机已经为我们解决了这个问题,今天小编就教大家学会使用华为手机中的三种翻译技巧,需要...

翻译小天才
今天
5
0
企业服务软件开发中需要注意的三个问题

在开发企业服务软件时,我们需要分为:业务需求、用户需求、产品需求,三大需求层次,三个层次互相关联,企业服务软件开发首先要服务业务,需要满足业务的需求,再关注用户体验,也就是用户需...

积木创意科技
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部