ZBLOG

$.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...

要在 JavaScript 代码中为合同部分增加一个切换的 Tabs 标签或者按钮,可以通过动态创建 HTML 元素并将其插入到页面中来实现。下面是修改后的代码,重点是在 item.code === 'loan' 的部分添加了 Tabs 标签:

  1. $.ajax({
  2. method: "POST",
  3. url: "../d/detail/keyInfo",
  4. data: { custId: custId },
  5. success: function(result) {
  6. var jsonRes = JSON.parse(result);
  7. for (const item of jsonRes) {
  8. if (item.code === 'customerInfo') {
  9. // 客户信息展示
  10. }
  11. if (item.code === 'loan') { // 合同展示
  12. // 创建 tabs 的 HTML 部分
  13. const tabContainer = document.createElement('div');
  14. tabContainer.className = 'tab-container';
  15. const tabTitles = ['All', '已结清', '停催', '诉讼'];
  16. const contentDiv = document.createElement('div');
  17. contentDiv.className = 'tab-content';
  18. tabTitles.forEach((title, index) => {
  19. const button = document.createElement('button');
  20. button.innerText = title;
  21. button.className = 'tab-button';
  22. button.setAttribute('data-index', index);
  23. // 点击事件处理,显示对应的内容
  24. button.onclick = function() {
  25. const selectedIndex = parseInt(button.getAttribute('data-index'));
  26. showContent(selectedIndex); // 显示对应内容的函数
  27. };
  28. tabContainer.appendChild(button);
  29. });
  30. // 添加到合同展示部分(假设有一个特定的容器)
  31. const loanDisplayArea = document.getElementById('loan-display-area');
  32. loanDisplayArea.appendChild(tabContainer);
  33. loanDisplayArea.appendChild(contentDiv);
  34. // 初始加载所有内容
  35. let currentLoansToShow = item.child; // 默认显示所有贷款信息
  36. function showContent(index) {
  37. contentDiv.innerHTML = ''; // 清空现有内容
  38. switch (index) {
  39. case 0:
  40. currentLoansToShow = item.child; // 所有合同
  41. break;
  42. case 1:
  43. currentLoansToShow = item.child.filter(loan => loan.status === 'settled'); // 已结清
  44. break;
  45. case 2:
  46. currentLoansToShow = item.child.filter(loan => loan.status === 'paused'); // 停催
  47. break;
  48. case 3:
  49. currentLoansToShow = item.child.filter(loan => loan.status === 'litigation'); // 诉讼
  50. break;
  51. default:
  52. currentLoansToShow = item.child;
  53. }
  54. currentLoansToShow.forEach(loan => {
  55. const loanItemDiv = document.createElement('div');
  56. loanItemDiv.innerText = `Loan Code: ${loan.contractCode}, Status: ${loan.loanStatus}`;
  57. contentDiv.appendChild(loanItemDiv); // 将贷款信息添加到内容区域中
  58. });
  59. }
  60. showContent(0); // 初始显示所有贷款
  61. }
  62. }
  63. me.keyInfo = JSON.parse(result);
  64. me.form.initForm(jsonRes);
  65. }
  66. });

修改说明:

  1. 创建 Tabs:使用 document.createElement 创建一个包含按钮的 Tabs 容器。
  2. 点击事件处理:为每个按钮设置点击事件,根据所选标签过滤出不同状态的合同。
  3. 动态内容更新:在点击标签时,更新 contentDiv 中显示的合同信息。

请确保你的 HTML 中有一个 ID 为 loan-display-area 的元素,以便插入这些新创建的元素。您可能还需要根据项目样式调整样式和功能。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=22061

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?