0
点赞
收藏
分享

微信扫一扫

JS(Vue)数据处理实战(二)


有如下需求:

  • 将数据通过表格展示。

数据:

testStatusObj: {
BIOS: {
Passed: 16,
Failed: 2,
NotRun: 61,
InProgress: 3,
Nocheckpoint: 1
},
BMC: {
NotRun: 30,
Passed: 27,
InProgress: 1,
Nocheckpoint: 1
},
OTHER: {
Failed: 2,
InProgress: 2,
Nocheckpoint: 19,
NotRun: 75,
Passed: 26
},
RMC: {
Passed: 25,
NotRun: 48
},
SV: {
Blocked: 1,
Failed: 1,
InProgress: 1,
Nocheckpoint: 3,
NotRun: 101,
Passed: 15
}
}

表格:

JS(Vue)数据处理实战(二)_js

规则如下:


  • All:所有數量(包括No checkpoin、Not Run等)
  • Plan:等於 All
  • Complete:Passed 加上 Failed 的數量
  • CompleteRate:Complete 除以 Plan 取整
  • Block:Blocked 的數量
  • 其他 Rate 类似 CompleteRate 都是以Plan为分母
  • 数据中没有的为 0

使用 html + js 编写模板:

新建一个 ​topic2.html​, 将下列代码复制到其中:

<html>
<head>
<title>js数据处理实战(二)</title>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>Test module</th>
<th>All</th>
<th>Plan</th>
<th>Complete</th>
<th>CompleteRate</th>
<th>Pass</th>
<th>PassRate</th>
<th>Fail</th>
<th>FailRate</th>
<th>Block</th>
<th>BlockRate</th>
</tr>
</table>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
// 已有数据
let testStatusObj = {
BIOS: {
Passed: 16,
Failed: 2,
NotRun: 61,
InProgress: 3,
Nocheckpoint: 1
},
BMC: {
NotRun: 30,
Passed: 27,
InProgress: 1,
Nocheckpoint: 1
},
OTHER: {
Failed: 2,
InProgress: 2,
Nocheckpoint: 19,
NotRun: 75,
Passed: 26
},
RMC: {
Passed: 25,
NotRun: 48
},
SV: {
Blocked: 1,
Failed: 1,
InProgress: 1,
Nocheckpoint: 3,
NotRun: 101,
Passed: 15
}
}
disposeData()
function disposeData () {
const dataList = []
// 写处理数据的代码

// 添加到页面
addTable(dataList)
}

function DeepClone (obj) {
if (obj === null || typeof obj !== 'object') return obj
let cpObj = obj instanceof Array ? [] : {}
for (let key in obj) cpObj[key] = DeepClone(obj[key])
return cpObj
}

function addTable (list) {
list.forEach(item => {
addLine(item.testModule, item.all, item.plan, item.complete, item.completeRate, item.pass, item.passRate, item.fail, item.failRate, item.block, item.blockRate)
});
}

function addLine (testModule, all, plan, complete, completeRate, pass, passRate, fail, failRate, block, blockRate) {
let tr = document.createElement("tr");
let str = '<td>' + testModule + '</td>';
str += '<td>' + all + '</td>';
str += '<td>' + plan + '</td>';
str += '<td>' + complete + '</td>';
str += '<td>' + completeRate + '</td>';
str += '<td>' + pass + '</td>';
str += '<td>' + passRate + '</td>';
str += '<td>' + fail + '</td>';
str += '<td>' + failRate + '</td>';
str += '<td>' + block + '</td>';
str += '<td>' + blockRate + '</td>';
tr.innerHTML = str;
let tab = document.getElementById("table");
tab.appendChild(tr);
}

</script>
</body>
</html>

Vue模式编写

在线编辑地址:​​点我​​



举报

相关推荐

0 条评论