此前同样写过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. CrystalQuartz实现Quartz的window服务的远程管理

    1. 建一个空的ASP.NET WebSite,利用NuGet安装CrystalQuartz.Remote 包 我们可以看到,配置文件中多了如下节点: <crystalQuartz> &l ...

  2. win10设置锁屏时间

    这里应该修改成自己希望的分钟数  比如120分钟

  3. 【计蒜客习题】 取石子游戏(gcd)

    问题描述 蒜头君和花椰妹在玩一个游戏,他们在地上将 n 颗石子排成一排,编号为 1 到 n.开始时,蒜头君随机取出了 2 颗石子扔掉,假设蒜头君取出的 2 颗石子的编号为 a, b.游戏规则如下,蒜头 ...

  4. [Offer收割]编程练习赛84 -- 括号序列

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个只包含'(', ')'和''的字符串S,现在小Hi可以任意指定''为'('或')',不同的'*'可以是不同的字符. ...

  5. 有符号char转无符号short

    ; cout<<(int)ch<<endl; //-1 unsigned short d = ch; short dd = ch; cout<<d<<e ...

  6. jQuery学习笔记(4)-设置元素的属性和样式

    一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/lo ...

  7. Scala-基础-函数(1)

    import junit.framework.TestCase //函数(1) class Demo5 extends TestCase { def testDemo(){ println(" ...

  8. 使用纯css鼠标移入效果,炫酷的旋转正方体

    首先我们需要创建几个盒子 </div> <div class="wrap"> <div class="cube"> < ...

  9. dede手机端首页点击文章内容、列表，却跳到pc端

    手机访问到手机端首页,点击列表.内容.图片等都跳到pc端,是什么原因? 查看m模板里面的index.html文件生成的代码是绝对路径(数字随机)13.html 而不是view.php?aid=13 解 ...

  10. 7z.exe 命令行压缩文件排除文件(exclude filenames) 手记

    命令行使用格式:Usage: 7z <command> [<switches>...] <archive_name> [<file_names>...] ...