1. 新建一个GridNode的类:

public class GridNode {
private Long id;
private String title;//投票标题
private Integer type;
private String version;
private String options;//备选项数
private String participants;//参与人数
//getter/setter/constructor省略
}

2. 网页内新建一个table元素.

3. script代码

    $(function(){
$('#dg').datagrid({
url:'server/demo7_server.jsp', //远程请求数据的url路径
pagination:true, //显示底部分页栏
pageSize:5, //默认每页记录数
pageList:[5,10,15], //显示列表记录数的下拉框选项(左下角的数字下拉框)
columns:[[    //是一个JSON数组,列:复选框,标题,备选项数,参与人数
{field:'ck',checkbox:true},
{field:'title',title:'投票标题',width:408},
{field:'options',title:'备选项数',width:60,align:'center'},
{field:'participants',title:'参与人数',styler:myStyler}
]],
toolbar: [{ //是一个JSON数组
text: '添加',
iconCls: 'icon-add',
handler: function() { 该JSON对表示一个函数:弹出添加操作.当然可以丰富其内容真正实现添加,比如跳转到添加函数的控制器.
alert("添加");
}
}, '-', { //'-' 功能未知
text: '修改',
iconCls: 'icon-edit',
handler: function() {
alert("修改");
}
}, '-',{
text: '删除',
iconCls: 'icon-remove',
handler: function(){
alert("删除");
}
}],
singleSelect:true,  //单选,这个表格不能多选.
rownumbers:true,  //显示行数
iconCls: 'icon-search', //图标
fitColumns:true,//自适应宽度,防止水平滚动
height:'auto',
striped:true,//隔行变色
loadMsg:"正努力为您加载中......" //刚加载或者刷新后加载过程中显示的信息
});
});
//下面的函数不知道有什么卵用...
function myStyler(value,row,index){
if (value < 5){
return 'background-color:#ffee00;color:red;';
}else if(value > 15){
return 'color:green;';
}
}
    $(function(){
$('#dg').datagrid({
url:'server/demo7_server.jsp', //远程请求数据的url路径
pagination:true, //显示底部分页栏
pageSize:5, //默认每页记录数
pageList:[5,10,15], //显示列表记录数的下拉框选项
columns:[[
{field:'ck',checkbox:true},
{field:'title',title:'投票标题',width:408},
{field:'options',title:'备选项数',width:60,align:'center'},
{field:'participants',title:'参与人数',styler:myStyler}
]],
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function() {
alert("添加");
}
}, '-', {
text: '修改',
iconCls: 'icon-edit',
handler: function() {
alert("修改");
}
}, '-',{
text: '删除',
iconCls: 'icon-remove',
handler: function(){
alert("删除");
}
}],
singleSelect:true,
rownumbers:true,
iconCls: 'icon-search',
fitColumns:true,//自适应宽度,防止水平滚动
height:'auto',
striped:true,//隔行变色
loadMsg:"正努力为您加载中......"
});
}); function myStyler(value,row,index){
if (value < 5){
return 'background-color:#ffee00;color:red;';
}else if(value > 15){
return 'color:green;';
}
}

4. 服务器网页的Java代码

a>导入GridNode的javaBean

b>新建ArrayList<GridNode>:

List<GridNode> list = new ArrayList<GridNode>();

并新建一些GridNode对象添加到list中.

list.add(new GridNode(1L,"选出你心目中最好的下载工具","2","6"));

c>接下来的代码:

 //获取客户端传递的分页参数    默认参数rows表示每页显示记录条数,  默认参数page表示当前页数
Integer pageSize = Integer.parseInt(request.getParameter("rows"));//目测rows是datagrid自带的参数,表示行数
Integer pageNumber = Integer.parseInt(request.getParameter("page"));//当前页码
StringBuilder builder = new StringBuilder("{\"total\":"+list.size()+",\"rows\":[");
 int start = (pageNumber-1) * pageSize;//计算开始记录数
int end = start+pageSize;//计算结束记录数
for(int i=start;i<end && i<list.size();i++){
GridNode gn = list.get(i);
builder.append("{\"id\":\""+gn.getId()+"\",\"title\":\""+gn.getTitle()+"\",\"options\":"+gn.getOptions()+",\"participants\":"+gn.getParticipants()+"},");
}
String gridJSON = builder.toString();
if(gridJSON.endsWith(",")){
gridJSON = gridJSON.substring(0,gridJSON.lastIndexOf(","));
}
out.print(gridJSON+"]}");
//输出:

{"total":list.size(),"rows":[{"id":1L,"title":"选出1",....}
,{"id":2L,"title":"选出2",....},...]

[easyUI] datagrid 数据格 可以进行分页的更多相关文章

  1. 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格

    EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

  2. 浅谈jQuery easyui datagrid操作单元格样式

    今天项目上遇到问题,就是表格风格统一的问题,由于用了2个不同的框架,所以如果要大修比较麻烦,考虑到修改表格样式工作量会少很多,所以考虑修改jQuery easyui datagrid数据网格的样式. ...

  3. EasyUI datagrid数据表格的函数getData返回来的是什么

    EasyUI datagrid数据表格的函数getData返回来的是什么? 他返回来的是这么一个对象: Object { rows=[10], total=15} 其中rows就是每一行的数据,是这些 ...

  4. 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  5. 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)

    客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...

  6. EasyUI Datagrid 数据网格

    前端用easyUI开发时,官方给的文档指导太少,网上找的又很慢,因此,我总结了一个后台返回数据后,用easyUI生成表格的方法,可编辑可分页: 1 function paginationTable(i ...

  7. [转载]easyui datagrid 时间格化(JS 日期时间本地化显示)

    easyui datagrid 日期时间显示不正常,后台java 类型为 DATE 经过JSON工具一转化传到前台来就是这样,不便 于是想格式化一下, 格式化代码 如下: [javascript] v ...

  8. jquery easyui DataGrid 数据表格 属性

    用法 1.  <table id="tt"></table> 1.  $('#tt').datagrid({ 2.      url:'datagrid_d ...

  9. EasyUI Datagrid 单元格编辑

    3:对于单元格的编辑 $('#Units').datagrid({ pageNumber: 1, //url: "@ViewBag.Domain/Paper/GetQuestionUnit& ...

随机推荐

  1. VBA语法总结

    为了控制Excel,学了些VBA,总结下语法,下文分为五部分: 一.代码组织 二.常用数据类型 三.运算符 四.控制流 五.常用内置函数 一.代码组织 1.能写代码的地方有{模块,类模块}. 2.代码 ...

  2. Spark application注册master机制

    直接上Master类的代码: case RegisterApplication(description) => { if (state == RecoveryState.STANDBY) { / ...

  3. vs自定义类模板

    .找到VS安装目录,我的目录是:C:Program Files (x86)Microsoft Visual Studio 12.0 .在C:Program Files (x86)Microsoft V ...

  4. java框架之SpringCloud(5)-Hystrix服务熔断、降级与监控

    前言 分布式系统面临的问题 复杂分布式体系结构中的应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免地失败.不做任何处理的情况下,很容易导致服务雪崩. 服务雪崩:多个微服务之间调用的时候,假设 ...

  5. Kaggle初学者五步入门指南,七大诀窍助你享受竞赛

    Kaggle 是一个流行的数据科学竞赛平台,已被谷歌收购,参阅<业界 | 谷歌云官方正式宣布收购数据科学社区 Kaggle>.作为一个竞赛平台,Kaggle 对于初学者来说可能有些难度.毕 ...

  6. Qt setMouseTracking(true) 无效

    网友1:并非只在QWidget中设置setMouseTracking(true)才好用,如若在QMainwindow中设置为true还是不能跟踪,解决办法为在ui中的属性栏主窗口的“mouseTrac ...

  7. ECMAScript6 入门教程 初学记录let命令 块级作用域

    一.基本语法-let命令 (1)ES6新增了let命令,用来声明变量.所声明的变量,只在let命令所在的代码块内有效. 循环的计数器,就很合适使用let命令.计数器i只在for循环体内有效,在循环体外 ...

  8. Java当出现未被捕获的异常应该如何处理

    在你学习在程序中处理异常之前,看一看如果你不处理它们会有什么情况发生是很有好处的.下面的小程序包括一个故意导致被零除错误的表达式.class Exc0 {    public static void ...

  9. Spring Boot IoC 容器初始化过程

    1. 加载 ApplicationContextInializer & ApplicationListener 2. 初始化环境 ConfigurableEnvironment & 加 ...

  10. winform中的dateTimePicker控件设置默认值为空

    winform中的dateTimePicker控件设置默认值为空   第一步:设置Format的属性值为“Custom” 第二步:设置CustomFormat的属性值为空,需要按一个空格键