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.代码如下: 页面上 ...
随机推荐
- IntelliJ IDEA中怎样使用JUnit4
背景 近期參与了一个Anroid医疗项目,当中项目底层有非常多基础类及通讯类,并且非常多涉及复杂的字节操作还有多线程同步及状态机处理.这种项目做一下TDD还是必要的,尽量项眼下期把风险减少一些. ...
- cocos2d-x ndk adt mac 路径配置
export PATH=/bin:/sbin:/usr/local/mysql/bin export PATH=$PATH:/Applications/MacVim-snapshot-68 expor ...
- jQuery cxSelect 多级联动下拉菜单
随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...
- linux su,sudo命令
linux su 命令 建议大家切换用户的时候 使用 su - root 这样,否则可能发现某些命令执行不了 关于su .su - 及 sudo的区别 请往下看 1.命令作用 su的作用是变更为其它使 ...
- 天翼玩家wifi,鸡肋or神器?
昨天,天一在成都,一个举行4G体验活动.谁是背着一个婴儿每一翼4G MiFi终奌站.市民可进入用户password自由的直接经验wifi互联网. 天翼随身wifi是什么? 这样的4G MiFi就是天翼 ...
- 64位CentOS5.6安装Mysql 5.5.11GA
1.更新并查看当前CentOS版本是否为5.6yum updatelsb_release -a 2.下载文件下载 bison-2.4.3.tar.gz到/usr/local/src下载 cmake-2 ...
- Oracle练习
--声明一个变量,并给它赋值 declare v_bonus number(8); begin select id*6 into v_bonus from A where Id=5; DBMS_OU ...
- (23)unity4.6学习Ugui中国文档-------非官方Demo1
大家好,我是广东太阳. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unitym ...
- UVA 10831 - Gerg's Cake(数论)
UVA 10831 - Gerg's Cake 题目链接 题意:说白了就是给定a, p.问有没有存在x^2 % p = a的解 思路:求出勒让德标记.推断假设大于等于0,就是有解,小于0无解 代码: ...
- 怎么解决 ubuntu 装kde桌面遇到的汉化问题
正在读取软件包列表... 完成正在分析软件包的依赖关系树 正在读取状态信息... 完成 现在没有可用的软件包 language-pack-kde-zh,但是它被其它的软件包引用了.这可能意味着这个缺失 ...