微信小程序实现单元格编辑功能，并支持计算合计

最近有个客户想做下单系统，要求像电脑端一样 ，实现在多维的录入功能，客户主要是人事鞋批发的，要求颜色、尺码对应订购数量，可以计算横向和纵向合计，话不多说，直接上代码。

效果如下：

如上图，除了第一行和最后一行，第一列和最后一列，其它列都是可以输入的，且输入后自动计算合计。

WXML代码如下：

<scroll-view scroll-x style="width: 100%" class="table">
  <block wx:for="{{tables}}" wx:key="key" wx:for-item="table" wx:for-index="table_index">
    <view class="tr gray" wx:if="{{table_index== 0||table_index== tables.length-1}}">
      <view class="td" wx:for="{{table}}" wx:key="key" wx:item="item" data-id="{{table_index}}">{{item}}</view>
    </view>
    <view class="tr" wx:else>
      <view class="td" wx:for="{{table}}" wx:key="key" wx:item="item"  data-id="{{table_index}}">
        <view wx:if="{{index==0||index==table.length-1}}">
          {{item}}
        </view>
        <view wx:else>
          <input class="newInput" bindblur="calSum" data-id="{{index}}" data-idd="{{table_index}}" value="{{item}}"></input>
        </view>
      </view>
    </view>
  </block>
</scroll-view>

WSS代码如下：

.table {
  border: 0px solid darkgray;
  font-size: 12px;
}

.tr {
  display: flex;
  width: 2700rpx;
  align-items: center;
}

.td {
  width: 150rpx;
  height: 2rem;
  justify-content: center;
  text-align: center;
  flex: flex;
  align-items: center;
  word-wrap: break-word;
  flex-shrink: 0;
  line-height: 2rem;
  border: 1rpx solid #fff000;
}

.gray {
  background: #e6fe3f;
}

.newInput {
  line-height: 2rem;
  height: 2rem;
  width: 100%;
}

 

JS代码如下：

// pages/user/UserInfo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tables: [
      ['颜色|尺码', '红色', '绿色', '蓝色', '合计'],
      ['35', '', '', '', ''],
      ['36', '', '', '', ''],
      ['37', '', '', '', ''],
      ['38', '', '', '', ''],
      ['39', '', '', '', ''],
      ['合计', '', '', '', ''],
    ]
  },
  calSum(e) {
    var id = e.target.dataset.id;
    var idd = e.target.dataset.idd;
    var value = e.detail.value;


    let ta = this.data.tables;
    ta[idd][id] = value;
    var sum = new Array(ta[0].length - 1);

    for (let i = 1; i < ta.length - 1; i++) {
      var len = 0;

      for (let j = 1; j < ta[i].length - 1; j++) {
        if (i == 1) {//第一行时先初始化为0
          sum[j] = 0;
        }
        if (ta[i][j] != '') {
          //累加单元格值
          len += parseInt(ta[i][j]);
          //累加第i列合计
          sum[j] += parseInt(ta[i][j]);
        } else {
          sum[j] += 0;
        }
      }
      console.log(len);
      ta[i][ta[i].length - 1] = len;
      if (i == 1) {
        sum[ta[i].length - 1] = 0;
      }

      sum[ta[i].length - 1] += len;
    }

    for (let i = 1; i < sum.length; i++) {
      ta[ta.length - 1][i] = sum[i];
    }

    this.setData({
      tables: ta
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

参考：https://blog.csdn.net/kormondor/article/details/76922167

非常感谢!

希望可以帮到大家！