jqgrid示例【详细】

1.在action类中主要代码是：

private int page;
 private int rp;
 private int total;
 private int records;
 private String sortname;
 private String sortorder;
 private List<Row> rows;
 private LogService logService;

                private List<StatisticsData> statisticsDataList;

 

public String accessCount(){
          StringBuilder condition1 = new StringBuilder();
          condition1.append(" select count(s.name) from

                                            StatisticsData as s where s.name='访问量' ");
          String con1 = null;
          if(condition1 != null && !condition1.equals("")){
                   con1 = condition1.toString();
          }
         records = statisticsDataService.getRecordNum(con1);
         total = (int)Math.ceil((double)records/rp);
         page = page>total && total>0?total:(page>0?page:1);
         StringBuilder condition2 = new StringBuilder();
         condition2.append("from StatisticsData  as s  where s.name='访问量' ");

         if(!fromDate.equals("")){
                 condition2.append(" and s.date >='"+fromDate+"'");
          }
          if(!toDate.equals("")){
                  condition2.append(" and s.date <= '"+toDate+"'");
          }

         String con2 = null;
         if(condition2 != null && !condition2.equals("")){
                    con2 = condition2.toString();
          }
         statisticsDataList = statisticsDataService.findByPage(con2, (page-1)*rp, rp); 
         return "statistics_access_count_success";
 }

 

2.在struts-bussiness.xml文件中主要配置的代码时：

<action name="accessStatisticsAction" class="accessStatisticsAction">
   <result name="to_access_statistics_success">web/jsp/log/accessStatisticsLog.jsp</result>
   <result name="statistics_access_count_success" type="json">
    <param name="includeProperties">
            statisticsDataList\[\d+\]\.date,
            statisticsDataList\[\d+\]\.name,
            statisticsDataList\[\d+\]\.count,
            total,page,records
    </param>
   </result>
  </action>

 

3.jsp页面文件：

<div id="table_access_count" style="margin-top:20px;">
      <table id="jqTable_accessCount"></table>
      <div id="jqPage4"></div>
 </div>

 

4.js代码

function showAccessCount(fromValue,toValue){  
  $("#jqTable_accessCount").jqGrid({
   url:"accessStatisticsAction!accessCount.html",
   width:1098,
   datatype:"json",
   mtype:"POST",
   height:465,
   colNames:['日期','功能','访问次数'],
   colModel:[
             {name:'date',index:'date',align:'center',sortable:true},
             {name:'name',index:'name',align:'center',sortable:true},
             {name:'count',index:'count',align:'center',sortable:true}

             //其中：name是列的名称
             ],
   rowNum:15,
   rowList:[15,20,30,50],
   pager:'#jqPage4',
   sortname:'date',
   viewrecords:true,
   sortorder:'desc',
   caption:"访问量",
   postData:{"fromDate":fromValue,"toDate":toValue},
   jsonReader:{
    root:"statisticsDataList",
    page:"page",
    repeatitems:false
   },
   prmNames:{
    page:"page",
    rows:"rp",
    sort:"sortname",
    order:"sortorder",
    search:"search",
    id:"id",
    subgridid:"id",
    npage:null,
    totalrows:"totalrows"
   },
   loadError:function(xhr, status,error){
    alert("加载数据时发生异常");
   }//这一段是当底层方法中数据加载异常时，弹出提示信息
  }).navGrid('#jqPage4',{edit:false,add:false,del:false,search:false});
 }

 

 

 

5. 参数详解

/*在colModel中name:设值为json数据的key名称，也就是bean的对应的属性名称*/ 
 var showActionGrid = function(){
  var select = $("#select").val();
  $("#jqTable_byAction").jqGrid({
   url:"accessStatisticsAction!statisticsLog.html",   /*获取数据的地址*/
   width:1098,    /*如果设置，则按照此设置为主；如果没有设置，则按照colModel中定义的宽度计算*/
   datatype:"json",   /*从服务器端返回的数据类型，默认是xml*/
   mtype:"POST",    /*ajax提交方式，POST或GET，默认是GET*/
   height:465,    /*表格的高度，可以是数值、像素、百分比*/
   colNames:['Action','描述','访问次数'], /*列显示名称，是一个数组对象*/
   colModel:[    /*常用到的属性，name：显示的名称；index:传到服务器端用来排序用的列的名称；
        sortable:是否可以排序*/
             {name:'action',index:'action',width:340,align:'center'},
             {name:'description',index:'description',width:340,align:'center'},
             {name:'count',index:'count',width:340,align:'center'}
             ],
   rowNum:15,    /*在grid上显示的记录条数，这个参数是要被传递到后台*/
   rowList:[15,20,30,50],   /*一个下拉框，用来改变显示记录数，当选择时，会覆盖选择的rowNum传递到后台*/
   pager:'#jqPage',   /*定义翻页用的导航栏，必须是有效的html元素，翻页工具栏，可以放在html页面任何位置*/
   sortname:'count',   /*默认的排序列，可以使列名称，可以使一个数字，会被提交到后台*/
   viewrecords:true,   /*定义是否需要显示记录总数*/
   sortorder:'desc',   /*排序顺序，升序或者降序*/
   postData:{"select":select},  /*此数组内容直接赋值到url上，参数类型：{name:value}*/
   caption:"访问统计",   /*表格名称*/
   jsonReader:{    /*描述json数据格式的下数组*/
    root:"",   /*json中代表实际模型的入口*/
    page:"page",   /*json中代表当前页码的数据*/
    repeatitems:false  /*如果为false，则jqGrid在解析json时，会根据name来搜索对应得数据源；            而所使用的name，是来自于colModel中name设定*/
   },
   prmNames:{
    page:"page",   /*表示请求的页码的参数名称*/
    rows:"rp",   /*表示请求行数的参数名称*/
    sort:"sortname",  /*表示用于排序的列名的参数名称*/
    order:"sortorder",  /*表示采用的排序方式的参数名称*/
    search:"search",  /*表示是否是搜索请求的参数名称*/
    id:"id",   /*表示挡在编辑数据模块中发送数据时，操作的名称*/
    subgridid:"id",   /**/
    npage:null,
    totalrows:"totalrows"  /*表示需从Server得到总共多少行数据的参数名称，*/
   }
   
   
   
  }).navGrid('#jqPage',{edit:false,add:false,del:false,search:false});
 };

 

 

 

 7.jqGrid用到的js文件

<!-- jqGrid使用的css文件 -->
<link rel="stylesheet" type="text/css" href="web/css/jqgrid/jquery-ui-1.8.21.custom.css" />
<link rel="stylesheet" type="text/css" href="web/css/jqgrid/ui.jqgrid.css" />
<!-- jqGrid使用的js文件 -->
<script type="text/javascript" src="web/js/jqgrid/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="web/js/jqgrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="web/js/jquery/ui/jquery-ui-1.8.17.custom.js"></script>