Merge pull request #1063 from layui/2.x

table: [新增] scrollPos 参数，用于设定重载数据时滚动条的位置状态

examples/table-test.html

@@ -153,7 +153,7 @@ layui.use(['table', 'dropdown'], function(){
       //,{type: 'numbers', fixed: 'left'}
       ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
       ,{field:'username', title:'用户名', width:120, edit: 'text', templet: '#usernameTpl'}
-      ,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text', templet: function(d){
+      ,{field:'email', minWidth: 230, title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, edit: 'text', templet: function(d){
         return '<em>'+ layui.util.escape(d.email) +'</em> <input type="checkbox" title="激活">'
       }}
       ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
@@ -249,7 +249,7 @@ layui.use(['table', 'dropdown'], function(){
             break;
             case 'reloadData':
               // 数据重载 - 参数重置
-              var isnt3 = table.reloadData('test', {
+              table.reloadData('test', {
                 where: {
                   abc: '123456'
                   //,test: '新的 test2'
@@ -257,10 +257,10 @@ layui.use(['table', 'dropdown'], function(){
                 }
                 ,height: 2000 // 测试无效参数
                 //,url: '404'
-                ,elem: null
+                //,elem: null
-                ,page: {curr: 5, limit: 20}
+                //,page: {curr: 5, limit: 20}
+                //,scrollPos: 'fixed' // 保持滚动条位置不变
               });
-              console.log(isnt3.config);
             break;
             case 'reloadData-deep':
               // 数据重载 - 参数叠加
@@ -402,6 +402,13 @@ layui.use(['table', 'dropdown'], function(){
         obj.update({
           email: value
         });
+        /*
+        // 上述 obj.update() 只是在前端临时更新数据视图
+        // 在实际业务中，当发送修改请求成功后，可再执行 reloadData 来重载数据
+        table.reloadData('test', {
+          scrollPos: 'fixed' // 保持滚动条位置不变
+        });
+        */
         layer.close(index);
       });
     }

src/modules/table.js

@@ -3,7 +3,7 @@
  * 表格组件
  */
 
-layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
+layui.define(['laytpl', 'laypage', 'form', 'util'], function(exports){
   "use strict";
   
   var $ = layui.$;
@@ -331,7 +331,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
 
     // 仅重载数据
     if(type === 'reloadData'){
-      return that.pullData(that.page); //请求数据
+       // 请求数据
+      return that.pullData(that.page, {
+        type: 'reloadData'
+      });
     }
     
     //高度铺满：full-差距值
@@ -799,17 +802,19 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
   Class.prototype.page = 1;
   
   // 获得数据
-  Class.prototype.pullData = function(curr){
+  Class.prototype.pullData = function(curr, opts){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,request = options.request
+    var request = options.request;
-    ,response = options.response
+    var response = options.response;
-    ,sort = function(){
+    var sort = function(){
       if(typeof options.initSort === 'object'){
         that.sort(options.initSort.field, options.initSort.type);
       }
     };
 
+    opts = opts || {};
+    
     that.startTime = new Date().getTime(); // 渲染开始时间
         
     if(options.url){ // Ajax请求
@@ -833,7 +838,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
         ,dataType: 'json'
         ,headers: options.headers || {}
         ,success: function(res){
-          //如果有数据解析的回调，则获得其返回的数据
+          // 若有数据解析的回调，则获得其返回的数据
           if(typeof options.parseData === 'function'){
             res = options.parseData(res) || res;
           }
@@ -845,11 +850,20 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
               ('返回的数据不符合规范，正确的成功状态码应为："'+ response.statusName +'": '+ response.statusCode)
             );
           } else {
-            that.renderData(res, curr, res[response.countName]), sort();
+            that.renderData({
-            options.time = (new Date().getTime() - that.startTime) + ' ms'; //耗时（接口请求+视图渲染）
+              res: res, 
+              curr: curr,
+              count: res[response.countName],
+              type: opts.type
+            }), sort();
+
+            //耗时（接口请求+视图渲染）
+            options.time = (new Date().getTime() - that.startTime) + ' ms';
           }
           that.setColsWidth();
-          typeof options.done === 'function' && options.done(res, curr, res[response.countName]);
+          typeof options.done === 'function' && options.done(
+            res, curr, res[response.countName]
+          );
         }
         ,error: function(e, msg){
           that.errorView('请求异常，错误提示：'+ msg);
@@ -872,9 +886,18 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
         res[response.totalRowName] = $.extend({}, options.totalRow);
       }
 
-      that.renderData(res, curr, res[response.countName]), sort();
+      that.renderData({
+        res: res, 
+        curr: curr,
+        count: res[response.countName],
+        type: opts.type
+      }), sort();
+
       that.setColsWidth();
-      typeof options.done === 'function' && options.done(res, curr, res[response.countName]);
+
+      typeof options.done === 'function' && options.done(
+        res, curr, res[response.countName]
+      );
     }
   };
   
@@ -886,17 +909,23 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
   };
 
   // 数据渲染
-  Class.prototype.renderData = function(res, curr, count, sort){
+  Class.prototype.renderData = function(opts){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,data = res[options.response.dataName] || [] //列表数据
+
-    ,totalRowData = res[options.response.totalRowName] //合计行数据
+    var res = opts.res;
-    ,trs = []
+    var curr = opts.curr;
-    ,trs_fixed = []
+    var count = opts.count;
-    ,trs_fixed_r = []
+    var sort = opts.sort;
+
+    var data = res[options.response.dataName] || []; //列表数据
+    var totalRowData = res[options.response.totalRowName]; //合计行数据
+    var trs = [];
+    var trs_fixed = [];
+    var trs_fixed_r = [];
     
     // 渲染视图
-    ,render = function(){ //后续性能提升的重点
+    var render = function(){ // 后续性能提升的重点
       // 同步表头父列的相关值
       options.HAS_SET_COLS_PATCH || that.setColsPatch();
       options.HAS_SET_COLS_PATCH = true;
@@ -1018,9 +1047,11 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
         trs_fixed_r.push('<tr data-index="'+ i1 +'">'+ tds_fixed_r.join('') + '</tr>');
       });
 
-      // 容器的滚动条位置复位
+      // 容器的滚动条位置
+      if(!(options.scrollPos === 'fixed' && opts.type === 'reloadData')){
         that.layBody.scrollTop(0);
-      if(options.resetScrollbar){
+      }
+      if(options.scrollPos === 'reset'){
         that.layBody.scrollLeft(0);
       }
 
@@ -1047,9 +1078,6 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
     
     table.cache[that.key] = data; //记录数据
 
-    //显示隐藏分页栏
-    //that.layPage[(count == 0 || (data.length === 0 && curr == 1)) ? 'addClass' : 'removeClass'](HIDE);
-
     //显示隐藏合计栏
     that.layTotal[data.length == 0 ? 'addClass' : 'removeClass'](HIDE_V);
 
@@ -1282,7 +1310,13 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
     }
     
     res[options.response.dataName] = thisData || data;
-    that.renderData(res, that.page, that.count, true);
+
+    that.renderData({
+      res: res, 
+      curr: that.page, 
+      count: that.count, 
+      sort: true
+    });
     
     if(formEvent){
       options.initSort = {
@@ -2291,7 +2325,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
     var dataParams = new RegExp('^('+ [
       'data', 'url', 'method', 'contentType', 
       'headers', 'where', 'page', 'limit',
-      'request', 'response', 'parseData'
+      'request', 'response', 'parseData',
+      'scrollPos'
     ].join('|') + ')$');
 
     layui.each(args[1], function (key, value) {