此前同样写过EasyUI Datagrid的demo，好记性不如烂笔头，何况记性也不是那么好，赶紧记录一下。照搬上一篇EasyUI Tree的格式。

实现效果：获取数据库表的数据，在EasyUI Datagrid上展示出来并使用分页控件进行分页。

项目、框架、数据库：创建的是Maven项目，采用Spring+SpringMVC+Mybatis框架，数据库SQL Server 2005

1.创建数据库表

表结构：

表数据：

2.通过mybatis逆向工程映射TreeTestTable（表名略丑）

TreeTestTable表的实体类代码：

package com.lwl.EasyUIDemo.bean;

public class TreeTestTable {

    private Integer id;

    private Integer pid;

    private String value;

    set/get方法...

}

3.编写DatagridBean类（由于实际使用中表结构不同，因此需要编写一个类用于将获取到的数据对象转为前端Datagrid能够读取并加载的数据格式）：

package com.lwl.EasyUIDemo.pojo;

import java.util.List;

public class DatagridBean {

    private int page;        // 当前第几页

    private int total;        // 数据总条数

    private List<?> rows;    // 数据列表

    public DatagridBean(int page, long total, List<?> rows) {

        this.page = page;

        this.total = (int)total;

        this.rows = rows;

    }

    set/get方法...

}

4.编写Controller层代码：

package com.lwl.EasyUIDemo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;

import com.github.pagehelper.PageHelper;

import com.github.pagehelper.PageInfo;

import com.lwl.EasyUIDemo.bean.TreeTestTable;

import com.lwl.EasyUIDemo.pojo.DatagridBean;import com.lwl.EasyUIDemo.service.TreeTestTableService;

@Controller

public class TestController {

    @Autowired

    private TreeTestTableService treeService;

    /**

     * DataGrid数据获取

     */

    @RequestMapping("/getDatagrid")

    @ResponseBody

    public JSON getList(int page,int rows){

        PageHelper.startPage(page, rows);

        List<TreeTestTable> list = treeService.getData();

        PageInfo<TreeTestTable> pageInfo = new PageInfo<>(list);

        DatagridBean datagridBean = new DatagridBean(page, pageInfo.getTotal(),list);

        return (JSON) JSON.toJSON(datagridBean);

    }

}

5.对照controller层方法所引用的service方法来创建service接口：

package com.lwl.EasyUIDemo.service;

import java.util.List;

import com.lwl.EasyUIDemo.bean.TreeTestTable;

public interface TreeTestTableService {

    /**

     * 获取表的全部数据

     * @return

     */

    List<TreeTestTable> getData();

}

Service实现类：

package com.lwl.EasyUIDemo.serviceImpl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import com.lwl.EasyUIDemo.bean.TreeTestTable;

import com.lwl.EasyUIDemo.bean.TreeTestTableExample;

import com.lwl.EasyUIDemo.dao.TreeTestTableMapper;

import com.lwl.EasyUIDemo.service.TreeTestTableService;

@Service

public class TreeTestTableServiceImpl implements TreeTestTableService {

    @Autowired

    private TreeTestTableMapper tableMapper;

    /**

     * 获取表的全部数据

     */

    public List<TreeTestTable> getData() {

        return tableMapper.selectByExample(null);

    }

}

6.编写jsp页面（关于EasyUI的使用格式等请自行查看EasyUI API文档）：

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<% pageContext.setAttribute("path", request.getContextPath()); %>

<!DOCTYPE>

<html>

<head>

<title>EasyUI实例</title>

<!-- 载入easyui样式及图标样式 -->

<link rel="stylesheet" type="text/css" href="${path }/easyui/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="${path }/easyui/themes/icon.css">

<!-- 载入jquery支持文件（必须写在其他js文件前）、easyui支持文件、easyui中文支持文件 -->

<script type="text/javascript" src="${path }/easyui/jquery.min.js"></script>

<script type="text/javascript" src="${path }/easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src="${path }/easyui/locale/easyui-lang-zh_CN.js"></script>

</head>

<body>

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

<script>

$('#dg').datagrid({

    url:'getDatagrid',

    columns:[[

        {field:'id',title:'节点',width:100},

        {field:'pid',title:'父节点',width:100},

        {field:'value',title:'内容',width:100}

    ]],

    striped:true,    // 斑马线

    pagination:true,// 分页

});

</script>

</body>

</html>

运行看一下效果：

需要注意的重点是DatagridBean的编写与controller请求数据的接收，数据的返回。

以上仅仅是本人接触EasyUI Datagrid编写的简单例子，有任何理解或做法上的错误，欢迎批评指正！

EasyUI Datagrid的简单使用的更多相关文章

  1. EasyUI datagrid简单运用

    jquery的前端框架挺多的,有easyUI ,bootstrap...,对于做系统软件或许easyUI比较好,因为里面控件很丰富,而bootstrap非常简洁大方,但是控件相 对比较少,特别是复杂的 ...

  2. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

  3. easyUI datagrid editor扩展dialog

    easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...

  4. easyUI datagrid笔记

    easyUI datagrid 简单使用与注意细节 背景: 业余爱好,使用了一下easyUI的搜索框与数据表格,并把两者整合起来进行使用. 使用前提(引入需要的js and css): <lin ...

  5. EasyUI DataGrid分页数据绑定

    记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...

  6. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  7. Easyui Datagrid rownumbers行号四位、五位显示不完全的解决办法

    Easyui Datagrid rownumbers行号四位.五位显示不完全的解决办法(引) 方法一: 相信很多人在使用easyui的时候都遇到过这个问题,当我们设置成显示Rownumber的时候,你 ...

  8. 反射实体自动生成EasyUi DataGrid模板 第二版--附项目源码

    之前写过一篇文章,地址 http://www.cnblogs.com/Bond/p/3469798.html   大概说了下怎么通过反射来自动生成对应EasyUi datagrid的模板,然后贴了很多 ...

  9. 解决easyui datagrid加载数据时，checkbox列没有根据checkbox的值来确定是否选中

    背景:   昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...

随机推荐

  1. Centos7 配置防火墙 firewall

    一.firewall 1.从CentOS7开始,默认使用firewall来配置防火墙,没有安装iptables(旧版默认安装). 2.firewall的配置文件是以xml的格式,存储在 /usr/li ...

  2. ubuntu中 python升级 （转载）

    转自:http://blog.csdn.net/menglin8908/article/details/16822171 在ubuntu12.04中内置的python版本为2.7.3,最近想把pyth ...

  3. 手机访问PC网站自动跳转到手机网站代码

    方法一: <script type="text/javascript"> try { var urlhash = window.location.hash; if (! ...

  4. golang——log包学习

    log包实现了简单的日志服务. 1.func New(out io.Writer, prefix string, flag int) *Logger New创建一个Logger. 参数out设置日志信 ...

  5. java8的LocalDateTime与Date互相转换

    LocalDateTime转Date Instant instant = localDateTime.atZone(ZoneId.systemDefault()).toInstant(); Date ...

  6. set && muliset

    #include <set> #include <iostream> #include <cstdio> #include <cctype> using ...

  7. c语言 error C4996: 'strupr': The POSIX name for this item is deprecated. Instead, use the ISO C and C++ conformant name

    问题: 在使用visual studio 2013,进行调试执行代码时,出现如下错误: error C4996: 'strupr': The POSIX name for this item is d ...

  8. spring controller接口中，用pojo对象接收页面传递的参数，发现spring在对pojo对象赋值时，有一定顺序的问题

    1.我的项目中的实体类都继承了基类entityBase,里面封装了分页的一些属性,pageindex.pagesize.pagerownum等. 2.思路是页面可以灵活的传递分页参数,比如当前页pag ...

  9. 273 Integer to English Words 整数转换英文表示

    将非负整数转换为其对应的英文表示,给定的输入是保证小于 231 - 1 的.示例:123 -> "One Hundred Twenty Three"12345 -> & ...

  10. 程序员必知的LinuxShell命令

    程序员必知的LinuxShell命令 grep (Globle Regular Expression Print全局正则表达式) 命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的 ...