如果你希望在 keyInfo
的中间添加按钮,可以在获取并处理数据时,将按钮的 HTML 代码插入到 keyInfo
中。可以通过将创建的 buttonContainer
添加到适当的位置来实现。假设你希望在处理 keyInfo
数据后,直接插入到该数据结构中,这里是一个示例如何进行操作。
下面是更新后的代码片段:
$.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 === 'customerInfo') {
// 客户信息展示
}
if (item.code === 'loan') { // 合同展示
// 创建按钮容器
const buttonContainer = document.createElement('div');
buttonContainer.innerHTML = `
<div class="button-container">
<button class="btn" data-action="action1">按钮1</button>
<button class="btn" data-action="action2">按钮2</button>
<button class="btn" data-action="action3">按钮3</button>
<button class="btn" data-action="action4">按钮4</button>
</div>
`;
// 在合适的位置插入按钮容器
const keyInfoSection = document.querySelector('#key-info-section'); // 假设这是你的 keyInfo 展示区域的选择器
keyInfoSection.appendChild(buttonContainer);
buttonContainer.querySelectorAll('.btn').forEach(button => {
button.addEventListener('click', function() {
const action = this.getAttribute('data-action');
switch (action) {
case 'action1':
console.log('按钮1被点击');
// 执行按钮1的操作
break;
case 'action2':
console.log('按钮2被点击');
// 执行按钮2的操作
break;
case 'action3':
console.log('按钮3被点击');
// 执行按钮3的操作
break;
case 'action4':
console.log('按钮4被点击');
// 执行按钮4的操作
break;
default:
break;
}
});
});
for (const loan of item.child) {
const Index = loan.path.split('.')[1];
let contractCode;
me.overDueInfoIndex[loan.path] = Index;
const child_OverduePeriod = loan.child.find(val => val.code === "overduePeriod");
const child_LoanCharacter = loan.child.find(val => val.code === "loanCharacter");
if (child_LoanCharacter && child_LoanCharacter.value === "Y") {
Object.assign(authMapLoan, { totalPaymentAmount: '' });
}
const child_ProductLine = loan.child.find(val => val.code === "productLine");
if (child_ProductLine && !child_ProductLine.ifVirtual) {
Object.assign(authMapLoan, { installmentLoanAmount: '' });
loan.child.reduce((arr, child) => {
if (child.code == 'overduePeriod' && child.title.includes("(") && child.title.includes(")")) {
child.title = child.title.replace('(', '(').replace(')', ')');
}
if (child.code == 'loanStatus' && child_OverduePeriod && child_OverduePeriod.value == '0') {
child.valueMap[child.value] += `(${lang('NO_DEBT')})`;
}
if (child.code === 'contractCode') {
contractCode = child.value;
me.loanPathContractCodes[loan.path] = contractCode; // 使用变量而不是重复调用值
}
if (child.code === 'allowCollNextPayment' && !child.value) return arr;
const DEFAULT_SHOW = !(child.code in authMapLoan);
const AUTH_SHOW = (child.code in authMapLoan) && canI(authMapLoan[child.code]);
if (DEFAULT_SHOW || AUTH_SHOW) {
arr.push(child);
}
return arr;
}, []);
}
}
}
}
me.keyInfo = jsonRes; // 不需要再 parse,因为已经是对象了。
me.form.initForm(jsonRes);
}
});
注意事项:
- 确保
#key-info-section
是实际存在于 DOM 中的元素 ID 或选择器。 - 根据需要调整样式,以确保新插入的内容与页面整体风格一致。
- 记得根据业务逻辑和需求调整其他功能。
内容由零声教学AI助手提供,问题来源于学员提问