要在现有的 JavaScript 代码中实现一个包含标签页 (tabs) 的功能，以展示已结清、停催和诉讼的合同，您需要首先对数据进行分类，然后根据选中的标签来过滤显示的数据。
以下是如何修改现有代码以支持这个功能的一种方式：
- 添加 Tabs 的 HTML: 您需要在 HTML 中定义标签页的结构（这部分假设您已经有了）。例如：
<div>
<button onclick="showTab('settled')">已结清</button>
<button onclick="showTab('suspended')">停催</button>
<button onclick="showTab('litigation')">诉讼</button>
</div>
<div id="contractContent"></div>
- 增加 JavaScript 代码以处理 Tabs 切换:
在 JavaScript 中，您可以创建一个函数 showTab 来根据选择的标签展示不同的数据。更新 AJAX 请求成功后的逻辑，如下所示：
let contractsData = {
settled: [],
suspended: [],
litigation: []
};
function showTab(tabName) {
const contractContentDiv = document.getElementById("contractContent");
contractContentDiv.innerHTML = ''; // 清空当前内容
let dataToDisplay;
switch (tabName) {
case 'settled':
dataToDisplay = contractsData.settled;
break;
case 'suspended':
dataToDisplay = contractsData.suspended;
break;
case 'litigation':
dataToDisplay = contractsData.litigation;
break;
default:
return; // 不处理未知选项
}
// 渲染数据到页面
dataToDisplay.forEach(contract => {
const contractDiv = document.createElement("div");
contractDiv.innerText = JSON.stringify(contract); // 替换为实际渲染逻辑
contractContentDiv.appendChild(contractDiv);
});
}
$.ajax({
method: "POST",
url: "../d/detail/keyInfo",
data: { custId: custId },
success: function(result) {
var jsonRes = JSON.parse(result);
for (const item of jsonRes) {
if (item.code === 'loan') {
for (const loan of item.child) {
const child_LoanStatus = loan.child.find(val => val.code === "loanStatus");
const child_OverduePeriod = loan.child.find(val => val.code === "overduePeriod");
if (child_LoanStatus && child_OverduePeriod) {
// 根据贷款状态将合同分类
if (child_LoanStatus.value === "settled") {
contractsData.settled.push(loan);
} else if (child_LoanStatus.value === "suspended") {
contractsData.suspended.push(loan);
} else if (child_LoanStatus.value === "litigation") {
contractsData.litigation.push(loan);
}
}
// ...其他原有逻辑...
}
}
}
me.keyInfo = jsonRes;
me.form.initForm(jsonRes);
// 默认显示已结清 tab 的内容
showTab('settled');
}
});
注意事项：
- 确保合适地初始化和更新
contractsData对象。 - 根据实际需求替换数据渲染逻辑。
- 您可能需要额外处理样式和交互，以确保用户体验良好。
- 上述代码片段未考虑潜在错误处理，例如网络请求失败等情况，请根据实际情况补充相应的错误处理逻辑。
内容由零声教学AI助手提供，问题来源于学员提问
