Struts2 + easyui的DataGrid 分页

本文介绍了一个使用EasyUI的表格组件(datagrid)实现车辆违章信息管理系统的具体案例。该系统具备分页、排序等功能,并集成了添加、修改、删除等操作。通过详细展示JS代码与后台交互过程,为开发者提供了完整的实现方案。

jsp页面

   


js代码:

  1. $(function() {  
  2.     $('#ff').hide();  
  3.     $('#tt').datagrid({  
  4.        title : '信息显示',  
  5.        iconCls : 'icon-save',  
  6.        width : 'auto',  
  7.        height : 'auto',  
  8.        pageSize:10,  
  9.        pageList : [ 5, 10, 15 ],  
  10.        nowrap : true,  
  11.        striped : true,  
  12.        collapsible : true,  
  13.        url : 'pecc/peccList.action',  
  14.        loadMsg : '数据装载中......',  
  15.        onLoadError : function() {  
  16.            alert('数据加载失败!');  
  17.        },  
  18.        sortName : 'code',  
  19.        sortOrder : 'desc',  
  20.        remoteSort : false,  
  21.        frozenColumns : [ [ {  
  22.            field : 'ck',  
  23.            checkbox : true  
  24.        } ] ],  
  25.        columns : [ [ {  
  26.            title : '车牌号',  
  27.            field : 'carNumber',  
  28.            width : '100',  
  29.            rowspan : 2,  
  30.            align : 'center'  
  31.        }, {  
  32.            title : '车主',  
  33.            field : 'carPer',  
  34.            width : '100',  
  35.            rowspan : 2,  
  36.            align : 'center'  
  37.        }, {  
  38.            title : '违章时间',  
  39.            field : 'pTime',  
  40.            width : '80',  
  41.            rowspan : 2,  
  42.            align : 'center'  
  43.        }, {  
  44.            title : '违章地点',  
  45.            field : 'pPlace',  
  46.            width : '220',  
  47.            rowspan : 2,  
  48.            align : 'center'  
  49.        }, {  
  50.            title : '违章原因',  
  51.            field : 'pCase',  
  52.            width : '220',  
  53.            rowspan : 2,  
  54.            align : 'center'  
  55.        }, {  
  56.            title : '来源',  
  57.            field : 'pOrg',  
  58.            width : '120',  
  59.            rowspan : 2,  
  60.            align : 'center'  
  61.        }, {  
  62.            title : '交警大队',  
  63.            field : 'pPer',  
  64.            width : '300',  
  65.            rowspan : 2,  
  66.            align : 'center'  
  67.        } ] ],  
  68.        pagination : true,  
  69.        rownumbers : true,  
  70.        toolbar : [ {  
  71.            text : '全部',  
  72.            iconCls : 'icon-ok',  
  73.            handler : function() {  
  74.               $('#tt').datagrid({  
  75.                   url : 'pecc/peccList.action'  
  76.               });  
  77.            }  
  78.        }, '-', {  
  79.            text : '添加',  
  80.            iconCls : 'icon-add',  
  81.            handler : function() {  
  82.               openAdd();  
  83.               $('#ff').show();  
  84.               $('#ff').form('clear');  
  85.               $('#ff').appendTo('#aa');  
  86.            }  
  87.        }, '-', {  
  88.            text : '修改',  
  89.            iconCls : 'icon-edit',  
  90.            handler : getSelect  
  91.        }, '-', {  
  92.            text : '删除',  
  93.            iconCls : 'icon-remove',  
  94.            handler : del  
  95.        }, '-', {  
  96.            text : '查询',  
  97.            iconCls : 'icon-search',  
  98.            handler : function() {  
  99.               $('#query').window('open');  
  100.    
  101.            }  
  102.        } ]  
  103.     });  
  104.     displayMsg();  
  105. });  
  106. function displayMsg() {  
  107.     $('#tt').datagrid('getPager').pagination({  
  108.        displayMsg : '当前显示从{from}到{to}共{total}记录'  
  109.     });  
  110. }  

Action 代码:

  1. @Controller  
  2. @ParentPackage("mydefault")  
  3. @Namespace("")  
  4. public class Pecc extends ActionSupport {  
  5.     private static final long serialVersionUID = 1L;  
  6.     @Resource  
  7.     PerinfoService perinfoService;  
  8.     @Resource  
  9.     PeccancyService peccancyService;  
  10.     @Action("/pecc")  
  11.      
  12. public String peccList() {  
  13.        try {  
  14.            HttpServletRequest re = ServletActionContext.getRequest();  
  15.            HttpServletResponse response = ServletActionContext.getResponse();  
  16.            response.setCharacterEncoding("UTF-8");  
  17.            PrintWriter out = response.getWriter();  
  18.            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-mm-dd");  
  19.            JSONArray jsonArray = new JSONArray();  
  20.            JSONObject jsonobj = new JSONObject();  
  21.            Map map = new HashMap();  
  22.            long all = perinfoService.getCount(map);  
  23.            String page = re.getParameter("page");  
  24.            String rows = re.getParameter("rows");  
  25.            // 当前页  
  26.            int intPage = Integer.parseInt((page == null || page == "0") ? "1" : page);  
  27.            // 每页显示条数  
  28.            int number = Integer.parseInt((rows == null || rows == "0") ? "10" : rows);  
  29.            // 每页的开始记录 第一页为1 第二页为number +1  
  30.            int start = (intPage - 1) * number;  
  31.            map.put("page", start);  
  32.            map.put("pageCount", number);  
  33.            List list = peccancyService.getList(map);  
  34.            for (Peccancy con : list) {  
  35.               jsonobj.put("id", con.getId());  
  36.                jsonobj.put("carNumber", con.getCarNumber());  
  37.               jsonobj.put("carPer", con.getCarPer());  
  38.               jsonobj.put("pTime", sdf.format(con.getPTime()));  
  39.               jsonobj.put("pPlace", con.getPPlace());  
  40.               jsonobj.put("pCase", con.getPCase());  
  41.               jsonobj.put("pOrg", con.getPOrg());  
  42.               jsonobj.put("pPer", con.getPPer());  
  43.               jsonArray.add(jsonobj);  
  44.            }  
  45.            Map json = new HashMap();  
  46.            json.put("total", all);// total键 存放总记录数,必须的  
  47.            json.put("rows", jsonArray);// rows键 存放每页记录 list  
  48.            jsonobj = JSONObject.fromObject(json);// 格式化result一定要是JSONObject  
  49.            out.print(jsonobj);  
  50.            out.flush();  
  51.            out.close();  
  52.        } catch (IOException e) {  
  53.            System.out.println(e);  
  54.        }  
  55.        return null;  
  56.     }  


Struts.xml 配置:

  1. <</span>package name="mydefault" extends="struts-default">  
  2.        <</span>global-results>  
  3.            <</span>result name="exception">/index.jsp</</span>result>  
  4.        </</span>global-results>  
  5.        <</span>global-exception-mappings>  
  6.            <</span>exception-mapping exception="java.lang.Exception"  
  7.               result="exception" />  
  8.        </</span>global-exception-mappings>  
  9.     </</span>package>  

版权声明:本文为博主原创文章,未经博主允许不得转载。

转载于:https://www.cnblogs.com/jamesf/p/4751723.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值