首先我们考虑一下在项目投票种用到的属性(ID,投票标题,备选项目,参与人数)
entity
package cn.entity; public class GridNode { private Long id; private String title; private Integer type ; private String version; private String options; private String participants; public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getVersion() { return version; } public void setVersion(String version) { this.version = version; } public String getOptions() { return options; } public void setOptions(String options) { this.options = options; } public String getParticipants() { return participants; } public void setParticipants(String participants) { this.participants = participants; } public GridNode() { super(); // TODO Auto-generated constructor stub } public GridNode(Long id, String title, Integer type, String options, String participants) { super(); this.id = id; this.title = title; this.type = type; this.options = options; this.participants = participants; } public GridNode(Long id, String title, String options, String participants) { super(); this.id = id; this.title = title; this.options = options; this.participants = participants; } public Integer getType() { return type; } public void setType(Integer type) { this.type = type; } }
编写sl7.jsp(实现基础及配置)
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'sl7.jsp' starting page</title> <link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/themes/icon.css"> <link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/css/demo.css"> <script src="<%=path%>/js/jquery-1.8.3.js"></script> <script src="<%=path%>/js/jquery.easyui.min.js"></script> <script> $(function(){ $('#dg').datagrid({ //远程请求数据的url路径 url:'<%=path%>/SL/sl7_server.jsp', pagination:true, //显示底部分页栏 pageSize:5, //默认每页记录数 pageList:[5,10,15], //显示列表记录数的下拉框选项 columns:[[ {field:'ck',checkbox:true}, {field:'title',title:'投票标题',408}, {field:'options',title:'备选项数',60,align:'center'}, {field:'participants',title:'参与人数',styler:myStyler} ]], singleSelect:true, rownumbers:true, iconCls: 'icon-search', fitColumns:true,//自适应宽度，防止水平滚动 striped:true,//隔行变色 loadMsg:"正努力为您加载中......" }); }); function myStyler(value,row,index){ if (value < 5){ return 'background-color:#ffee00;color:red;'; }else if(value > 15){ return 'color:green;'; } } </script> </head> <body> <table id="dg" title="投票列表" class="easyui-grid" style="700px;height:215px"></table> </body> </html>
编写josn(添加数据与分页页数的配置)
<%@ page language="java" import="java.util.*,cn.entity.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <% List<GridNode> list = new ArrayList<GridNode>(); list.add(new GridNode(1L,"选出你心目中最好的下载工具","2","6")); list.add(new GridNode(2L,"选出你心目中最好的输入法","5","4")); list.add(new GridNode(3L,"选出你心目中最好的浏览器","5","11")); list.add(new GridNode(4L,"选出你心目中最好的杀毒软件","6","4")); list.add(new GridNode(5L,"选出你心目中最好的社交软件","3","14")); list.add(new GridNode(6L,"选出你心目中最好的聊天工具","3","2")); list.add(new GridNode(7L,"选出你心目中最好的翻译软件","5","0")); list.add(new GridNode(8L,"选出你心目中最好的播放器","2","23")); list.add(new GridNode(9L,"选出你心目中最好的免费软件","4","7")); list.add(new GridNode(10L,"选出你心目中最好的录音软件","4","18")); list.add(new GridNode(11L,"选出你心目中最好的刷机软件","5","6")); //获取客户端传递的分页参数 默认参数rows表示每页显示记录条数， 默认参数page表示当前页数 Integer pageSize = Integer.parseInt(request.getParameter("rows")); 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+"]}"); %>