jquery easyui datagrid 加载已有得数据翻页 rownumber不变的解决办法

今天遇见了这么个问题

使用easyui的datagrid加载已经页面上已有的数据时,加载什么的问题,翻页数据也更新,但是rownumber始终是从1到10;

应该有不少同仁都遇见过这个问题,之前度娘始终没找到争取答案,不知道是没有还是度娘不给看,索性自己想了个解决办法;

正常情况下我们都是这么写的:

$("#infoTable").datagrid({ 

        title:"批量查询结果"

        rownumbers:true

        fitColumns:true

        pagination:true

        data:data.slice(0,10), 

        columns:[

          [ 

            {field:'field1', align:"center", title:"field1Name",width:150},

            {field:'field2', align:"center", title:"field2Name",width:150},

            {field:'field3', align:"center", title:"field3Name",width:150},

            {field:'field4', align:"center", title:"field4Name",width:100},

            {field:'field5', align:"center", title:"field5Name",width:100}

          ] 

        ] 

      });


pager = $("#deviceTable").datagrid("getPager"); 

      pager.pagination({

        total: deviceList.length, 

        onSelectPage:function (pageNo, pageSize) {

          var start = (pageNo - 1) * pageSize; 

          var end = start + pageSize; 

          $("#deviceTable").datagrid("loadData", pageList.slice(start, end)); 

          pager.pagination('refresh', { 

            total:deviceList.length, 

            pageNumber:pageNo 

          }); 

        } 

      });


为了现实row number,会增加一个rownumbers:true

如果每次翻页都是请求链接,就不会出现rownumber不变化的情况,但是如果是实用页面上已有的数据,翻页就会出现我所说的问题,

解决方案就是在这个onSelectPage里面做文章,用firebug可以看到row number的值都是放在class为 datagrid-cell-rownumber的div中

那么干脆就直接把这些div拿出来,然后自己算个序号出来,修改div中的值

代码如下

var rowNumbers = $('.datagrid-cell-rownumber');

          $(rowNumbers).each(function(index){

         var row = parseInt($(rowNumbers[index]).html()) + parseInt(start);

          $(rowNumbers[index]).html("");

          $(rowNumbers[index]).html(row);

          });


这样就可以完美解决这个问题,下面是完整的代码

var pager = $("#infoTable").datagrid("getPager"); 

      pager.pagination({ 

        total:data.length, 

        onSelectPage:function (pageNo, pageSize) { 

          var start = (pageNo - 1) * pageSize; 

          var end = start + pageSize; 

          $("#infoTable").datagrid("loadData", data.slice(start, end)); 

          var rowNumbers = $('.datagrid-cell-rownumber');

          $(rowNumbers).each(function(index){

         var row = parseInt($(rowNumbers[index]).html()) + parseInt(start);

          $(rowNumbers[index]).html("");

          $(rowNumbers[index]).html(row);

          });

          pager.pagination('refresh', { 

            total:data.length, 

            pageNumber:pageNo 

          }); 

        } 

      });

注意顺序,先loadData,再去修改row number的值,如果顺序反了,那么你会发现没生效,实际是生效的,只是修改的是前一页数据的序号,

到此问题解决,如果有更好办法的同学,请指教


你可能感兴趣的:(javascript)