请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: 活动 交友 discuz
查看: 258|回复: 0

HBuilder MUI 中添加表格样式

[复制链接]
  • TA的每日心情
    开心
    2019-4-9 11:43
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    357

    主题

    360

    帖子

    1681

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1681
    admin实名认证 发表于 2019-3-16 22:05:14 | 显示全部楼层 |阅读模式
    HBuilder MUI 中想要实现:添加固定列固定表头的表格,单元格根据宽度自适应,参考如下链接:https://www.douban.com/note/286673563/,还有他的github封装好的android的工程文件,链接如下:移动端固定列js工具,只要把这些文件放在html中,就可以实现固定前几列,然后水平和竖向滚动:
    1.导入js和css文件:
    20180130141127384.jpg

    2.接着在自己的html这么用:特别注意作者的表格,宽度不是自适应的,会有换行的出现,你可以在table上添加如下css样式:
    1. <table class="table browser-table " id="example"  style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
    复制代码
    完整html:
    1. <!DOCTYPE HTML>
    2. <html>

    3.         <head>
    4.                 <title>Mobile Fixed Columns Table example(bootstrap.css)</title>
    5.                 <meta charset="UTF-8" />
    6.                 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    7.                 <link href="../css/scroll/bootstrap.min.css" rel="stylesheet">
    8.                 <link href="../css/scroll/table_scroll.css" rel="stylesheet">

    9.                 <script src="../js/scroll/jquery.js"></script>
    10.                 <script src="../js/scroll/jquery.dataTables.js"></script>
    11.                 <script src="../js/scroll/FixedColumns.js"></script>
    12.                 <script src="../js/scroll/iscroll.js"></script>
    13.                 <script src="../js/scroll/datatables.mobile-fixed-columns-table.js"></script>
    14.                 <script>
    15.                         $(document).ready(function() {
    16.                                 var headerHeight = $('.header').outerHeight(true);
    17.                                 var theadHeight = $('#example thead').outerHeight(true);
    18.                                 var footerHeight = $('.footer').outerHeight(true);
    19.                                 var scrollY = $(window).height() - headerHeight - theadHeight - footerHeight;
    20.                                

    21.                                 $('#example').mobileFixedColumnsTable({   
    22.                                             'sScrollY': '450px',
    23.                                             'sScrollX': '100%',
    24.                                             'bScrollCollapse': true,
    25.                                             'oLanguage': {        
    26.                                                 'sInfo': ''   
    27.                                         }
    28.                                 }, {   
    29.                                         fixedColumnsOptions: { // 请参考DataTables的FixedColumns的配置
    30.                                                         
    31.                                                 iLeftColumns: 2
    32.                                         },
    33.                                             scrollerOptions: { // 请参考iScroll的配置
    34.                                                 onScrollMove: function() {            
    35.                                                         //console.log(this, arguments);        
    36.                                                 }   
    37.                                         }
    38.                                 });
    39.                         });
    40.                 </script>
    41.         </head>

    42.         <body>
    43.                
    44.                 <div class="table-responsive">
    45.                        
    46.                 <table class="table browser-table " id="example"  style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
    47.                         <thead>
    48.                                 <tr>
    49.                                         <th>品种</th>
    50.                                         <th>最新价</th>
    51.                                         <th>涨跌</th>
    52.                                         <th>买价</th>
    53.                                         <th>卖价</th>
    54.                                         <th>最高价</th>
    55.                                         <th>最低价</th>
    56.                                         <th>时间</th>
    57.                                 </tr>
    58.                         </thead>
    59.                         <tbody>
    60.                                 <tr class="gradeX">
    61.                                         <td>黄金9999</td>
    62.                                         <td>279.15</td>
    63.                                         <td>1.31</td>
    64.                                         <td>279.10</td>
    65.                                         <td>288.45</td>
    66.                                         <td>299.45</td>
    67.                                         <td>340.45</td>
    68.                                         <td>2018-01-30</td>
    69.                                 </tr>
    70.                                 <tr class="gradeC">
    71.                                         <td>黄金9998</td>
    72.                                         <td>279.15</td>
    73.                                         <td>1.31</td>
    74.                                         <td>279.10</td>
    75.                                         <td>288.45</td>
    76.                                         <td>299.45</td>
    77.                                         <td>340.45</td>
    78.                                         <td>2018-01-30</td>
    79.                                 </tr>
    80.                                 <tr class="gradeA">
    81.                                         <td>黄金9997</td>
    82.                                         <td>279.15</td>
    83.                                         <td>1.31</td>
    84.                                         <td>279.10</td>
    85.                                         <td>288.45</td>
    86.                                         <td>299.45</td>
    87.                                         <td>340.45</td>
    88.                                         <td>2018-01-30</td>
    89.                                 </tr>
    90.                                 <tr class="gradeA">
    91.                                         <td>黄金9995</td>
    92.                                         <td>279.15</td>
    93.                                         <td>1.31</td>
    94.                                         <td>279.10</td>
    95.                                         <td>288.45</td>
    96.                                         <td>299.45</td>
    97.                                         <td>340.45</td>
    98.                                         <td>2018-01-30</td>
    99.                                 </tr>
    100.                                 <tr class="gradeA">
    101.                                         <td>黄金9994</td>
    102.                                         <td>279.15</td>
    103.                                         <td>1.31</td>
    104.                                         <td>279.10</td>
    105.                                         <td>288.45</td>
    106.                                         <td>299.45</td>
    107.                                         <td>340.45</td>
    108.                                         <td>2018-01-30</td>
    109.                                 </tr>
    110.                                 <tr class="gradeA">
    111.                                         <td>黄金9993</td>
    112.                                         <td>279.15</td>
    113.                                         <td>1.31</td>
    114.                                         <td>279.10</td>
    115.                                         <td>288.45</td>
    116.                                         <td>299.45</td>
    117.                                         <td>340.45</td>
    118.                                         <td>2018-01-30</td>
    119.                                 </tr>
    120.                                 <tr class="gradeA">
    121.                                         <td>黄金9992</td>
    122.                                         <td>279.15</td>
    123.                                         <td>1.31</td>
    124.                                         <td>279.10</td>
    125.                                         <td>288.45</td>
    126.                                         <td>299.45</td>
    127.                                         <td>340.45</td>
    128.                                         <td>2018-01-30</td>
    129.                                 </tr>
    130.                                 <tr class="gradeA">
    131.                                         <td>黄金9991</td>
    132.                                         <td>279.15</td>
    133.                                         <td>1.31</td>
    134.                                         <td>279.10</td>
    135.                                         <td>288.45</td>
    136.                                         <td>299.45</td>
    137.                                         <td>340.45</td>
    138.                                         <td>2018-01-30</td>
    139.                                 </tr>
    140.                                 <tr class="gradeA">
    141.                                         <td>黄金9991</td>
    142.                                         <td>279.15</td>
    143.                                         <td>1.31</td>
    144.                                         <td>279.10</td>
    145.                                         <td>288.45</td>
    146.                                         <td>299.45</td>
    147.                                         <td>340.45</td>
    148.                                         <td>2018-01-30</td>
    149.                                 </tr>
    150.                                 <tr class="gradeA">
    151.                                         <td>黄金9990</td>
    152.                                         <td>279.15</td>
    153.                                         <td>1.31</td>
    154.                                         <td>279.10</td>
    155.                                         <td>288.45</td>
    156.                                         <td>299.45</td>
    157.                                         <td>340.45</td>
    158.                                         <td>2018-01-30</td>
    159.                                 </tr>
    160.                                 <tr class="gradeA">
    161.                                         <td>青铜9999</td>
    162.                                         <td>279.15</td>
    163.                                         <td>1.31</td>
    164.                                         <td>279.10</td>
    165.                                         <td>288.45</td>
    166.                                         <td>299.45</td>
    167.                                         <td>340.45</td>
    168.                                         <td>2018-01-30</td>
    169.                                 </tr>
    170.                                 <tr class="gradeA">
    171.                                         <td>青铜9998</td>
    172.                                         <td>279.15</td>
    173.                                         <td>1.31</td>
    174.                                         <td>279.10</td>
    175.                                         <td>288.45</td>
    176.                                         <td>299.45</td>
    177.                                         <td>340.45</td>
    178.                                         <td>2018-01-30</td>
    179.                                 </tr>
    180.                                 <tr class="gradeA">
    181.                                         <td>青铜9997</td>
    182.                                         <td>279.15</td>
    183.                                         <td>1.31</td>
    184.                                         <td>279.10</td>
    185.                                         <td>288.45</td>
    186.                                         <td>299.45</td>
    187.                                         <td>340.45</td>
    188.                                         <td>2018-01-30</td>
    189.                                 </tr>
    190.                                 <tr class="gradeA">
    191.                                         <td>青铜9994</td>
    192.                                         <td>279.15</td>
    193.                                         <td>1.31</td>
    194.                                         <td>279.10</td>
    195.                                         <td>288.45</td>
    196.                                         <td>299.45</td>
    197.                                         <td>340.45</td>
    198.                                         <td>2018-01-30</td>
    199.                                 </tr>
    200.                                 <tr class="gradeA">
    201.                                         <td>青铜9994</td>
    202.                                         <td>279.15</td>
    203.                                         <td>1.31</td>
    204.                                         <td>279.10</td>
    205.                                         <td>288.45</td>
    206.                                         <td>299.45</td>
    207.                                         <td>340.45</td>
    208.                                         <td>2018-01-30</td>
    209.                                 </tr>
    210.                                 <tr class="gradeA">
    211.                                         <td>青铜9994</td>
    212.                                         <td>279.15</td>
    213.                                         <td>1.31</td>
    214.                                         <td>279.10</td>
    215.                                         <td>288.45</td>
    216.                                         <td>299.45</td>
    217.                                         <td>340.45</td>
    218.                                         <td>2018-01-30</td>
    219.                                 </tr>
    220.                                 <tr class="gradeA">
    221.                                         <td>青铜9994</td>
    222.                                         <td>279.15</td>
    223.                                         <td>1.31</td>
    224.                                         <td>279.10</td>
    225.                                         <td>288.45</td>
    226.                                         <td>299.45</td>
    227.                                         <td>340.45</td>
    228.                                         <td>2018-01-30</td>
    229.                                 </tr>
    230.                                 <tr class="gradeA">
    231.                                         <td>青铜9994</td>
    232.                                         <td>279.15</td>
    233.                                         <td>1.31</td>
    234.                                         <td>279.10</td>
    235.                                         <td>288.45</td>
    236.                                         <td>299.45</td>
    237.                                         <td>340.45</td>
    238.                                         <td>2018-01-30</td>
    239.                                 </tr>



    240.                         </tbody>
    241.                 </table>
    242.                
    243.                 </div>
    244.                
    245.         </body>

    246. </html>
    复制代码
    css文件内容table_scroll.css:
    1. /* 为了滚动的表格使用样式:
    2. * 覆盖bootstrap的样式, 默认为100%, 会造成水平滚动条出不来 */
    3.                        
    4.                         table {
    5.                                 max-width: none;
    6.                         }
    7.                        
    8.                         .table {
    9.                                 margin-bottom: 0;
    10.                         }
    11.                        
    12.                         .table td {
    13.                                 border-top-style: dotted;
    14.                         }
    15.                        
    16.                         .browser-table tr.odd.gradeA {
    17.                                 background-color: #ddffdd;
    18.                         }
    19.                        
    20.                         .browser-table tr.even.gradeA {
    21.                                 background-color: #eeffee;
    22.                         }
    23.                        
    24.                         .browser-table tr.odd.gradeC {
    25.                                 background-color: #ddddff;
    26.                         }
    27.                        
    28.                         .browser-table tr.even.gradeC {
    29.                                 background-color: #eeeeff;
    30.                         }
    31.                        
    32.                         .browser-table tr.odd.gradeX {
    33.                                 background-color: #ffdddd;
    34.                         }
    35.                        
    36.                         .browser-table tr.even.gradeX {
    37.                                 background-color: #ffeeee;
    38.                         }
    39.                        
    40.                         .browser-table tr.odd.gradeU {
    41.                                 background-color: #ddd;
    42.                         }
    43.                        
    44.                         .browser-table tr.even.gradeU {
    45.                                 background-color: #eee;
    46.                         }
    47.                        
    48.                         .DTFC_LeftHeadWrapper,
    49.                         .DTFC_LeftBodyWrapper {
    50.                                 border-right: 0px solid #000;/*1px的话就有横线*/
    51.                         }
    52.                        
    53.                         .DTFC_LeftHeadWrapper,
    54.                         .dataTables_scrollHeadInner {
    55.                                 border-bottom: 0px solid #000;/*1px的话就有横线*/
    56.                         }
    57.                        
    58.                         .header {
    59.                                 text-align: center;
    60.                                 background: #0290da;
    61.                                 margin: 0;
    62.                         }
    63.                        
    64.                         .footer {
    65.                                 position: absolute;
    66.                                 bottom: 2px;
    67.                                 right: 2px;
    68.                                 width: 100%;
    69.                                 text-align: right;
    70.                                 background: #f5f5f5;
    71.                                 padding: 10px 0;
    72.                         }
    73.                        
    74.                         .name {
    75.                                 text-decoration: none;
    76.                                 color: #333;
    77.                         }
    复制代码
    这样之后,就可以实现移动端的水平和竖向滚动,并且固定前几列功能,效果还不错,再次感谢作者,关于刷新数据的,还在研究中:
    20180130141442374.jpg

    maomivip@mail.com
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|赢创志诚旗下网站 ( 鲁ICP备19000917号 )

    GMT+8, 2019-4-21 22:52 , Processed in 0.065893 second(s), 24 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表