2013-07-05 08:58:09 -07:00
|
|
|
<a href="http://ufologist.github.io/mobile-fixed-columns-table">mobile-fixed-columns-table</a>
|
2013-07-04 00:58:45 -07:00
|
|
|
====================
|
|
|
|
|
在移动平台上(Android/iOS...)可用的固定列/表头的表格组件
|
2013-07-04 08:58:06 -07:00
|
|
|
|
2013-07-04 08:59:53 -07:00
|
|
|
v1.0 2013-07-04
|
|
|
|
|
|
2013-07-05 08:39:27 -07:00
|
|
|
<img src="inspiration/img/preview-mobile.png" height="504" width="897" alt="Android 2.3.x/Android 4.x/iOS上组件的运行效果截图" />
|
2013-07-04 08:15:36 -07:00
|
|
|
|
|
|
|
|
测试过的手机
|
2013-07-04 08:24:28 -07:00
|
|
|
--------------------
|
2013-07-05 08:28:59 -07:00
|
|
|
* S5660 -- Android 2.3.4
|
|
|
|
|
* Note2(N7100) -- Android 4.1.1 / Android 4.1.2
|
|
|
|
|
* 小米1 -- Android 4.1.2
|
|
|
|
|
* GT-I8552 -- Android 4.1.2
|
|
|
|
|
* iPhone5 -- iOS 6.1.3
|
2013-07-04 08:15:36 -07:00
|
|
|
|
2013-07-05 23:11:54 -07:00
|
|
|
<a href="https://github.com/ufologist/mobile-fixed-columns-table/tree/android-demo">Android App Demo</a>
|
2013-07-05 23:10:07 -07:00
|
|
|
--------------------
|
|
|
|
|
基于phonegap来使用mobile-fixed-columns-table组件.
|
|
|
|
|
|
|
|
|
|
<img src="http://ufologist.github.io/mobile-fixed-columns-table/images/android-demo-snapshot.png" height="427" width="240" alt="android-demo-app" />
|
|
|
|
|
|
|
|
|
|
立刻扫描下面的二维码下载Android app体验吧!
|
|
|
|
|
|
|
|
|
|
<a href="https://github.com/ufologist/mobile-fixed-columns-table/raw/android-demo/bin/fixed-columns-table.apk"><img src="http://ufologist.github.io/mobile-fixed-columns-table/images/android-demo-qrcode.png" height="300" width="300" alt="android-demo-qrcode" /></a>
|
|
|
|
|
|
2013-07-05 08:58:09 -07:00
|
|
|
优势
|
|
|
|
|
--------------------
|
2013-07-05 09:03:28 -07:00
|
|
|
* 兼容Android 2.3.x, 弥补了FixedColumns的不足
|
|
|
|
|
* 表格可滚动区域会出现滚动条引导用户操作(iOS上需要tap后才出现), 弥补了FixedColumns的不足
|
2013-07-05 23:54:06 -07:00
|
|
|
* 没有为达到功能而改动FixedColumns及任何第3方依赖库的源码, 巧妙地借力用力, 因此可以使用FixedColumns原有的强大功能, 鱼和熊掌兼得...
|
2013-07-05 08:58:09 -07:00
|
|
|
|
2013-07-04 08:15:36 -07:00
|
|
|
使用方法
|
2013-07-04 08:24:28 -07:00
|
|
|
--------------------
|
|
|
|
|
```JavaScript
|
|
|
|
|
// 至少需要的参数
|
|
|
|
|
$('#table').mobileFixedColumnsTable({ // 请参考DataTables的配置
|
|
|
|
|
'sScrollY': '300px',
|
|
|
|
|
'sScrollX': '100%',
|
2013-07-04 08:58:06 -07:00
|
|
|
'bScrollCollapse': true
|
2013-07-04 08:24:28 -07:00
|
|
|
});
|
|
|
|
|
```
|
2013-07-04 08:15:36 -07:00
|
|
|
|
2013-07-04 08:24:28 -07:00
|
|
|
```JavaScript
|
|
|
|
|
// 更多的配置项
|
|
|
|
|
$('#table').mobileFixedColumnsTable({
|
|
|
|
|
'sScrollY': '300px',
|
|
|
|
|
'sScrollX': '100%',
|
|
|
|
|
'bScrollCollapse': true,
|
|
|
|
|
'oLanguage': {
|
|
|
|
|
'sInfo': ''
|
|
|
|
|
}
|
|
|
|
|
}, {
|
|
|
|
|
fixedColumnsOptions: { // 请参考DataTables的FixedColumns的配置
|
|
|
|
|
iLeftColumns: 2
|
|
|
|
|
},
|
|
|
|
|
scrollerOptions: { // 请参考iScroll的配置
|
|
|
|
|
onScrollMove: function() {
|
|
|
|
|
console.log(this, arguments);
|
2013-07-04 08:15:36 -07:00
|
|
|
}
|
2013-07-04 08:24:28 -07:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
```
|
2013-07-04 08:15:36 -07:00
|
|
|
|
2013-07-04 10:06:53 -07:00
|
|
|
示例
|
|
|
|
|
--------------------
|
2013-07-05 23:54:06 -07:00
|
|
|
* <a href="http://ufologist.github.io/mobile-fixed-columns-table/mobile-fixed-columns-table-bootstrap.html">mobile fixed columns table与bootstrap一起使用</a>
|
|
|
|
|
* <a href="http://ufologist.github.io/mobile-fixed-columns-table/mobile-fixed-columns-table-democss.html">mobile fixed columns table与DataTables的demo.css一起使用</a>
|
2013-10-09 02:40:26 -07:00
|
|
|
* <a href="http://ufologist.github.io/mobile-fixed-columns-table/mobile-fixed-columns-table-long-header.html">mobile fixed columns table 支持超长表头</a>
|
2013-07-04 10:06:53 -07:00
|
|
|
|
2013-07-04 08:15:36 -07:00
|
|
|
依赖
|
2013-07-04 08:58:06 -07:00
|
|
|
--------------------
|
2013-07-04 10:06:53 -07:00
|
|
|
1. <a href="http://jquery.com/">jQuery</a>
|
2013-07-04 09:22:51 -07:00
|
|
|
2. <a href="http://www.datatables.net">DataTables</a> & <a href="http://www.datatables.net/extras/fixedcolumns/">FixedColumns</a>
|
2013-07-04 08:15:36 -07:00
|
|
|
3. <a href="http://cubiq.org/iscroll-4">iScroll</a>
|
|
|
|
|
|
2013-07-04 09:12:27 -07:00
|
|
|
|
2013-07-05 23:54:06 -07:00
|
|
|
想了解更多信息请访问<a href="http://ufologist.github.io/mobile-fixed-columns-table">项目主页</a>
|