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

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

效果如下：

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

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) {//第一行时先初始化为0sum[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

非常感谢!

希望可以帮到大家！

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

微信小程序合并单元格
https://blog.csdn.net/weixin_34355715/article/details/87962188
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...
基于微信小程序的用户列表点赞功能
代码地址如下: http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4. ...
怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 [微 ...
【愚公系列】2022年09月微信小程序-微信小程序实现网页一键登录功能
文章目录前言一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法二.相关第三方包源码前言如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...
微信小程序集成实时音视频通话功能
微信小程序集成实时音视频通话功能背景在项目的开发当中,很多时候,我们会有音频.视频通话的需求,但是一般都不会自己来写,所以我们就需要借助第三方来实现.尤其是这次的项目开发当中,需要在微信小程序当中 ...
微信小程序网悦新闻开发--功能介绍（一）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...

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

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

最新文章

热门文章