微信小程序:好看的表格样式

一个在微信小程序中创建表格的demo

 

效果图

 

最后做出来大概就是这个样子的，先看下设计图：（画的真好看）

设计图

然后再看下数据返回的格式：

数据返回格式

这数据...o.0...

分析数据得知，后台返回的数据远比设计图上描绘的复杂，内容是不固定的，而且需要显示一周的排班

个人思路：用scroll-view来做，整个表格按 -行- 分为4大块：排班、上午、下午、晚上。

    ①先将从今天开始往后7天的日期放到数组中，作为第一大块的数据源

    ②循环遍历数据，找出所有排班在上午的时间，然后分别放到7个数组中（因为可能有多个数据，还是需要用数组存放）

    ③同理得出下午和晚上的数据

 

1、第一步：更改数据格式，将数据处理之后变为如下形式：

第一大块：weekArray:

        存放从今天开始 -> 7天后的数据在数组中

第二、三、四大块：sch_listData:

数据更改后

 

为什么要把数据变成这样呢？总感觉这样的方法有点傻，但又想不到别的办法，所以先这样吧，麻烦是麻烦了点，幸好最后的效果还不错。

wxml:

<!--  科室排班表 -->

<scroll-view scroll-x="true" class='scrollClass'>
  <view class='table'>
    <view class='table_header'>
      <view class="th" style='width:130rpx;background-color:white'>
        <view class='centerclass cell_label'>排班</view>
      </view>
      <block wx:for="{
  {dateArray}}">
        <view class='th'>
          <view class="cell_label centerclass">{
  {item.weekName}}</view>
          <view class="cell_date_label centerclass">{
  {item.date_text}}</view>
        </view>
      </block>
    </view>



    <block wx:for="{
  {sch_listData}}">
      <view class='table_main'>
        <!--上午下午晚上  -->
        <view class='td' style='width:130rpx;background-color:white;'>
          <view class="cell_label centerclass">{
  {item.time_title}}</view>
        </view>

        <!-- 周一 -->
        <view class='td'>
          <block wx:for="{
  {item.Mon_text}}" wx:for-item="trade" wx:for-index="ind">
            <view class='{
  {item.Mon_text.length-1==ind? "table_Text_last_class":"table_Text_class"}}' bindtap='clickDoctor'  data-docname='{
  {trade.docName}}' data-timeperiod='{
  {trade.timePeriod}}'
              data-dayOfWeek='{
  {trade.dayOfWeek}}'>{
  {trade.docName}}</view>
          </block>
        </view>

        <!--周二  -->
        <view class='td'>
          <block wx:for="{
  {item.Tues_text}}" wx:for-item="trade" wx:for-index="ind">
            <view class='{
  {item.Tues_text.length-1==ind? "table_Text_last_class":"table_Text_class"}}' bindtap='clickDoctor'  data-docname='{
  {trade.docName}}' data-timeperiod='{
  {trade.timePeriod}}'
              data-dayOfWeek='{
  {trade.dayOfWeek}}'>{
  {trade.docName}}</view>
          </block>
        </view>
        <!--周三  -->
        <view class='td'>
          <block wx:for="{
  {item.Wed_text}}" wx:for-item="trade" wx:for-index="ind">
            <view class='{
  {item.Wed_text.length-1==ind? "table_Text_last_class":"table_Text_class"}}' bindtap='clickDoctor'  data-docname='{
  {trade.docName}}' data-timeperiod='{
  {trade.timePeriod}}'
              data-dayOfWeek='{
  {trade.dayOfWeek}}'>{
  {trade.docName}}</view>

          </block>
        </view>
        <!--周四  -->
        <view class='td'>
          <block wx:for="{
  {item.Thur_text}}" wx:for-item="trade" wx:for-index="ind">
            <view class='{
  {item.Thur_text.length-1==ind? "table_Text_last_class":"table_Text_class"}}' bindtap='clickDoctor'  data-docname='{
  {trade.docName}}' data-timeperiod='{
  {trade.timePeriod}}'
              data-dayOfWeek='{
  {trade.dayOfWeek}}'>{
  {trade.docName}}</view>
          </block>
        </view>
        <!--周五  -->
        <view class='td'>
          <block wx:for="{
  {item.Fri_text}}" wx:for-item="trade" wx:for-index="ind">
            <view class='{
  {item.Fri_text.length-1==ind? "table_Text_last_class":"table_Text_class"}}' bindtap='clickDoctor'  data-docname='{
  {trade.docName}}' data-timeperiod='{
  {trade.timePeriod}}'
              data-dayOfWeek='{
  {trade.dayOfWeek}}'>{
  {trade.docName}}</view>
          </block>
        </view>
        <!--周六  -->
        <view class='td'>
          <block wx:for="{
  {item.Sat_text}}" wx:for-item="trade" wx:for-index="ind">
            <view class='{
  {item.Sat_text.length-1==ind? "table_Text_last_class":"table_Text_class"}}' bindtap='clickDoctor'  data-docname='{
  {trade.docName}}' data-timeperiod='{
  {trade.timePeriod}}'
              data-dayOfWeek='{
  {trade.dayOfWeek}}'>{
  {trade.docName}}</view>
          </block>
        </view>
        <!-- 周日 -->
        <view class='td'>
          <block wx:for="{
  {item.Sun_text}}" wx:for-item="trade" wx:for-index="ind">
            <view class='{
  {item.Sun_text.length-1==ind? "table_Text_last_class"