EasyUI学习笔记(四)—— datagrid的使用
一、传统的HTML表格
之前我们做表格的时候是这样写的:
<table >
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>小明</td>
<td>90</td>
</tr>
<tr>
<td>002</td>
<td>老王</td>
<td>3</td>
</tr>
</tbody>
</table>
效果是这样的:
二、将静态HTML渲染为datagrid样式
<!--方式一:将静态HTML渲染为datagrid样式-->
<table class="easyui-datagrid">
<thead>
<tr>
<!--field属性必须要加,否则出不来效果-->
<th data-options="field:'id',width:100">编号</th>
<th data-options="field:'name',width:100,align:'center'">姓名</th>
<th data-options="field:'age',width:100,align:'right'">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>小明</td>
<td>90</td>
</tr>
<tr>
<td>002</td>
<td>老王</td>
<td>3</td>
</tr>
</tbody>
</table>
效果如下:
三、发送ajax获取json创建datagrid
提供json文件:
代码修改如下:
<table class="easyui-datagrid" data-options="url:'${pageContext.request.contextPath}/json/datagrid_data.json'">
<thead>
<tr>
<!--field属性必须要加,否则出不来效果-->
<th data-options="field:'id',width:100">编号</th>
<th data-options="field:'name',width:100,align:'center'">姓名</th>
<th data-options="field:'age',width:100,align:'right'">年龄</th>
</tr>
</thead>
</table>
效果如下:
四、使用JS创建datagrid(掌握)
<!-- 方式三:使用easyUI提供的API创建datagrid -->
<table id="mytable"></table>
<script type="text/javascript">
$(function () {
//页面加载完成后,创建数据表格datagrid
$("#mytable").datagrid({
//定义标题行所有的列
columns:[[
{title:'编号',field:'id',checkbox:true},
{title:'姓名',field:'name'},
{title:'年龄',field:'age'},
{title:'地址',field:'address'}
]],
//指定数据表格发送ajax请求的地址
url:'${pageContext.request.contextPath }/json/datagrid_data.json',
rownumbers:true,
singleSelect:true,
//定义工具栏
toolbar:[
{text:'添加',iconCls:'icon-add',
// 为按钮绑定单击事件
handler:function () {
alert("add...");
}
},
{text:'删除',iconCls:'icon-remove'},
{text:'修改',iconCls:'icon-edit'},
{text:'查询',iconCls:'icon-search'}
],
// 显示分页条
pagination:true,
pageList: [3, 5, 7, 9]
})
})
</script>
效果如下:
每当我们改变显示页数的时候,都会发送Ajax请求,实现了我们需要的效果。
那么此时我们需要做什么呢?我们应该接收这个请求,根据它提交过来的分页参数来查询数据库,然后把数据响应回来。
注意:现在我们的页面加上了分页条,要求响应的json做相应的修改,因为页面需要展示“共?页,共?条记录”,而我们之前提供的json并没有这两样信息,这些信息客户端肯定不知道,需要服务端查询数据库之后才知道。所以响应回来的json数据中还应该包含总的记录数:
发送请求时:
EasyUI学习笔记(四)—— datagrid的使用的更多相关文章
- C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
- IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
- java之jvm学习笔记四(安全管理器)
java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(四) indigo devices
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记四:回忆ES5 中的类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制
目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数 使用示例 EventLoop对eventfd的封装 工作时序 runInLoo ...
- python3.4学习笔记(四) 3.x和2.x的区别,持续更新
python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...
- Go语言学习笔记四: 运算符
Go语言学习笔记四: 运算符 这章知识好无聊呀,本来想跨过去,但没准有初学者要学,还是写写吧. 运算符种类 与你预期的一样,Go的特点就是啥都有,爱用哪个用哪个,所以市面上的运算符基本都有. 算术运算 ...
- 零拷贝详解 Java NIO学习笔记四(零拷贝详解)
转 https://blog.csdn.net/u013096088/article/details/79122671 Java NIO学习笔记四(零拷贝详解) 2018年01月21日 20:20:5 ...
随机推荐
- js点击按钮获取验证码倒计时
//发送验证码倒计时 var clock = ''; var nums = 60; var btn; $("#btnGetVerCode").click(function () { ...
- Log4J 配置 详解
Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...
- Luogu 5043 【模板】树同构([BJOI2015]树的同构)
BZOJ 4337 简单记录一种树哈希的方法:以$x$为根的子树的哈希值为$\sum_{y \in son(x)}f_y*base_i$,$f_y$表示以$y$为根的树的哈希值,其中$i$表示$f_y ...
- poj 1988 Cube Stacking (并查集)
题意:有N(N<=30,000)堆方块,开始每堆都是一个方块.方块编号1 – N. 有两种操作: M x y : 表示把方块x所在的堆,拿起来叠放到y所在的堆上. C x : 问方块x下面有多少 ...
- 单元测试NUnit 的文章
请参考 https://www.cnblogs.com/ranh941/p/7629279.htmlhttps://blog.csdn.net/qincode/article/details/1831 ...
- Media Queries 媒体类型
引用方法:1.<link rel="stylesheet" type="text/css" href="style.css" medi ...
- docker搭建gitbook服务
Gitbook Gitbook简介 GitBook 是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdown 来制作精美的电子书,GitBook 并非关于 Git ...
- 常用Linux命令:netstat
一.netstat:显示各种网络相关信息 1.命令格式 netstat [参数] 2.常用参数 -a :(all)显示所有选项,默认不现实LISTEN相关 -t :(tcp)仅显示tcp相关 ...
- db2中临时表在存储过程中的使用
DROP PROCEDURE ADMINISTRATOR.SP_TEST (INTEGER, CHARACTER ()); CREATE PROCEDURE administrator.sp_test ...
- Android app如何加密?
欢迎访问网易云社区,了解更多网易技术产品运营经验. Android App包含的内容有dex文件,so文件,res,assets资源文件.对应的加密按此内容分为三大方面:dex保护.so加密.资源保护 ...