Jqgrid巨大的数据加载问题

时间:2011-06-02 07:21:34

标签: javascript java jquery jqgrid large-data

我正在对jqgrid做一些调查,一切正常,直到我加载包含大约1M行数据库的大数据,jqgrid现在不显示,当我将数据库的行缩小到100K时,数据将显示,但我仍然需要刷新页面几次,我缩小到10K,它工作正常,我不确定jqgrid的大小有限吗?此外,我可以将数据保存到由url返回的本地文件,并将其上传到服务器,并将url更改为文件,jqgrid可以显示它....

有人可以帮帮我吗?代码在这里:

    <script type="text/javascript"> 
            $.jgrid.no_legacy_api = true;
            $.jgrid.useJSON = true;
            $(function() {
                $("#griddisplay").jqGrid({
                    url:'<spring:url value="/charts/search/sub"/>',
                    datatype: 'json',
                    mtype:'POST',
                    colNames:['id','time_stamp', 'user_name','name','parameter'],
                    colModel:[
                        {name:'id',index:'id',width:160},
                        {name:'time_stamp',index:'time_stamp',width:160},
                        {name:'user_name',index:'user_name',width:160},
                        {name:'name',index:'name',width:160},
                        {name:'parameter',index:'parameter', width:100}
                    ],          
                    rowNum:100,
                    rowList:[100,50,25],
                    height: 500,
                    autowidth: true,
                    rownumbers: true,
                    pager: '#pager',
                    sortname: 'time_stamp',
                    gridview: true,
                    //viewrecords: true,
                    sortorder: "asc",
                    //emptyrecords: "<fmt:message key='msg.report.table.noreport' />",
                    loadonce: false,
                    //multiselect: false,
                    //loadComplete: function() {
                    //},
                    //caption: "Video Grid",
                    jsonReader: {
                        repeatitems: false,
                        id: "id",
                        root: "rows",
                        page: "page",
                        total: "total",
                        records: "records"
                    }
                });
            });
    </script>

json数据如下:

{
    "page": 1,
    "total": 2,
    "records": 2,
    "rows": [
        {
            "id": 9901,
            "time_stamp": "2011-04-12",
            "user_name": "abcd",
            "name": "somehere",
            "parameter": "harry"
        },
        {
            "id": 9902,
            "time_stamp": "2011-04-12",
            "user_name": "abcd",
            "name": "somehere",
            "parameter": "harry"
        }
    ]
}

从oracle数据库中获取所有计数

@Transactional(readOnly = true)
public long getLogbaksRecords() {
    String sql="select count(*) from test";
    long lbs=jdbcTemplate.queryForLong(sql);
    System.out.println("lbs="+lbs);
    return lbs;
}

获取数据

@Transactional(readOnly = true)
public List<LogbakBean> getLogbaks(String sidx, String sord, String rows,int p) {
    String sql="SELECT * FROM(SELECT A.*, ROWNUM RN FROM (SELECT time_stamp,parameter,user_name,name FROM test order by "+sidx+" "+sord+") A WHERE ROWNUM <= "+p*Integer.valueOf(rows)+")WHERE RN > "+(p-1)*Integer.valueOf(rows);
    System.out.println("query start"+sql);
    List<LogbakBean> lbs=jdbcTemplate.query(sql, new RowMapper<LogbakBean>(){

        public LogbakBean mapRow(ResultSet rs, int rowNum)
                throws SQLException {
            //LOG.info("getLogbaks===mapRow");
            LogbakBean lb=new LogbakBean();
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
            String time=sdf.format(new Date(Long.valueOf(rs.getString("time_stamp"))));
            lb.setTime_stamp(time);
            lb.setParameter(rs.getString("parameter"));
            lb.setUser_name(rs.getString("user_name"));
            lb.setName(rs.getString("name"));
            lb.setId(Long.valueOf(rs.getString("RN")));
            //System.out.println("curt rows="+rs.getString(5));
            //LOG.info("getLogbaks===mapRow===finish");
            return lb;
        }

    });
    System.out.println("query end");
    return lbs;
}

将数据返回到jqgrid

的Web控制器
@RequestMapping(value="/charts/search/sub",method=RequestMethod.GET)
public void searchResult(
        HttpServletRequest request,
        HttpServletResponse response,
        @RequestParam("page")String page,
        @RequestParam("rows")String rows,
        @RequestParam("sidx")String sidx,
        @RequestParam("sord")String sord) throws IOException{

    int p= Integer.parseInt(page);
    int t=Integer.parseInt(rows);
    System.out.println("p="+p+"t="+t);
    long logs=services.getLogbaksRecords();
    JSONObject obj=new JSONObject();
    obj.put("page", p);
    obj.put("total",logs%t==0?logs/t:logs/t+1);
    obj.put("records",logs);
    System.out.println("total records="+logs);
    JSONArray arr=new JSONArray();
    List<LogbakBean> lgb=services.getLogbaks(sidx,sord,rows,p);
    for(int i=0;i<lgb.size();i++){
        JSONObject o=new JSONObject();
        LogbakBean l=lgb.get(i);
        o.put("id", l.getId());
        o.put("time_stamp", l.getTime_stamp());
        o.put("user_name",l.getUser_name());
        o.put("name",l.getName());
        o.put("parameter",l.getParameter());
        arr.add(o);
        LOG.info(l.getTime_stamp()+","+l.getUser_name()+","+l.getName()+","+l.getParameter());
    }
    obj.put("rows", arr);
    response.setContentType("text/html;charset=utf-8");
    response.getWriter().write(obj.toString());
    //OutputFormat format = OutputFormat.createCompactFormat();
    //JsonWriter writer = new JsonWriter();
    //writer.
    //return obj;

}

2 个答案:

答案 0 :(得分:2)

我认为你不应该通过电汇传输这么多数据 jqGrid使用分页系统,允许您将数据块返回到网格。

基本上我要做的是实现数据服务器端的某种分页。

答案 1 :(得分:0)

最后,问题解决了,因为我在网格页面中使用了多选,多选与jqgrid冲突,请参阅我上面更新的代码。坦克Oleg和leftyX

冲突代码在

之下
$(function(){
    $.localise('ui-multiselect', {/*language: 'zh',*/ path: '<spring:url value="/resources/scripts/multiselect/" />'});
    $(".multiselect").multiselect();
});

当我删除代码时,问题解决了。谢谢大家。