基于DataTables, FixedColumns, iScroll实现在移动平台上(Android/iOS...)可用的固定列/表头的表格组件
This commit is contained in:
ufologist
72
README.md
72
README.md
@@ -1,4 +1,72 @@
|
|||||||
mobile-fixed-columns
|
mobile-fixed-columns-table
|
||||||
====================
|
====================
|
||||||
|
|
||||||
在移动平台上(Android/iOS...)可用的固定列/表头的表格组件
|
在移动平台上(Android/iOS...)可用的固定列/表头的表格组件
|
||||||
|
|
||||||
|
测试过的手机
|
||||||
|
====================
|
||||||
|
* 小米1
|
||||||
|
* Note2(N7100)
|
||||||
|
* GT-I8552
|
||||||
|
|
||||||
|
使用方法
|
||||||
|
====================
|
||||||
|
// 至少需要的参数
|
||||||
|
$('#table').mobileFixedColumnsTable({ // 请参考DataTables的配置
|
||||||
|
'sScrollY': '300px',
|
||||||
|
'sScrollX': '100%',
|
||||||
|
'bScrollCollapse': true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 更多的配置项
|
||||||
|
$('#table').mobileFixedColumnsTable({
|
||||||
|
'sScrollY': '300px',
|
||||||
|
'sScrollX': '100%',
|
||||||
|
'bScrollCollapse': true,
|
||||||
|
'oLanguage': {
|
||||||
|
'sInfo': ''
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
fixedColumnsOptions: { // 请参考DataTables的FixedColumns的配置
|
||||||
|
iLeftColumns: 2
|
||||||
|
},
|
||||||
|
scrollerOptions: { // 请参考iScroll的配置
|
||||||
|
onScrollMove: function() {
|
||||||
|
console.log(this, arguments);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
使用效果
|
||||||
|
====================
|
||||||
|
TODO
|
||||||
|
|
||||||
|
依赖
|
||||||
|
====================
|
||||||
|
1. <a href="">jQuery</a>
|
||||||
|
2. <a href="http://www.datatables.net">DataTables</a> && <a href="http://www.datatables.net/extras/fixedcolumns/">FixedColumns</a>
|
||||||
|
3. <a href="http://cubiq.org/iscroll-4">iScroll</a>
|
||||||
|
|
||||||
|
不是我想要造轮子
|
||||||
|
====================
|
||||||
|
为什么非要专门为移动平台包装这么一个组件?
|
||||||
|
主要是因为试过很多可以固定列/表头的表格组件, 在移动平台上使用都不理想
|
||||||
|
例如:
|
||||||
|
* <a href="https://github.com/markmalek/Fixed-Header-Table">Fixed-Header-Table</a>
|
||||||
|
* <a href="http://www.datatables.net/extras/fixedcolumns/">DataTables - FixedColumns</a>
|
||||||
|
* <a href="http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#locking-grid">Ext JS - Locking Grid</a>
|
||||||
|
|
||||||
|
其中最为理想的是FixedColumns, 但在*Android 2.3.x*上(极有可能2.3之前的版本也无法使用, 但未测试过)无法使用, 试过在Android 4.x上一切正常.
|
||||||
|
但还是有一点点小瑕疵. 由于FixedColumns的实现机制是利用原生的滚动条来控制固定列/表头, 在移动平台上不会出现这个原生的滚动条, 因此会给人不爽的感觉.
|
||||||
|
想着是否需要参考这些已经成熟的固定列/表头的HTML结构, 自己来实现一个类似的组件, 让其兼容*Android 2.3.x*?
|
||||||
|
|
||||||
|
深受启发
|
||||||
|
====================
|
||||||
|
某日看过某人随便写的一个可以在移动平台上使用的固定列/表头的组件, 虽是个半成品, 但深受启发, 原来使用iScroll来代替原生滚动条就行了, 就这么简单.
|
||||||
|
|
||||||
|
解析FixedColumns
|
||||||
|
====================
|
||||||
|
TODO
|
||||||
|
|
||||||
|
github pages demo
|
||||||
|
====================
|
||||||
|
TODO
|
||||||
123
datatables.mobile-fixed-columns-table.js
Normal file
123
datatables.mobile-fixed-columns-table.js
Normal file
@@ -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);
|
||||||
Reference in New Issue
Block a user