基于DataTables, FixedColumns, iScroll实现在移动平台上(Android/iOS...)可用的固定列/表头的表格组件

2013-07-04 08:15:36 -07:00
parent ff93d27925
commit 944b9f4460
2 changed files with 193 additions and 2 deletions
--- a/datatables.mobile-fixed-columns-table.js
+++ b/datatables.mobile-fixed-columns-table.js
@@ -0,0 +1,123 @@
+/**
+ * 基于DataTables, FixedColumns, iScroll
+ * 实现在移动平台上可用的固定列/表头的表格组件
+ * 
+ * Released under MIT license
+ * 
+ * @auther Sun
+ * @version 1.0 2013-7-4
+ */
+(function($, root) {
+    function MobileFixedColumns(fixedColumns, scrollerOptions) {
+        var thiz = this;
+        this.fixedColumns = fixedColumns;
+
+        this.scrollerOptions = $.extend({}, scrollerOptions, MobileFixedColumns.overrideScrollerOptions);
+        var originOnScrollMove = this.scrollerOptions.onScrollMove;
+        this.scrollerOptions.onScrollMove = function(event) {
+            // 如果原本监听有onScrollMove, 则需要合并进来
+            // 这里的this是iScroll对象
+            originOnScrollMove && originOnScrollMove.call(this, event);
+            // 这里的thiz是MobileFixedColumns对象
+            MobileFixedColumns.defaultOnScrollMove.call(thiz, event);
+        };
+
+        this.initLeftFixedColumnScroller();
+        this.initRightFixedColumnScroller();
+        this.initFixedHeaderScroller();
+        this.disableFixedScroller();
+        this.initScrollBodyScroller();
+    }
+
+    MobileFixedColumns.prototype = {
+        initLeftFixedColumnScroller: function() {
+            // 即使iLeftColumns=0的情况下, 让表格左边没有固定列,
+            // 也会生成this.fixedColumns.dom.grid.left.body元素
+            // 因此这里的判断需要更加严格
+            if (this.fixedColumns.dom.grid.left.body && this.fixedColumns.dom.grid.left.body.children.length > 0) {
+                // 左边固定列的wrapper
+                var leftBodyWrapper = this.fixedColumns.dom.grid.left.body;
+                this.leftFixedColumnScroller = new iScroll(leftBodyWrapper, MobileFixedColumns.fixedScrollerOptions);
+            }
+        },
+        initRightFixedColumnScroller: function() {
+            if (this.fixedColumns.dom.grid.right.body) {
+                // 右边固定列的wrapper
+                var rightBodyWrapper = this.fixedColumns.dom.grid.right.body;
+                this.rightFixedColumnScroller = new iScroll(rightBodyWrapper, MobileFixedColumns.fixedScrollerOptions);
+            }
+        },
+        initFixedHeaderScroller: function() {
+            // 固定表头
+            // XXX FixedColumns 没有直接的属性可以获得dataTables_scrollHead, 只能查找DOM了
+            var scrollHeader = $(this.fixedColumns.dom.grid.dt).find('.dataTables_scrollHead')[0];
+            // 固定表头多余的padding-right造成iscroll拖动到最右边时表头出现空余
+            // 这个padding-right是为浏览器原生的垂直滚动条预览的空间
+            $(scrollHeader).find('.dataTables_scrollHeadInner').css('padding-right', 0);
+
+            this.fixedHeaderScroller = new iScroll(scrollHeader, MobileFixedColumns.fixedScrollerOptions);
+        },
+        initScrollBodyScroller: function() {
+            // 滚动区域
+            var scrollBody = this.fixedColumns.dom.scroller;
+            // 让iscroll的垂直滚动条处于正确的位置, 否则会超出到固定表头那里
+            $(scrollBody).css('position', 'relative');
+
+            this.scrollBodyScroller = new iScroll(scrollBody, this.scrollerOptions);
+        },
+        disableFixedScroller: function() { // 让用户不能主动操作固定列/表头的iScroll
+            this.leftFixedColumnScroller && this.leftFixedColumnScroller.disable();
+            this.rightFixedColumnScroller && this.rightFixedColumnScroller.disable();
+            this.fixedHeaderScroller.disable();
+        }
+    };
+
+    // 拖动表格的iscroll来联动固定区域的iscroll
+    MobileFixedColumns.defaultOnScrollMove = function(event) {
+        // body滚动条的y控制固定列的y
+        this.leftFixedColumnScroller && this.leftFixedColumnScroller.scrollTo(0, this.scrollBodyScroller.y);
+        this.rightFixedColumnScroller && this.rightFixedColumnScroller.scrollTo(0, this.scrollBodyScroller.y);
+
+        // body滚动条的x控制固定表头的x
+        // x和maxScrollX的值都是负值
+        var absX = Math.abs(this.scrollBodyScroller.x);
+        var absMaxScrollX = Math.abs(this.scrollBodyScroller.maxScrollX);
+        // 防止频繁操作固定表头造成表头抖动
+        if (absX < absMaxScrollX) {
+            this.fixedHeaderScroller.scrollTo(this.scrollBodyScroller.x, 0);
+        } else if (absX === absMaxScrollX) { // 如果大幅度拖动(将水平滚动条一拖到底)会造成固定表头跟不上节奏
+            this.fixedHeaderScroller.scrollTo(this.fixedHeaderScroller.maxScrollX, 0);
+        }
+    };
+
+    // 必须限制为这些值 不支持这些参数, 因此覆盖了用户传进来的这些参数
+    MobileFixedColumns.overrideScrollerOptions = {
+        bounce: false,
+        momentum: false,
+        wheelAction: 'none'
+    };
+    MobileFixedColumns.fixedScrollerOptions = {
+        bounce: false,
+        momentum: false,
+        vScrollbar: false, // 将iscroll生成的模拟scrollbar隐藏
+        hScrollbar: false
+    };
+
+    $.fn.mobileFixedColumnsTable = function(dataTablesOptions, options) {
+        var _dataTablesOptions = $.extend({}, dataTablesOptions, $.fn.mobileFixedColumnsTable.overrideDataTablesOptions);
+        var fixedColumnsOptions = options && options.fixedColumnsOptions;
+        var scrollerOptions = options && options.scrollerOptions;
+
+        var dataTable = this.dataTable(_dataTablesOptions);
+        var fixedColumns = new FixedColumns(dataTable, fixedColumnsOptions);
+        var mobileFixedColumns = new MobileFixedColumns(fixedColumns, scrollerOptions);
+
+        return this;
+    };
+    // DataTables的这些参数必须限制为这些值
+    $.fn.mobileFixedColumnsTable.overrideDataTablesOptions = {
+        bFilter: false,
+        bSort: false,
+        bPaginate: false
+    };
+})(jQuery, window);