亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 json 源中的數據填充 Bootstrap 表

使用 json 源中的數據填充 Bootstrap 表

慕哥6287543 2023-07-14 15:32:02
我是使用 bootstrap 和 json 文件的新手,我遇到了以下問題:我有以下代碼:<div class="container">  <h1 class="text text-success text-center ">Kontoauszug</h1>  <table id="table" data-toggle="table" data-url="/json/data.json">    <thead>    <tr>      <th data-field="auszug.betrag">ID</th>      <th data-field="auszug.unix">Item Name</th>      <th data-field="auszug.transaktionsart">Item Price</th>    </tr>    </thead>  </table></div><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><link rel="stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link rel="stylesheet" href= "https://unpkg.com/[email protected]/dist/bootstrap-table.min.css"><link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">我正在使用的 json 具有以下結構:{  "auszug": {    "1604400036082-3450": {      "betrag": -367.5,      "von/an_uuid": "Test1",      "von/an": "Test1",      "autorisiert-durch": "SYSTEM",      "unix": 1604400036,      "transaktionsart": "Lohnzahlung"    },    "1604406781759-8437": {      "betrag": 85.17,      "von/an": "Test2",      "autorisiert-durch": "SYSTEM",      "unix": 1604406782,      "transaktionsart": "überweisung"    },    "1604395596115-5983": {      "betrag": 1226.48,      "von/an": "Test3",      "autorisiert-durch": "SYSTEM",      "unix": 1604395596,      "transaktionsart": "überweisung"    }  },  "kontonummer": "DEF05487151498683",  "kontostand": 44641548.66,  "success": true}但是當我嘗試運行代碼時,我得到“找不到匹配的記錄”。如何將這樣的 json 數據獲取到表中?
查看完整描述

1 回答

?
jeck貓

TA貢獻1909條經驗 獲得超7個贊

可以觀察到的是,您不知道密鑰,因為它是動態的。您可以做的是進行 ajax 調用并獲取變量中的數據?,F在您必須平坦響應,以便可以將平坦數組傳遞到 Bootstrap 表。您不使用data-url屬性,而是遵循 fiddle 中給出的過程


我添加了一個小提琴,您可以將其用作示例。我還添加了適當的評論。


超文本標記語言


<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">


<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>


<table id="table">

  <thead>

    <tr>

      <th data-field="betrag">betrag</th>

      <th data-field="autorisiert-durch">autorisiert-durch</th>

      <th data-field="unix">unix</th>

    </tr>

  </thead>

</table>

你的腳本應該是


<script>

var $table = $('#table')


  $(function() {

  

  // do an ajax call here to get the response. your response should be like responseData

  

  var responseData = {

    "1604400036082-3450": {

        "betrag": -367.5,

        "von/an_uuid": "asdqwe2413",

        "von/an": "Test1",

        "autorisiert-durch": "SYSTEM",

        "unix": 1604400036,

        "transaktionsart": "überweisung"

        },

    "1604406781759-8437": {

        "betrag": 85.17,

        "von/an": "Test2",

        "autorisiert-durch": "SYSTEM",

        "unix": 1604406782,

        "transaktionsart": "überweisung"

        },

    };

  

  var data = [];

  

  // Here you have to flat the array

  Object.keys(responseData).forEach(function(key){ 

  

  var value = responseData[key]; 

  data.push(value);

  })

    $table.bootstrapTable({data: data})

  })

  

  </script>

如果您需要此代碼的 ajax 版本,請告訴我。

小提琴http://jsfiddle.net/8ngoh4y1/


查看完整回答
反對 回復 2023-07-14
  • 1 回答
  • 0 關注
  • 212 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號