如果你希望在 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助手提供,问题来源于学员提问 


        
        
        
        
        
        
        
        
        
                
                
                
                
                
                
                