连接一台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的更多相关文章

  1. EasyUI DataGrid及Pagination

    接上一篇EasyUI项目驱动学习 DataGrid数据表格及Pagination分页一起介绍 一.通过<table>标记创建DataGrid,嵌套<th>标签定义列表 < ...

  2. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...

  3. easyui datagrid 没数据时显示滚动条的解决方法

    今天解决了一个bug,因为datagrid有多列,可是当没有数据的时候,后面的列无法通过滚动条拉动来显示,比较麻烦,而需求要求没有数据也要拉动滚动条查看后面有什么列,一开始在网上找了一些资料,发现都不 ...

  4. easyUI datagrid editor扩展dialog

    easyUI datagrid简单使用:着重两点1.editor对象的click事件:2.将dialog窗体内的值填写到当前正编辑的单元格内 <!DOCTYPE html> <htm ...

  5. easyui datagrid标题列宽度自适应

    最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...

  6. 实现easyui datagrid在没有数据时显示相关提示内容

    本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...

  7. 初识 easyui datagrid

    首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jqu ...

  8. 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% ...

  9. jquery easyui datagrid使用参考

    jquery easyui datagrid使用参考   创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...

随机推荐

  1. IntelliJ IDEA中怎样使用JUnit4

     背景 近期參与了一个Anroid医疗项目,当中项目底层有非常多基础类及通讯类,并且非常多涉及复杂的字节操作还有多线程同步及状态机处理.这种项目做一下TDD还是必要的,尽量项眼下期把风险减少一些. ...

  2. cocos2d-x ndk adt mac 路径配置

    export PATH=/bin:/sbin:/usr/local/mysql/bin export PATH=$PATH:/Applications/MacVim-snapshot-68 expor ...

  3. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  4. linux su,sudo命令

    linux su 命令 建议大家切换用户的时候 使用 su - root 这样,否则可能发现某些命令执行不了 关于su .su - 及 sudo的区别 请往下看 1.命令作用 su的作用是变更为其它使 ...

  5. 天翼玩家wifi,鸡肋or神器?

    昨天,天一在成都,一个举行4G体验活动.谁是背着一个婴儿每一翼4G MiFi终奌站.市民可进入用户password自由的直接经验wifi互联网. 天翼随身wifi是什么? 这样的4G MiFi就是天翼 ...

  6. 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 ...

  7. Oracle练习

    --声明一个变量,并给它赋值 declare  v_bonus number(8); begin select id*6 into v_bonus from A where Id=5; DBMS_OU ...

  8. (23)unity4.6学习Ugui中国文档-------非官方Demo1

    大家好,我是广东太阳.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unitym ...

  9. UVA 10831 - Gerg&#39;s Cake(数论)

    UVA 10831 - Gerg's Cake 题目链接 题意:说白了就是给定a, p.问有没有存在x^2 % p = a的解 思路:求出勒让德标记.推断假设大于等于0,就是有解,小于0无解 代码: ...

  10. 怎么解决 ubuntu 装kde桌面遇到的汉化问题

    正在读取软件包列表... 完成正在分析软件包的依赖关系树 正在读取状态信息... 完成 现在没有可用的软件包 language-pack-kde-zh,但是它被其它的软件包引用了.这可能意味着这个缺失 ...