正文
[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",....},...]
