基于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...)可用的固定列/表头的表格组件
|
||||
|
||||
测试过的手机
|
||||
====================
|
||||
* 小米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