一、传统的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的使用的更多相关文章

  1. C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻

    前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...

  2. IOS学习笔记(四)之UITextField和UITextView控件学习

    IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...

  3. java之jvm学习笔记四(安全管理器)

    java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...

  4. Learning ROS for Robotics Programming Second Edition学习笔记(四) indigo devices

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  5. Typescript 学习笔记四:回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  7. muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制

    目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数 使用示例 EventLoop对eventfd的封装 工作时序 runInLoo ...

  8. python3.4学习笔记(四) 3.x和2.x的区别,持续更新

    python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...

  9. Go语言学习笔记四: 运算符

    Go语言学习笔记四: 运算符 这章知识好无聊呀,本来想跨过去,但没准有初学者要学,还是写写吧. 运算符种类 与你预期的一样,Go的特点就是啥都有,爱用哪个用哪个,所以市面上的运算符基本都有. 算术运算 ...

  10. 零拷贝详解 Java NIO学习笔记四(零拷贝详解)

    转 https://blog.csdn.net/u013096088/article/details/79122671 Java NIO学习笔记四(零拷贝详解) 2018年01月21日 20:20:5 ...

随机推荐

  1. linux下搭建android NDK开发环境

      1)下载android-ndk-r4 下载地址 http://www.ideasandroid.com/android/sdk/android-ndk-r4-linux-x86.zip http: ...

  2. AC自动机详解

    概述 AC自动机全称Aho-Corasick automaton,该算法在1975年产生于贝尔实验室,是著名的多模匹配算法. 考虑这样一个场景,给出L个模式字符串(加总长度为N),以及长度为M大文本, ...

  3. 张超超OC基础回顾_05 property修饰符,id类型,instancetype。。。

    一.property 如果给一个属性同时提供了getter/setter方法, 那么我们称这个属性为可读可写属性 如果只提供了getter方法, 那么我们称这个属性为只读属性 如果只提供了setter ...

  4. SQL SERVER FOR XML PATH合并字符串

    两种方式,效率立竿见影 ------------------------------------------------ SET STATISTICS TIME ON DECLARE @OrderSt ...

  5. linux操作小技巧

    巧妙利用别称 alias,让工作更有效率 在我的个人目录下/home/zdwu,打开.bashrc文件进行修改: 将  ll='ls -alF' 改为 ll='ls -ahlF',是的观察的结果显示更 ...

  6. 关于Rest Framework中View、APIView与GenericAPIView的对比分析

    关于Rest Framework中View.APIView与GenericAPIView的对比分析  https://blog.csdn.net/odyssues_lee/article/detail ...

  7. SpringMVC——RequestMapping

    一.@RequestMapping 映射请求 Spring MVC 通过@RequestMapping注解可以定义不同的处理器映射规则. @RequestMapping放在类名上边,设置请求前缀 方法 ...

  8. mac安装nose,command not found:nosetests

    mac通过pip install nose失败,看了一下是权限的问题,重新用sudo pip install nose安装,安装成功. 但是执行nosetests时,提示command not fou ...

  9. Binder的工作机制浅析

    在Android开发中,Binder主要用于Service中,包括AIDL和Messenger,其中Messenger的底层实现就是AIDL,所以我们这里通过AIDL来分析一下Binder的工作机制. ...

  10. Portal:Machine learning机器学习:门户

    Machine learning Machine learning is a scientific discipline that explores the construction and stud ...