html table 原生表格数据处理方法
数据接口返回的数据格式如下：
{
"errcode":"1",
"list":[
{
"stone_name":"KX008",
"customer_name":"KKF",
"customer_id":"306569681005711360",
"child":[
{
"gold_name":"18K白",
"child":[
{
"production_quantity":"0",
"quantity_shipped":"0",
"create_order_time":"2019-08-07",
"order_quantity":"1",
"order_num":"DD190806001",
"shipments_time":"",
"order_info":""
},
{
"production_quantity":"0",
"quantity_shipped":"0",
"create_order_time":"2019-08-07",
"order_quantity":"1",
"order_num":"DD190806002",
"shipments_time":"",
"order_info":""
}
]
}
]
},
{
"stone_name":"KX001",
"customer_name":"宝利金",
"customer_id":"293613507226636288",
"child":[
{
"gold_name":"18K白",
"child":[
{
"production_quantity":"2",
"quantity_shipped":"0",
"create_order_time":"2019-08-02",
"order_quantity":"2",
"order_num":"DD190802001",
"shipments_time":"",
"order_info":"手寸17-23中间多"
},
{
"production_quantity":"100",
"quantity_shipped":"0",
"create_order_time":"2019-08-03",
"order_quantity":"100",
"order_num":"DD190803001",
"shipments_time":"",
"order_info":""
}
]
}
]
},
{
"stone_name":"KX007",
"customer_name":"赛菲尔",
"customer_id":"305891049107099648",
"child":[
{
"gold_name":"18K红白分色",
"child":[
{
"production_quantity":"100",
"quantity_shipped":"0",
"create_order_time":"2019-08-07",
"order_quantity":"100",
"order_num":"DD190807001",
"shipments_time":"",
"order_info":""
}
]
}
]
},
{
"stone_name":"KX012",
"customer_name":"金六福吉祥",
"customer_id":"317482253271699456",
"child":[
{
"gold_name":"18K红白分色",
"child":[
{
"production_quantity":"72",
"quantity_shipped":"0",
"create_order_time":"2019-08-03",
"order_quantity":"72",
"order_num":"DD190803002",
"shipments_time":"",
"order_info":"手寸19-22"
}
]
}
]
},
{
"stone_name":"KX009",
"customer_name":"金麒",
"customer_id":"307300237871943680",
"child":[
{
"gold_name":"18K红",
"child":[
{
"production_quantity":"40",
"quantity_shipped":"0",
"create_order_time":"2019-08-05",
"order_quantity":"40",
"order_num":"DD190805001",
"shipments_time":"",
"order_info":"不要钉珠"
}
]
}
]
}
]
} 页面显示效果
js调用方法
let a = tableData(res.list, [{ name: 'gold_name', value: '小计' },{ name: 'customer_name', value: '合计' },{ name: 'customer_name', value: '总计',totalData:true}]);res.list 为接口返回的数据
// 数据报表数据处理方法
//arrs 传需要合计的数据的key值 例如[{ name: 'gold_name', value: '小计' },{ name: 'customer_name', value: '合计' },{ name: 'customer_name', value: '总计' }]
//相同的 name 没有办法做处理
export function tableData(list, arrs = [], parent = {}) {
let newList = []
if (Array.isArray(list) && list.length > 0) {
list.map(item => {
let key_of_arr = Object.keys(item).filter(el => Array.isArray(item[el]));//获取当前对象中value为数组的key值
let key_of_string = Object.keys(item).filter(el => !Array.isArray(item[el]));//获取当前对象中value不为数组的key值
let bol = key_of_arr.length > 0 ? key_of_arr.every(el => el && item[el].length > 0) : false;//判断当前对象中是否存在数组 true为存在 false为不存在
let data = {};
let parent_keys = Object.keys(parent).filter(el => !Array.isArray(parent[el]));//获取从上级数据中出入的不为数组的key值
if (parent_keys.length > 0) {//如果存在key 将key保存
parent_keys.forEach(el => { data[el] =parent[el] });
}
if (!bol) {//如果当前对象中没有数据组或数组的长度小于1 则将数据拼接并放入返回的数据中
newList.push(Object.assign(data, item))
} else {
if (key_of_string.length > 0) {//将前一层的数据合并到当前数据层中
key_of_string.forEach(el => { data[el] =item[el]});
}
let arr = tableData(item[key_of_arr[0]],arrs, data)
newList = [...newList, ...arr]//合并数组
if(arrs.length>0){
let num=key_of_string.reduce((prev, curr) =>arrs.findIndex(el=>el.name==curr&&!el.totalData)>-1?prev+=1:prev,0)//判断合并数组中在当前数据中出现的次数
if(num>0){
let totalData=JSON.parse(JSON.stringify(data));
key_of_string.forEach(el=>{//给当前数据赋值
let index=arrs.findIndex(els=>els.name==el)
if(index>=0){
for(let i=0;iObject.keys(el).every(els=>data[els]?data[els]==el[els]:(arrs.findIndex(i=>i.name==els)>-1?arrs.find(i=>i.name==els).value!=el[els]:true)))
Object.keys(total[0]).forEach(el=>{//算合计
if(!isNaN(Number(total[0][el]))){
if(el.indexOf('num')>-1){
totalData[el]=total.map(els=>els[el]).reduce((prev, curr) => Number(prev || 0) + Number(curr || 0))
} else{
totalData[el]=total.map(els=>els[el]).reduce((prev, curr) => Number(prev || 0) + Number(curr || 0)).toFixed(5)
}
}
})
newList.push(totalData)
}
}
}
})
if(JSON.stringify(parent)=='{}'&&arrs.length>0&&arrs[arrs.length-1].totalData){//判断最后一条有没有所有数据汇总
let last=newList.filter(el=>arrs.every(els=>els.totalData?(el[els.name]!=els.value):(el[els.name]==els.value)))
let lastData={};
Object.keys(last[0]).forEach(el=>{
if(!isNaN(Number(last[0][el]))&&el!=arrs[arrs.length-1].name){
if(el.indexOf('num')>-1){
lastData[el]=last.map(els=>els[el]).reduce((prev, curr) => Number(prev || 0) + Number(curr || 0))
} else{
lastData[el]=last.map(els=>els[el]).reduce((prev, curr) => Number(prev || 0) + Number(curr || 0)).toFixed(5)
}
}else if(el==arrs[arrs.length-1].name){
lastData[el]=arrs[arrs.length-1].value;
}else{
lastData[el]=last[0][el]
}
})
newList.push(lastData)
}
}
return newList;
}