Nemo

Nemo 关注TA

路漫漫其修远兮,吾将上下而求索。

Nemo

Nemo

关注TA

路漫漫其修远兮,吾将上下而求索。

  •  普罗旺斯
  • 负责帅就完事了
  • 写了1,493,291字

该文章投稿至Nemo社区   Js、Css、Html  板块 复制链接


关于EasyUI Datagrid真分页和假分页

发布于 2016/01/08 09:20 4,790浏览 8回复 6,779

        最近项目上,自作主张的用了EasyUI的Datagrid,本机测试发现,EasyUI的这个组件在大量数据(测试数据大约20W)的时候,在IE下的表现差得令人发指,在非IE的情况下,效率倒是还可以接受。然而不幸的是,目标浏览器正是IE5-9,再加上目标数据量预计不会小于350W...

       正题开始,下面贴上最开始编写的代码:
<table id="dg" title="" style="width:100%;height:500px; "></table>
<script>
function getData1(objStr){
    var obj = eval(objStr);
    var rows = [];
    if(typeof(obj.length) == "undefined" || obj.length == 0){
        init();
    }else{
        for(var i=0; i<obj.length; i++){
            rows.push({
                a0110: obj[i].a0110,
                a0112: obj[i].a0112,
                a0113: obj[i].a0113,
                a0114: obj[i].a0114,
                a0115: obj[i].a0115,
                a0116: obj[i].a0116,
                a0117: obj[i].a0117,
                a0109: obj[i].a0109
            });
        }
     }
return rows;
}
function pagerFilter(data){
  if (typeof data.length == 'number' && typeof data.splice == 'function'){
   data = {
     total: data.length,
     rows: data
    }
  }
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
function init(){
 var mheight = $(window).height()*0.99-72;
 $('#dg').datagrid({ 
    width: ($(window).width()*0.99), 
    height:mheight,
    fit : false,
    striped : true,
    rownumbers : true,
    fitColumns : true,
    pagination : true, // 分页栏关闭
    singleSelect : true,
    pageSize : 50,// 分页大小
 pageList : [ 50, 100, 150, 300, 500],
columns:[[
      {field:'a0112',title:'NAME',width:'20%',align:'left',halign:'center'}, 
      {field:'a0113',title:'TIME',width:'10%',align:'center',halign:'center'}, 
      {field:'a0114',title:'CODE',width:'10%',align:'center',halign:'center'}, 
      {field:'a0115',title:'TYPE',width:'18%',align:'center',halign:'center'}, 
      {field:'a0116',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'}, 
      {field:'a0117',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'}, 
      {field:'a0119',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'}, 
      {field:'a0110',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'}
  ]]
}
);
}
$(function(){
   $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData1({}));
  init();
});

<script>


==============================================

这种方式是实现的形式是:

    通过一次完全加载所有结果集到前端,通过前端的EasyUI组件来实现分页。

这种方式我称为假分页或者是前端分页。

在数据量小的时候,这种实现是可行的。然而到了大数据量的时候,前端开始出现响应缓慢,在IE8下加载20W数据,甚至让浏览器卡住几分钟无响应。

  显然这种方式并不能解决我的需求。所以反反复复翻了EasyUI中提供的示例,终于找见了所谓的真分页实现方式。

==============================================


  下面贴出修改后的源码:

    <table id="dg" title="" style="width:100%;height:500px; "></table>
<script>
function init(){
var mheight = $(window).height()*0.99-72;
$('#dg').datagrid({
    url:"${ctx}/mSearch.do?m=search&type=notSearch",
    method:'get',
    width: ($(window).width()*0.99), 
    height:mheight,
    pageSize : 50,// 分页大小
    pageList : [  50, 100, 150, 300, 500],
    fit : false,
    loadMsg: '数据加载中,请稍候...',
    rownumbers : true,
    fitColumns : false,
    pagination : true, // 分页栏关闭
    singleSelect:true,
    columns:[[
       {field:'a0112',title:'NAME',width:'20%',align:'left',halign:'center'}, 
       {field:'a0113',title:'TIME',width:'10%',align:'center',halign:'center'}, 
       {field:'a0114',title:'CODE',width:'10%',align:'center',halign:'center'}, 
       {field:'a0115',title:'TYPE',width:'18%',align:'center',halign:'center'}, 
       {field:'a0116',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'}, 
       {field:'a0117',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'}, 
       {field:'a0119',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'}, 
       {field:'a0110',title:'NUMBER OF ...',width:'10%',align:'center',halign:'center'}
    ]]
  }
);
}

$(function(){
init();
});

function searchByGin(url){
$('#dg').datagrid({ 
url:url,
method:'POST'
});

var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid
pager.pagination({
});
}
</script>

=============================================

这种分页方式的实现是这样的:

     每次当当前页发生改变的时候,会向后台发两个参数:page和rows,page是当前页的标识,rows是每页显示的记录数的标识,通过这两个参数,便可以轻松的在后台实现分页功能。

=============================================

先记录如上,待日后备用~


点赞(0)

上一个文章:Ant build.xml打包JAR

下一个文章:各种IE兼容问题

点了个评