数据表格 - DataGrid - 列表显示
<%@ 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 - 列表显示的更多相关文章
- easyUI 数据表格datagrid的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- [转载]EasyUI中数据表格DataGrid添加排序功能
我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...
- 数据表格 - DataGrid - 查询
toolbar头部工具栏 <script type="text/javascript"> $(function () { $("#datagrid" ...
- jquery easy ui 1.3.4 数据表格(DataGrid)(8)
8.1.创建DataGrid html代码 <table id="dg"></table> $("#dg").datagrid({ // ...
- easyui框架--基础篇(一)-->数据表格datagrid(php与mysql交互)
前 言 php easyui框架--本篇学习主要是 easyui中的datagrid(数据表格)框架. 本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属 ...
- 数据表格datagrid内容整理
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- easyUI数据表格datagrid之笔记2
/**========================================= * 追加在表格尾部 */function append(){ editIndex = $('#dg').dat ...
- 数据表格 - DataGrid - 行编辑
行编辑一般用于单行数据的增删改,如果不用行编辑实现的话,对于表单数据量不大的情况,可以使用弹窗(Dialog),如果数据量比较大,也就是需要操作的数据比较多的时候,可以新开一个tab页. 新增/编辑 ...
- 数据表格 - DataGrid - 字段排序
设置默认排序字段 sortName:"id",sortOrder:"desc",单独为每个字段设置排序 {field: "name", ti ...
随机推荐
- 使用eclipse创建spring mvc web工程并部署
创建maven工程
- SVN导出/导入、SVN备份/还原 【小白版】
一.导出: 1.进入svn安装路径bin文件夹下,使用 cd 命令. 在windows下,win+R 键入 cmd 回车 打开命令窗口cmd,进入下列目录(svn服务器安装目录bin): " ...
- DevExpress ASPxSplitter ClientSideEvents-PaneExpanded 时间用法
在webform中的devexpress aspxsplitter中套用了jquery-easyui的 tabs id=tt <div id="tt" class=" ...
- android Activity生命周期(设备旋转、数据恢复等)与启动模式
1.Activity生命周期 接下来将介绍 Android Activity(四大组件之一) 的生命周期, 包含运行.暂停和停止三种状态,onCreate.onStart.onResume.o ...
- Entity Framework在Asp.net MVC中的实现One Context Per Request(附源码)
上篇中"Entity Framework中的Identity map和Unit of Work模式", 由于EF中的Identity map和Unit of Work模式,EF体现 ...
- TechEd2013 Shanghai Hol Session PPT Share
上个月去上海参加了TechEd 2013,并且参与了Hands-on-Lab环节,作为讲师引导大家完成<Local DB in WP8>实验的内容.由于实验的内容采用MVVM架构完成,因此 ...
- JavaScript(三)——DOM操作一
一.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 二.Window对象操作 1.属性和方法: 属性(值或者子对象): op ...
- Oracle 安装后关于用户
一.关于用户 Oracle安装会自动的生产sys用户和system用户: 1. sys用户是超级用户,具有最高权限,具有sysdba角色,有create database的权限,该用户的默认密码是ch ...
- Python标准库(1) — itertools模块
简介 官方描述:Functional tools for creating and using iterators.即用于创建高效迭代器的函数. itertools.chain(*iterable) ...
- Java api 入门教程 之 JAVA的SYSTEM类
System类代表系统,系统级的很多属性和控制方法都放置在该类的内部.该类位于java.lang包. 由于该类的构造方法是private的,所以无法创建该类的对象,也就是无法实例化该类.其内部的成员变 ...