Layui表格数据值相加（一）

开发工具与关键技术： Visual Studio    done回调
作者：黎凤焕
撰写时间：2019年  7 月 19 日

 Layui表格列数据（金额数据列的数据自动相加）相加，将总金额赋值给input框，input框里的到的是合计后的金额，将计算出来的总金额数赋值给总金额的文本框。合计的金额不传到数据库上，只是显示在页面上，将计算出来的总金额赋值给总金额的input框，将值传到数据库里。

done: function (res, curr, count) {
var defray = 0, SelfPay = 0, bookkeepingSum = 0, TotalSum = 0;
for (var i = 0; i < res.data.length; i++) {
defray += parseFloat(res.data[i].defray).toFixed(2);//应交
SelfPay += parseFloat(res.data[i].SelfPay).toFixed(2);// 自付
bookkeepingSum += parseFloat(res.data[i].bookkeepingSum).toFixed(2);//记账
TotalSum += parseFloat(res.data[i].TotalSum).toFixed(2);//总金额
}
$("#searchdefray").val(defray.toString().substring(1, defray.toString().length)); $("#searchSelfPay").val(SelfPay.toString().substring(1,SelfPay.toString().length)); $("#searchbookkeepingSum").val(bookkeepingSum.toString().substring(1,bookkeepingSum.toString().length));
$("#searchTotalSum").val(TotalSum.toString().substring(1, TotalSum.toString().length));
}

done - 数据渲染完的回调：无论是异步请求数据，还是直接赋值数据，都会触发该回调。你可以利用该回调做一些表格以外元素的渲染。把该方法写在页面载入事件里面，一般写在layui表格渲染表头的下面。
该方法使用后，效果图如下图，这方法适合layui表格里面只有一条数据计算的表格进行赋值给input框，当layui表格里面的数据条数比较多的时候，input框里面的值不是经过计算出来的总数，因为该方法的写法是字符串类型，而不是int类型，要实现input框为总数，就要将字符串类型转换为int类型，才会出现计算后的数在input框里面。如果没有转换，表头对应的input框里的数据会根据layui表格里面有多少条数据的值不断增加，而不是计算出它的总条数的个数赋值给对应值的input框。

 这个方法存在一个bug，并不是我想要的效果，只要计算出来的总数，而不是把有的信息条数数据都赋值给input框，该方法只能用在当数据条数为1的时候，才会正确，才是想要的效果。

这就是Layui表格数据值相加，效果是多条数据相加，input框里只显示总数的，见Layui表格数据值相加（二）。

Layui表格数据值相加（一）相关推荐

layui根据条件显示列_templet渲染layui表格数据的三种方式
layui前端框架是我一直在使用,也很好用. 今天记录一下,templet渲染layui表格数据的三种方式. 第一种:直接渲染(对于表格数据样式要求不高) 直接在动态表格字段声明,添加templet属 ...
layui 表格内容写temple函数_templet渲染layui表格数据的三种方式
layui前端框架是我一直在使用,也很好用. 今天记录一下,templet渲染layui表格数据的三种方式. 第一种:直接渲染(对于表格数据样式要求不高) 直接在动态表格字段声明,添加templet属 ...
layui表格更改一列数据_【WEB前端开辟】layui表格数据变动的一种处理方式
表格数据更改,平常包括几个内容:新增.修正.删除.挪动,开辟中常常会面对的一个题目就是更改以后怎样将数据同步到节点上,一向以来个人的提议照样应用表格重载,不管是url情势的照样data情势的实际都是须 ...
Layui表格数据重载(不请求servlet)
在做项目过程中,可能会有这样的需求,从一张表格勾选数据返回到另外一张表格显示,而通常实现这个功能有两种方式,一种是获取勾选数据的Id请求后台来返回数据,另外一种就是直接在页面获取,不需要请求后台.这里 ...
layui进行分页处理，后端返回数据没有count字段，需要单独获取再添加到数据中，再进行项渲染，另有layui表格数据增删改查前后端交互
整体效果图如下: (1)分页前端界面处理 (2)分页后端的数据处理具体代码如下: 前端界面代码:包括分页,增删改查,刷新(搜索功能还没做,后端是java代码) <!DOCTYPE html&g ...
Layui表格数据的计算
在我们日常学习中以及项目的开发中,不少会用到数据表格将数据进行统计维护信息,而其中用的最多的并且也比较快捷方便的放法便是layui数据表格的渲染,重载等等.... 而部分项目有时会涉及到一个数量的问题 ...
layui穿梭框和layui表格数据交互
<style>/*树形菜单--分割线内文字*/.diseasea{position: relative;left:180px; /*右*/color: #005cbf}/*表单信息--分割 ...
layui表格数据重载（根据条件查询，监听按钮事件）
html代码 <div class="wrap-container clearfix"><div class="column-content-detai ...
layui表格数据重载根据不同的条件点击事件怎么实现？
就是根据红色标记的条件来重载表格数据,还没有点击上面红色标记的条件默认是本周,这里可以加载出来,但点击其他的时候就没有数据出现了.需要重新加载框架才有数据显示.请问大神这问题如何解决? 默认的时候是显 ...

Layui表格数据值相加（一）

Layui表格数据值相加（一）相关推荐

最新文章

热门文章