EasyUI + JQuary + datagride 表格的真实分页与假分页

先明确一下两者的定义

easyui 表格中的分页给提供了两种方式

  • 假分页 :datagride在请求数据时将所有的数据一次请求过来,只是在前端进行展示时给人一种虚假的分页功能展示,外观看起来没有区别这种情形只是针对于数据量较小时使用,数据量大时还是推荐使用真分页
  • 真分页:前后端都进行了分页,也就是分页请求数据,在请求时只请求当页的N行数据,点击下一页时再重新请求第二页的数据

这里先上真实分页的代码,废话不多说了~

1.Html 页面展示表格书写

  1. data-options中是表格的初始化选项的给定,
  2. pageSize:20在这里是表格默认的每个页面中要显示多少行数据
  3. fit:true,是让表格填满整个的页面,适用于内联样式表中
 1 <table id="quaryDg" class="easyui-datagrid" style=""
 2        data-options="pagination:true,
 3                          pageSize:20,
 4                          fitColumns:true,
 5                          checkOnSelect:false,
 6                          fit:true,
 7                           singleSelect:true,
 8                          striped:true,
 9                          rownumbers:true,
10                          collapsible:false,
11                          toolbar:'#tb',
12                          ">
13         <thead>
14         <tr>
15             <!--        <th data-options="field:'dep1',checkbox:true"></th>-->
16             <th data-options="field:'',width:100,align:'left',align:'left', halign:'center'">第一列</th>
17             <th data-options="field:'',width:120,align:'right', halign:'center'">第二列</th>
18             <th data-options="field:'me',width:100,align:'left', halign:'center'">第一列</th>
19             <th data-options="field:'',width:160,align:'left', halign:'center'">第一列</th>
20             <th data-options="field:'',width:120,align:'right', halign:'center'">第一列</th>
21             <th data-options="field:'',width:110,align:'right', halign:'center'">第一列</th>
22             <th data-options="field:'',width:120,align:'left', halign:'center'">第一列</th>
23             <th data-options="field:'',width:120,align:'left', halign:'center'">第一列</th>
24             <th data-options="field:'',width:120,align:'left', halign:'center'">第一列</th>
25 <tr>
26         </thead>
27     </table>

2.接下来看重头戏,表格的真实分页加载及数据解析

function loadData(value) {
    $("#quaryDg").datagrid({
            loader: function (param, success, error) {
                var pageNumber = param.page;
                var pageSize = param.rows;
                var url = "http://www.baidu.com";
                var param1 = {
                    pageNo: pageNumber,
                    pageSize: pageSize,
                    key: value,
                   //等其他请求参数
                };
                //查询需要载入的数据
                $.ajax({
                    url: url,
                    type: "POST",
                    async: false,
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(param1),
                    dataType: "JSON",
                    timeout: 20000,
                    success: function (data) {
                   
                        var myData = data.data;
                        if (myData != null) {
                            reLodadDateGrid(myData);//解析数据到表格中
                        } else {
                            $('#quaryDg').datagrid('loadData', {total: 0, rows: []});

                        }
                        $("#quaryDg").datagrid("loaded");
                    },
                    error: function (data) {

                    }
                });

            },
            onClickCell: function (index, field, value) {
                var row = $('#quaryDg').datagrid('getRows')[index];//获取单元格所在行的所有的值
...
            }


        }
    )
}

对的,你没看错,上面就是用到的datagride中的两个参数方法实现的

  $("#quaryDg").datagrid({
            loader: function (param, success, error) {},
onClickCell: function (index, field, value) {})
其中loader方法是联网加载datagride数据使用,onClickCell是表格的单元格点击事件,这个是额外的功能了~
现在只是联网把数据请求出来了,是一堆的json串数据,那么我们怎么才进行解析呢?其实很简单了,接着看~
function reLodadDateGrid(myData) {
    var data = myData.list;
    var values = [];
    for (var i = 0; i < data.length; i++) {
        var a = {
            'sqfName': data[i].sqfName,
            'amountIncluding': data[i].amountIncluding,
            'isEgis': data[i].isEgis,
            'taxPaymentStatus': data[i].taxPaymentStatus,
            'isIssued': data[i].isIssued,
            'flowId': data[i].flowId,
            'invoiceTypeId': data[i].invoiceTypeId,
            'lssuingMethod': data[i].lssuingMethod
        };
        values.push(a);
    }
    $('#quaryDg').datagrid('loadData', {total: myData.total, rows: values});
}

上面的数据解析,前面的字段要和html中field属性值对应,也就是列的值,在这里相当于把表格数据从新进行了封装,各个列的顺序可以不一样但是键值对要一对一,也就是你要在每列的数据与每一列保持一致

 说了上面这么多,肯定有人会说,说好的datagride真分页呢?怎么给我讲起了数据解析,别急

其实代码中已经做好了分页的处理~

  1. 在loader方法请求时,我使用了下面两个param值,这个是datagride自动帮我们获取的当前页码和每一个页面的行数,我们只要把她作为请求参数传递给后台,让后台的小哥哥处理后只给我们这些数据就行了~后台分页也有的对应的框架~
     var pageNumber = param.page;
                    var pageSize = param.rows;
  2. 像上面配置了之后,你会发现,表格下面的总数和页码都不能点击下一页,总数也不对~别急是因为你需要告诉datagride总的数据有多少,不能说请求10条数据就是10条了,而是我有100条,只是请求了10条展示了,点击下一页时才能请求其他的啊
  3. $('#quaryDg').datagrid('loadData', {total: myData.total, rows: values});
  4. 就是这个,数据解析时,告诉总数total: myData.total,json数据串中肯定要告诉我们总数有多少的,不然鬼知道总数据有多少啊~其中后面的才是我们封装好的对应的数据这样就能完美解析了
  5. easyui的真实分页根本不需要我们手动处理,别想的那么复杂了,看了那么多博客真的走了不少误区~

 


一条完美的分割线

下面就是假分页,确实很简单,easyui 给的Demo里copy过来就能用,就是在数据解析时给一个数据分页过滤器即可

请参考官网

 

 1         function pagerFilter(data){
 2             if (typeof data.length == 'number' && typeof data.splice == 'function'){    // is array
 3                 data = {
 4                     total: data.length,
 5                     rows: data
 6                 }
 7             }
 8             var dg = $(this);
 9             var opts = dg.datagrid('options');
10             var pager = dg.datagrid('getPager');
11             pager.pagination({
12                 onSelectPage:function(pageNum, pageSize){
13                     opts.pageNumber = pageNum;
14                     opts.pageSize = pageSize;
15                     pager.pagination('refresh',{
16                         pageNumber:pageNum,
17                         pageSize:pageSize
18                     });
19                     dg.datagrid('loadData',data);
20                 }
21             });
22             if (!data.originalRows){
23                 data.originalRows = (data.rows);
24             }
25             var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
26             var end = start + parseInt(opts.pageSize);
27             data.rows = (data.originalRows.slice(start, end));
28             return data;
29         }
30         
31         $(function(){
32             $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
33         });

 

分页过滤器代码来源:http://www.jeasyui.net/demo/502.html

 

posted @ 2020-08-27 13:53  EugeniaGao  阅读(34)  评论(0编辑  收藏