EasyUI DataGrid及Pagination
接上一篇EasyUI项目驱动学习
DataGrid数据表格及Pagination分页一起介绍
一、通过<table>标记创建DataGrid,嵌套<th>标签定义列表
<table id="dg" class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'ck',checkbox:true"></th>
<th data-options="field:'username',width:100">
名称
</th>
<th data-options="field:'orgname',width:100">
组织机构
</th>
<th data-options="field:'state',width:100">
状态
</th>
<th data-options="field:'loginname',width:100">
登录名
</th>
<th data-options="field:'ctime',width:100">
创建时间
</th>
</tr>
</thead>
</table>
<!-- 分页栏 -->
<div id="dom_var_pagination" class="easyui-pagination"></div>
二、加载数据表格
$("#dg").datagrid( {
url : 'getUserAction.action',
closable : true,
checkOnSelect : true,
striped : true,
rownumbers : true,
'toolbar' : '',
fitColumns : true,
loadFilter : function(data) {
var data_ = {
"rows" : data.resultList, //行数据
"total" : data.totalSize //总记录数
}
$("#dom_var_pagination").pagination( {
total : data.totalSize
});
return data_;
}
});
data.resultList 为后台返回的JSON格式的数据
如:[{id=1,loginname=zhangsan,username=zhangsan,state=可用, ctime=2014-01-01}]
再此后台代码就不再叙述,需要的话 可下载演示代码:http://download.csdn.net/detail/itmyhome/7609373
三、分页
$("#dom_var_pagination").pagination( {
onSelectPage: function(pageNumber, pageSize){
$('#dg').datagrid('load',{
pagesize: pageSize,
currentPage: pageNumber
});
}
});
效果截图:
项目源码下载:http://download.csdn.net/detail/itmyhome/7609373
转载请注明出处:http://blog.csdn.net/itmyhome1990/article/details/37563551
EasyUI DataGrid及Pagination的更多相关文章
- EasyUI DataGrid和Pagination
连接一台EasyUI项目驱动学习 DataGrid数据表格及Pagination分页一起介绍 一.通过<table>标记创建DataGrid,嵌套<th>标签定义列表 < ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
- easyui datagrid 没数据时显示滚动条的解决方法
今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...
- easyUI datagrid editor扩展dialog
easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...
- easyui datagrid标题列宽度自适应
最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...
- 实现easyui datagrid在没有数据时显示相关提示内容
本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...
- 初识 easyui datagrid
首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jqu ...
- jQuery EasyUI datagrid实现本地分页的方法
http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
随机推荐
- 编译AVX代码,升级Redhat 5.5 GCC至4.7.1
Redhat 的GCC编译器4.1版本号,为SSE4,AVX,AVX2支持不够好,官方建议4.7以上. 就这样开始了GCC升级之路. 因为Redhat 5.5它安装在一个虚拟机.全然解决,经过若干尝试 ...
- The Swift Programming Language-官方教程精译Swift(3)基本运算符
运算符是检查, 改变, 合并值的特殊符号或短语. 例如, 加号 + 把计算两个数的和(如 let i = 1 + 2). 复杂些的运行算包括逻辑与&&(如 if enteredDoor ...
- C#抓取AJAX页面的内容
原文 C#抓取AJAX页面的内容 现在的网页有相当一部分是采用了AJAX技术,所谓的AJAX技术简单一点讲就是事件驱动吧(当然这种说法可能很不全面),在你提交了URL后,服务器发给你的并不是所有是页面 ...
- 大endian和little endian
大endian和little endian 一般Intel处理器或X86平台是小端 ,只是有点老了摩托罗拉的处理器将采用大端,掌握一下小端序. 小端序一般指低地址存低字节.高地址存高 ...
- 一个极简的守护进程Bash脚本
由于最近写的Node.js程序因为一些Bug,会出现一些自动退出的问题,所以需要在它退出的时候及时发现,并重新启动 于是查阅了些资料,写了一个Bash的程序,功能十分简单,就是每隔3s判断一次处在60 ...
- HDU1024 Max Sum Plus Plus(DP)
状态:d(i,j)它代表前j划分数i部并且包括第一j最佳结果时的数.g(i,j)表示前j划分数i最好的结果时,段,g(m,n)结果,需要. 本题数据较大.需採用滚动数组.注意:这题int类型就够用了, ...
- D3D 光照和材料 小样例
1.实现一个旋转的圆柱体,体现d3d光照效果 2.程序实现 #pragma once #pragma comment(lib,"winmm.lib") #pragma commen ...
- Apache2.4.x与Apache2.2.x的一些区别
改用Apache2.4一段时间了,一直没发现它和Apache2.2的有什么区别,一些基本配置都是差不多,直到前几天配置虚拟主机是才发现了一些小小的不同 一直以来我都是在htdocs目录下配置虚拟主机的 ...
- html5跨域数据传递(postMessage)
在html5中有个支持跨域传递的方法postMessage,可是实现iframe之间的数据传递! 代码如下:数据发送页面 <!DOCTYPE HTML> <html lang=&qu ...
- C#发送邮件三种方法(Localhost,SMTP,SSL-SMTP)
原文:C#发送邮件三种方法(Localhost,SMTP,SSL-SMTP) 最近公司由于一个R&I项目的需要,用户要求在购买产品或出货等一些环节,需要发送邮件提醒或者说每周一让系统自动采集数 ...