[easyUI] datagrid 数据格 可以进行分页
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 数据格 可以进行分页的更多相关文章
- 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...
- 浅谈jQuery easyui datagrid操作单元格样式
今天项目上遇到问题,就是表格风格统一的问题,由于用了2个不同的框架,所以如果要大修比较麻烦,考虑到修改表格样式工作量会少很多,所以考虑修改jQuery easyui datagrid数据网格的样式. ...
- EasyUI datagrid数据表格的函数getData返回来的是什么
EasyUI datagrid数据表格的函数getData返回来的是什么? 他返回来的是这么一个对象: Object { rows=[10], total=15} 其中rows就是每一行的数据,是这些 ...
- 扩充 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停/离开事件(onMouseOver/onMouseOut)
客户需求: jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) 如图所示,Datagrid 鼠标悬停/离开数据行时 ...
- EasyUI Datagrid 数据网格
前端用easyUI开发时,官方给的文档指导太少,网上找的又很慢,因此,我总结了一个后台返回数据后,用easyUI生成表格的方法,可编辑可分页: 1 function paginationTable(i ...
- [转载]easyui datagrid 时间格化(JS 日期时间本地化显示)
easyui datagrid 日期时间显示不正常,后台java 类型为 DATE 经过JSON工具一转化传到前台来就是这样,不便 于是想格式化一下, 格式化代码 如下: [javascript] v ...
- jquery easyui DataGrid 数据表格 属性
用法 1. <table id="tt"></table> 1. $('#tt').datagrid({ 2. url:'datagrid_d ...
- EasyUI Datagrid 单元格编辑
3:对于单元格的编辑 $('#Units').datagrid({ pageNumber: 1, //url: "@ViewBag.Domain/Paper/GetQuestionUnit& ...
随机推荐
- VBA语法总结
为了控制Excel,学了些VBA,总结下语法,下文分为五部分: 一.代码组织 二.常用数据类型 三.运算符 四.控制流 五.常用内置函数 一.代码组织 1.能写代码的地方有{模块,类模块}. 2.代码 ...
- Spark application注册master机制
直接上Master类的代码: case RegisterApplication(description) => { if (state == RecoveryState.STANDBY) { / ...
- vs自定义类模板
.找到VS安装目录,我的目录是:C:Program Files (x86)Microsoft Visual Studio 12.0 .在C:Program Files (x86)Microsoft V ...
- java框架之SpringCloud(5)-Hystrix服务熔断、降级与监控
前言 分布式系统面临的问题 复杂分布式体系结构中的应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免地失败.不做任何处理的情况下,很容易导致服务雪崩. 服务雪崩:多个微服务之间调用的时候,假设 ...
- Kaggle初学者五步入门指南,七大诀窍助你享受竞赛
Kaggle 是一个流行的数据科学竞赛平台,已被谷歌收购,参阅<业界 | 谷歌云官方正式宣布收购数据科学社区 Kaggle>.作为一个竞赛平台,Kaggle 对于初学者来说可能有些难度.毕 ...
- Qt setMouseTracking(true) 无效
网友1:并非只在QWidget中设置setMouseTracking(true)才好用,如若在QMainwindow中设置为true还是不能跟踪,解决办法为在ui中的属性栏主窗口的“mouseTrac ...
- ECMAScript6 入门教程 初学记录let命令 块级作用域
一.基本语法-let命令 (1)ES6新增了let命令,用来声明变量.所声明的变量,只在let命令所在的代码块内有效. 循环的计数器,就很合适使用let命令.计数器i只在for循环体内有效,在循环体外 ...
- Java当出现未被捕获的异常应该如何处理
在你学习在程序中处理异常之前,看一看如果你不处理它们会有什么情况发生是很有好处的.下面的小程序包括一个故意导致被零除错误的表达式.class Exc0 { public static void ...
- Spring Boot IoC 容器初始化过程
1. 加载 ApplicationContextInializer & ApplicationListener 2. 初始化环境 ConfigurableEnvironment & 加 ...
- winform中的dateTimePicker控件设置默认值为空
winform中的dateTimePicker控件设置默认值为空 第一步:设置Format的属性值为“Custom” 第二步:设置CustomFormat的属性值为空,需要按一个空格键