此前同样写过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. 基于Flink的视频直播案例（下）

    目录 直播数字化运营 结果写入Elasticsearch 第二种思路 Flink实现总结 Elasticsearch部分 Kibana部分 直播数字化运营 业务目标 全站观看直播总人数以及走势 房间直 ...

  2. 【410】Linux 系统 makefile 文件

    makefile 主要是用来合并编译文件 CC = gcc puzzle: puzzle.c boardADT.o $(CC) puzzle.c boardADT.o -o puzzle -lm bo ...

  3. node.js开发错误——DeprecationWarning: Mongoose: mpromise

    原文地址 使用mongoose进行数据库操作时,总是提示: (node:5684) DeprecationWarning: Mongoose: mpromise (mongoose's default ...

  4. bzoj 1633: [Usaco2007 Feb]The Cow Lexicon 牛的词典【dp】

    预处理出g[i][j]表示原串第i个匹配第j个单词需要去掉几个字母(匹配不上为-1) 设f[i]为i及之后满足条件要去掉的最少字母 倒着dp! f[i]初始为f[i+1]+1,转移方程为f[i]=mi ...

  5. jQuery多项选择器

    jQuery多项选择器模式: $("selector1,selector2,selectorN"); 将每一个选择器匹配到的元素合并后一起返回,可以指定任意多个选择器,并将匹配到的 ...

  6. OAuth2.0最简向导

    无论你是否有技术背景,你都能看懂授权协议框架OAuth2.0 翻译来自:川崎高彦对自己投资人讲解自己的SaaS安全产品. Got it! https://medium.com/@darutk/the- ...

  7. magento “Model collection resource name is not defined” 错误

    问题出现于使用Grid时,解决方案.在使用的Model处添加 public function _construct() { parent::_construct(); $this->_init( ...

  8. jquery实现文字自动向上滚动,鼠标放上去停止,移开继续滚动代码...

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. SQL编程语句

    视图 视图就是我们查询出来的虚拟表创建视图:create view 视图名 as SQL查询语句,分组,排序,in 等都不能写视图的用法: select * from 视图名 SQL编程 定义变量:d ...

  10. Java 8 (8) 默认方法

    传统上,Java程序的接口是将相关方法按照预定组合到一起的方式.实现接口的类必须为接口中定义的方法提供一个实现,或者从父类中集成它的实现.但是,一旦类库的设计者需要更新接口,向接口中加入新的方法时候, ...