此前同样写过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. bzoj 1657: [Usaco2006 Mar]Mooo 奶牛的歌声【单调栈】

    先考虑只能往一边传播,最后正反两边就行 一向右传播为例,一头牛能听到的嚎叫是他左边的牛中与高度严格小于他并且和他之间没有更高的牛,用单调递减的栈维护即可 #include<iostream> ...

  2. 获取openid [微信小程序]

    public function wxapi(){ $data=$this->requestdata(); if(!$data['code']) exit(json_encode(array('s ...

  3. linux centos7安装mysql

    1.下载并安装官方的 yum repository (新建了mysql文件夹) wget -i -c http://dev.mysql.com/get/mysql57-community-releas ...

  4. PowerDesigner 的使用教程

    PowerDesigner 的使用这两篇博客挺好,我也是跟着学习,就不再写了: 初步学习: http://www.cnblogs.com/huangcong/archive/2010/06/14/17 ...

  5. BFS(倒水问题) HDU 1495 非常可乐

    题目传送门 /* BFS:倒水问题,当C是奇数时无解.一共有六种情况,只要条件符合就入队,我在当该状态vised时写了continue 结果找了半天才发现bug,泪流满面....(网上找份好看的题解都 ...

  6. [转]Windows Azure平台简介(一)：定位与产品结构

    本文转自:http://blog.csdn.net/azurechina/article/details/5592236 http://blogs.msdn.com/b/azchina/archive ...

  7. [转]MVC4项目中验证用户登录一个特性就搞定

    本文转自:http://www.mrhuo.com/Article/Details/470/A-Attribute-For-MVC4-Project-Used-To-Validate-User-Log ...

  8. Spring.Net学习笔记(0)-错误汇总

    1.错误一:ObjectDefinitionStoreException "Spring.Objects.Factory.ObjectDefinitionStoreException&quo ...

  9. 添加telnet命令

    打开控制面板,打开程序和功能,看到左边有个“打开或关闭Windows功能 ,打开找到telnet客户端,把这2项都勾选上,然后确定就可以了 注意,如果只要telnet别人的话,就选telnet客户端. ...

  10. input checkbox 选择内容输出多少个

    <input type="checkbox" name="qId" onclick="doit();"/><input t ...