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.代码如下: 页面上 ...
随机推荐
- Date和String类型的相互转换
String转Date: SimpleDateFormat bartDateFormat = new SimpleDateFormat("MM-dd-yyyy"); String ...
- SQLServer批量备份与还原
原文地址:http://www.cnblogs.com/fygh/archive/2011/09/09/2172546.html 备份与还原是数据库避不开的主题,而作为DBA,经常会面临将一台机器上的 ...
- finger用户名、主目录、停滞时间、登录时间
finger yum install finger 1.作用 finger用来查询一台主机上的登录账号的信息,通常会显示用户名.主目录.停滞时间.登录时间.登录Shell等信息,使用权限为 ...
- Android自己定义控件实战——仿淘宝商品浏览界面
转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个Scr ...
- 远程centos改动yum源
yum -y install unzip发现运行不了,说是找不到unzip的包,搜索发现时由于yum源的问题,那我就改动yum吧, 在网上找到的方法是这么说的: 1. cd /etc/yum.repo ...
- a标签的背景图在ie8下不显示的问题
突然发现临下班时候问题就多, 马上下班了被头头告知线上已经上线很久的活动现在有个兼容性问题, a标签的背景图在ie8下会有不显示的情况. 我自己找了台ie8的机器实验了一下, 发现一切正常, 但是在另 ...
- ZooKeeper集群安装
ZooKeeper是Apache提供的.分布式服务协调系统,应用比較广泛. 由于项目中使用Kafka MQ,而Kafka全然使用ZooKeeper实现Kafka各组件的服务协调,包含Broker.Co ...
- JDBC连接数据库和释放连接
用久了hibernate现在对于JDBC是怎么实现数据库的连接和释放,所以特地总结下关于JDBC的知识,目的是用于提醒自己很多Java的基础知识需要健全. package com.ssh.action ...
- 重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState, VisualStateManager
原文:重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState ...
- unity3D实际的原始视频游戏开发系列讲座12之U3D的2D为了开发实战的新方法
U3D的2D为了开发实战的新方法 (Unity3d-4.x的打飞机2D游戏开发新的方法应用 ) 大纲介绍:不使用NGUI和TK2d插件, 使用 U3D内置强大的最大的工具. 开发过程设计到例 ...