const tableData = {
template: {
status: '案件狀態(tài)',
date: '案件日期',
court: '法院',
caseType: '案件類型',
party: '當(dāng)事人',
party1: '當(dāng)事人1',
party2: '當(dāng)事人2',
party3: '當(dāng)事人3',
party4: '當(dāng)事人4',
party5: '當(dāng)事人5',
party6: '當(dāng)事人6',
party7: '當(dāng)事人7',
party8: '當(dāng)事人8',
},
data: [{
status: '審理中', date: '2018-02-21', court: '杭州拱墅區(qū)',
caseType: '民事',
party: '測(cè)試人',
party1: '測(cè)試人1',
party2: '測(cè)試人2',
party3: '測(cè)試人3',
party4: '測(cè)試人4',
party5: '測(cè)試人5',
party6: '測(cè)試人6',
party7: '測(cè)試人7',
party8: '測(cè)試人8',
}, {
status: '接受歸檔中', date: '2018-03-30', court: '杭州西湖區(qū)',
caseType: '刑事',
party: '測(cè)試人',
party1: '測(cè)試人1',
party2: '測(cè)試人2',
party3: '測(cè)試人3',
party4: '測(cè)試人4',
party5: '測(cè)試人5',
party6: '測(cè)試人6',
party7: '測(cè)試人7',
party8: '測(cè)試人8',
}],
};
/**
* 復(fù)雜的處理詳情展示表單的邏輯
*/
//定義詳情表單的具體容器
const divContainer = [];
if (tableData) {
// 獲取表結(jié)構(gòu)中的數(shù)據(jù)模版
const template = tableData.template;
// 獲取表結(jié)構(gòu)中的數(shù)據(jù)模版相對(duì)應(yīng)的數(shù)據(jù)
const datas = tableData.data;
// 如果表結(jié)構(gòu)和數(shù)據(jù)都不為空霉撵，才執(zhí)行內(nèi)部邏輯
if (template && datas) {
let j = 1; //初始化對(duì)象遍歷的次數(shù)
// 定義最外層table個(gè)數(shù)的循環(huán)，根據(jù)數(shù)組中有多少對(duì)象決定
for (let k = 0; k < datas.length; k++) {
let b1 = ''; //偶數(shù)情況下的表單tr即硼、td邏輯<td></td><td></td><td></td><td></td
let b2 = ''; //奇數(shù)情況下的表單tr煞聪、td邏輯 熙含，主要是為了考慮單數(shù)情況下漫雷，也要相加的可能性<td></td><td></td>
let b3 = ''; //奇數(shù)和偶數(shù)同時(shí)相加的處理后的邏輯 ，比如<tr><td></td><td></td><td></td><td></td></tr>或者<tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td></tr>
let data = ''; //定義自增長(zhǎng)的字符串圣拄，用戶短暫存儲(chǔ)表格結(jié)構(gòu)绘迁，一定要放在循環(huán)外
for (const i in template) {
if ({}.hasOwnProperty.call(template, i)) {//只有對(duì)象中存在這個(gè)屬性的時(shí)候合溺，才會(huì)進(jìn)入此邏輯
if (j % 2 === 0) { //這地方一定要注意，一次遍歷為偶數(shù)之后缀台，一定要清空data,使得進(jìn)入下一次循環(huán)
data += `<td key=${j}>${template[i]}</td><td key=${j}>${datas[k][i]}</td>`;
b1 += `<tr>${data}</tr>`;
data = [];
} else if (j % 2 !== 0) {
data += `<td key=${j}>${template[i]}</td><td key=${j}>${datas[k][i]}</td>`;
b2 = `<tr>${data}</tr>`; //用戶暫存奇數(shù)的數(shù)據(jù)
}
if (j % 2 === 0) {
b3 = b1; // 偶數(shù)的時(shí)候棠赛，不需要把b2的數(shù)據(jù)加上
} else {
b3 = b1 + b2; // 奇數(shù)和偶數(shù)時(shí)候的數(shù)據(jù)字符串和
}
j += 1;
}
}
j = 1;//這里很關(guān)鍵，因?yàn)檫@段代碼用戶初始化一組表格之后，進(jìn)入下一個(gè)表格的處理,主要是奇數(shù)偶數(shù)需要重置狀態(tài)
//最后睛约，處理表格頭部和身體的拼接工作
const title = `<tr class=${Style.caseNoTr}><td colSpan="4">案號(hào)：${caseNo}</td></tr>`;
tableTemp = (<table key={k}>
<tbody dangerouslySetInnerHTML={{ __html: title + b3 }} />
</table>);
divContainer[k] = tableTemp; // 這種寫法很討巧鼎俘，相當(dāng)于可以把幾個(gè)數(shù)據(jù)<table></table><table></table>類似這種的格式拼成一個(gè)大的dom結(jié)構(gòu)，具體可以打印試試
}
}
}
// 最后渲染到dom中
return (
<div className={Style.CaseContainer}>
{divContainer}
</div>
)
