<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%
String homePage = request.getContextPath();
%>
<script type="text/javascript">
$(function () {
$("#datagrid").datagrid({
url: "<%=homePage%>/testController/datagrid.ajax?type=list",
title: "标题",
iconCls: "icon-save",
pagination: true,
pageSize: 10,
pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
fit: true,
fitColumns: true,//列少的时候,设置为true比较合适
nowrap: false,//false - 单元格数据多的时候进行折行 true - 不管数据有多少,都在一行显示
border: false,
idField: "id",
columns: [
[
{field: "id", title: "编号", width: 100}
, {field: "name", title: "姓名", width: 100}
, {field: "password", title: "密码", width: 100}
]
]
});
})
</script> <div class="easyui-tabs" fit="true" border="false">
<div title="用户管理">
<table id="datagrid"></table>
</div>
</div>

后端
@RequestMapping(value = "/datagrid.ajax", params = "type=list")
@ResponseBody
public Map<String, Object> datagrid1(@RequestParam Map<String, String> map) {
logger.debug("参数:" + map);
Map<String, Object> map1 = new HashMap<>();
List<Map<String, String>> list = new ArrayList<>();
for (int i = 0; i < 100; i++) {
Map<String, String> map2 = new HashMap<>();
list.add(map2);
map2.put("id", i + "");
map2.put("name", "姓名" + i);
map2.put("password", "密码" + i);
}
map1.put("rows", list);
map1.put("total", 100);
return map1;
} 因为设置了分页,每次查询的时候,都会把page和rows参数传递给后台,后台拿着这个参数,进行分页查询后,将结果集存在rows中,把总条数存在total中。 这就实现了一个简单的分页列表了,以为还没有查询条件,还不能叫做分页查询

数据表格 - DataGrid - 列表显示的更多相关文章

  1. easyUI 数据表格datagrid的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. [转载]EasyUI中数据表格DataGrid添加排序功能

    我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...

  3. 数据表格 - DataGrid - 查询

    toolbar头部工具栏 <script type="text/javascript"> $(function () { $("#datagrid" ...

  4. jquery easy ui 1.3.4 数据表格(DataGrid)(8)

    8.1.创建DataGrid html代码 <table id="dg"></table> $("#dg").datagrid({ // ...

  5. easyui框架--基础篇(一)-->数据表格datagrid(php与mysql交互)

      前  言  php  easyui框架--本篇学习主要是 easyui中的datagrid(数据表格)框架. 本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属 ...

  6. 数据表格datagrid内容整理

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

  7. easyUI数据表格datagrid之笔记2

    /**========================================= * 追加在表格尾部 */function append(){ editIndex = $('#dg').dat ...

  8. 数据表格 - DataGrid - 行编辑

    行编辑一般用于单行数据的增删改,如果不用行编辑实现的话,对于表单数据量不大的情况,可以使用弹窗(Dialog),如果数据量比较大,也就是需要操作的数据比较多的时候,可以新开一个tab页. 新增/编辑 ...

  9. 数据表格 - DataGrid - 字段排序

    设置默认排序字段 sortName:"id",sortOrder:"desc",单独为每个字段设置排序 {field: "name", ti ...

随机推荐

  1. 未能正确加载 ”Microsoft.VisualStudio.Editor.Implementation.EditorPackate“包错误解决方法

    今天新来一个同事,帮他搭建开发环境.发现他的vs2012一打开就报错. 错误提示: 未能正确加载 "Microsoft.VisualStudio.Editor.Implementation. ...

  2. uniqid函数产生唯一id,减少碰撞几率

    $uuid = str_replace(".","",uniqid(mt_rand(100000,999999),true)); //基于当前时间微妙数,与mt ...

  3. WPF学习之路(七)应用程序和窗口(续)

    窗口的生命周期 WPF中一个Window类代表一个窗口 一个的窗口的生命周期也有好几个阶段: 1.构造器被调用 2.Window.Initialized事件被触发 3.Window.Activated ...

  4. Java api 入门教程 之 JAVA的文件操作

    I/O类使用 由于在IO操作中,需要使用的数据源有很多,作为一个IO技术的初学者,从读写文件开始学习IO技术是一个比较好的选择.因为文件是一种常见的数据源,而且读写文件也是程序员进行IO编程的一个基本 ...

  5. Android setTag()/getTag()-(转)

    (转自:http://www.cnblogs.com/topcoderliu/archive/2011/06/07/2074419.html) [自己经历:要getTag前提是要有setTag] se ...

  6. 禁止用户选定文本: user-select

    双击文本 select,会被选定,如下 但有时点击元素时不想要被选定的状态,有一个尚未成为标准的 CSS 属性: user-select,它有 4 个值: text 可以选择文本 element 可以 ...

  7. node js学习(二)——REPL(交互式解释器)

    1.简介 Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux shell,我们可以在终端中输 ...

  8. RedHat 6.2 Linux修改yum源免费使用CentOS源

    在没有光盘的情况,需要安装软件包,就要用到共网的yum源来安装了. RedHat linux 默认是安装了yum软件的,但是由于激活认证的原因让redhat无法直接进行yum安装一些软件,如果我们需要 ...

  9. java中的io系统详解 - ilibaba的专栏 - 博客频道 - CSDN.NET

    java中的io系统详解 - ilibaba的专栏 - 博客频道 - CSDN.NET 亲,“社区之星”已经一周岁了!      社区福利快来领取免费参加MDCC大会机会哦    Tag功能介绍—我们 ...

  10. [转]Hide or Remove jquery ui tab based on condition

    本文转自:http://stackoverflow.com/questions/19132970/hide-or-remove-jquery-ui-tab-based-on-condition 问: ...