layui table的创建方式中有一种是通过js来渲染的,也是我们最熟悉的一种方式,那如果我们某一个列当中的数据不想通过后台数据传到所得,而是通过前端某个东西变化所得(例如说计算总价),应该怎么做呢?
layui table 允许我们使用自定义的模板来显示表格。
var tableIns = table.render({ //获取table的实例,后面用来做表格的刷新
elem: '#cartTable'
,url:'/Zmall/cartItemListServlet' //数据接口 //表格左上角的功能可以自定义 //表格右上方的三个按钮(导出、打印、筛选)不能编辑,只能选择是否显示
,limit:20 //每一行的最多可以显示的数量
,page:true //是否开启分页
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,cols: [
[
{type:'checkbox',width:120}
,{field:'id', width:200, title: '订单编号', sort: true}
,{field:'goods_name', width:375, title: '商品名称', id:"goods_name"}
,{field:'goods_price', width:200, title: '单价'} //注意这个edit:true,表示可以被编辑
,{field:'amount', width:180, title: '数量', edit:"true"}
,{field:'orderPrice',width:135 , title:'订单价格' ,templet: function(d){
return parseInt(d.goods_price)*parseInt(d.amount)}}
,{width:150 , title:'操作',toolbar:'#cellbarDemo'} //用toolbar引入操作按钮
]
]
,done: function(res, curr, count){
//如果是异步请求数据方式,res即为你接口返回的信息。
//如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
var total_price = 0;
for( i=0;i<count;i++){
total_price = parseInt(res.data[i].goods_price)*parseInt(res.data[i].amount)+total_price;
}
layer.msg(total_price);
$("#total_price").val(total_price);
//得到当前页码
console.log(curr);
//得到数据总量
// layer.msg(count);
}
});
我们注意到,最后一个field的值,订单价格,它就不是后台数据传到的,d来获取前面的json数据,然后单价乘以数量,得到这个订单总价的。
done function(res)可以帮助你在渲染表格的同时获取json数据的值,res.amount和res.price可以直接用来获取单价和数量的值,再通过for循环,遍历从0到count-1的所有data[i]的值,其实你就可以获取到所有的table里头某个单元格的数据了。