要在你的 JavaScript 代码中添加按钮并根据选择来展示不同的合同状态（如 “所有”、”已结清”、”停催” 和 “诉讼”），可以通过以下步骤进行：
- 创建按钮：在没有 HTML 的情况下，可以使用 JavaScript 动态生成按钮。
- 添加事件监听器：为每个按钮添加点击事件，以便根据选择过滤合同信息。
- 更新显示逻辑：根据选定的按钮，筛选并显示相应的合同数据。
下面是一个可能的实现示例：
$.ajax({
method: "POST",
url: "../d/detail/keyInfo",
data: { custId: custId },
success: function(result) {
var jsonRes = JSON.parse(result);
// 按钮状态管理
const buttonContainer = document.createElement('div');
const buttons = ['all', 'settled', 'stopCollection', 'lawsuit'];
buttons.forEach(button => {
const btn = document.createElement('button');
btn.textContent = button === 'all' ? '所有' : button === 'settled' ? '已结清' : button === 'stopCollection' ? '停催' : '诉讼';
btn.onclick = () => filterLoans(button);
buttonContainer.appendChild(btn);
});
document.body.appendChild(buttonContainer); // 将按钮添加到页面上
// 初始显示全部贷款信息
let loansToShow = [];
for (const item of jsonRes) {
if (item.code === 'loan') {
for (const loan of item.child) {
loansToShow.push(loan); // 收集所有贷款信息
}
}
}
displayLoans(loansToShow); // 初次显示所有贷款
function filterLoans(status) {
let filteredLoans;
if (status === 'all') {
filteredLoans = loansToShow; // 显示所有贷款
} else {
filteredLoans = loansToShow.filter(loan => {
switch (status) {
case 'settled':
return loan.status === '已结清'; // 根据实际情况调整字段和条件
case 'stopCollection':
return loan.status === '停催';
case 'lawsuit':
return loan.status === '诉讼';
default:
return true;
}
});
}
displayLoans(filteredLoans); // 更新显示的信息
}
function displayLoans(loans) {
// 这里可以处理如何展示贷款数据，假设有个函数来更新UI
console.log("Displaying Loans:", loans);
me.form.initForm(loans); // 假设这个方法会处理UI更新，替换原有的loans数据为当前需要展示的数据
}
}
});
注意事项：
- CSS样式：上述代码动态创建了按钮，需要你自行设置样式以符合设计需求。
- 过滤条件：确保
loan.status或其他相关属性与你的数据结构一致，根据实际情况进行调整。 - displayLoans 函数：需要实现具体的 UI 更新逻辑，确保将筛选后的结果正确渲染到界面上。此处用
console.log代替展示逻辑，你可以替换成适合你的应用的方法。
内容由零声教学AI助手提供，问题来源于学员提问
