<%@ 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. 使用eclipse创建spring mvc web工程并部署

    创建maven工程

  2. SVN导出/导入、SVN备份/还原 【小白版】

    一.导出: 1.进入svn安装路径bin文件夹下,使用 cd 命令. 在windows下,win+R 键入 cmd 回车 打开命令窗口cmd,进入下列目录(svn服务器安装目录bin): " ...

  3. DevExpress ASPxSplitter ClientSideEvents-PaneExpanded 时间用法

    在webform中的devexpress aspxsplitter中套用了jquery-easyui的 tabs id=tt <div id="tt" class=" ...

  4. android Activity生命周期(设备旋转、数据恢复等)与启动模式

    1.Activity生命周期     接下来将介绍 Android Activity(四大组件之一) 的生命周期, 包含运行.暂停和停止三种状态,onCreate.onStart.onResume.o ...

  5. Entity Framework在Asp.net MVC中的实现One Context Per Request(附源码)

    上篇中"Entity Framework中的Identity map和Unit of Work模式", 由于EF中的Identity map和Unit of Work模式,EF体现 ...

  6. TechEd2013 Shanghai Hol Session PPT Share

    上个月去上海参加了TechEd 2013,并且参与了Hands-on-Lab环节,作为讲师引导大家完成<Local DB in WP8>实验的内容.由于实验的内容采用MVVM架构完成,因此 ...

  7. JavaScript(三)——DOM操作一

    一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 二.Window对象操作 1.属性和方法: 属性(值或者子对象): op ...

  8. Oracle 安装后关于用户

    一.关于用户 Oracle安装会自动的生产sys用户和system用户: 1. sys用户是超级用户,具有最高权限,具有sysdba角色,有create database的权限,该用户的默认密码是ch ...

  9. Python标准库(1) — itertools模块

    简介 官方描述:Functional tools for creating and using iterators.即用于创建高效迭代器的函数. itertools.chain(*iterable) ...

  10. Java api 入门教程 之 JAVA的SYSTEM类

    System类代表系统,系统级的很多属性和控制方法都放置在该类的内部.该类位于java.lang包. 由于该类的构造方法是private的,所以无法创建该类的对象,也就是无法实例化该类.其内部的成员变 ...