如何使用 bootstrap-table.js 将 select 元素添加到列

Question

我正在使用 bootstrap-table.js 插件来填充 table 使用从我的 api 返回的约会。我使用的数据格式使用对象数组定义数据，然后在 html table 到 [=32] 的 <th> 中定义“数据字段”属性=] 数组中的数据。我需要在其中一列中包含一个 select 元素，以便使用 select 一个选项。数据将使用另一个 api 发送回我的数据库。然而，当我尝试使用 jquery 将 select 元素添加到数据数组时，HTML 输出为 [object Object]。我不确定如何使用此方法使 select 元素出现。非常感谢任何建议！

这是填充 table 的函数。 'reason' 键将 selection 变量作为值，但 html 中的输出是 [object Object]

$(function () {
                let selection = $('<select class="form-select" id="inputGroupSelect01"><option>hello</option><option>goodbye</option><option>welcome</option></select>')
                let data = [
                    {
                        'date': obj.model.data.timestamp[365],
                        'temperature': obj.model.data.average_dry_bulb_temperature[365],
                        'hdd': parseFloat(obj.model.data.degree_day[365]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[365],
                        'expected': parseFloat(obj.model.data.predicted_value[365]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[366],
                        'temperature': obj.model.data.average_dry_bulb_temperature[366],
                        'hdd': parseFloat(obj.model.data.degree_day[366]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[366],
                        'expected': parseFloat(obj.model.data.predicted_value[366]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[367],
                        'temperature': obj.model.data.average_dry_bulb_temperature[367],
                        'hdd': parseFloat(obj.model.data.degree_day[367]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[367],
                        'expected': parseFloat(obj.model.data.predicted_value[367]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[368],
                        'temperature': obj.model.data.average_dry_bulb_temperature[368],
                        'hdd': parseFloat(obj.model.data.degree_day[368]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[368],
                        'expected': parseFloat(obj.model.data.predicted_value[368]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[369],
                        'temperature': obj.model.data.average_dry_bulb_temperature[369],
                        'hdd': parseFloat(obj.model.data.degree_day[369]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[369],
                        'expected': parseFloat(obj.model.data.predicted_value[369]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[370],
                        'temperature': obj.model.data.average_dry_bulb_temperature[370],
                        'hdd': parseFloat(obj.model.data.degree_day[370]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[370],
                        'expected': parseFloat(obj.model.data.predicted_value[370]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[371],
                        'temperature': obj.model.data.average_dry_bulb_temperature[371],
                        'hdd': parseFloat(obj.model.data.degree_day[371]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[371],
                        'expected': parseFloat(obj.model.data.predicted_value[371]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[372],
                        'temperature': obj.model.data.average_dry_bulb_temperature[372],
                        'hdd': parseFloat(obj.model.data.degree_day[372]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[372],
                        'expected': parseFloat(obj.model.data.predicted_value[372]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[373],
                        'temperature': obj.model.data.average_dry_bulb_temperature[373],
                        'hdd': parseFloat(obj.model.data.degree_day[373]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[373],
                        'expected': parseFloat(obj.model.data.predicted_value[373]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[374],
                        'temperature': obj.model.data.average_dry_bulb_temperature[374],
                        'hdd': parseFloat(obj.model.data.degree_day[374]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[374],
                        'expected': parseFloat(obj.model.data.predicted_value[374]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[375],
                        'temperature': obj.model.data.average_dry_bulb_temperature[375],
                        'hdd': parseFloat(obj.model.data.degree_day[375]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[375],
                        'expected': parseFloat(obj.model.data.predicted_value[375]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[376],
                        'temperature': obj.model.data.average_dry_bulb_temperature[376],
                        'hdd': parseFloat(obj.model.data.degree_day[376]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[376],
                        'expected': parseFloat(obj.model.data.predicted_value[376]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[377],
                        'temperature': obj.model.data.average_dry_bulb_temperature[377],
                        'hdd': parseFloat(obj.model.data.degree_day[377]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[377],
                        'expected': parseFloat(obj.model.data.predicted_value[377]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[378],
                        'temperature': obj.model.data.average_dry_bulb_temperature[378],
                        'hdd': parseFloat(obj.model.data.degree_day[378]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[378],
                        'expected': parseFloat(obj.model.data.predicted_value[378]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[379],
                        'temperature': obj.model.data.average_dry_bulb_temperature[379],
                        'hdd': parseFloat(obj.model.data.degree_day[379]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[379],
                        'expected': parseFloat(obj.model.data.predicted_value[379]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[380],
                        'temperature': obj.model.data.average_dry_bulb_temperature[380],
                        'hdd': parseFloat(obj.model.data.degree_day[380]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[380],
                        'expected': parseFloat(obj.model.data.predicted_value[380]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[381],
                        'temperature': obj.model.data.average_dry_bulb_temperature[381],
                        'hdd': parseFloat(obj.model.data.degree_day[381]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[381],
                        'expected': parseFloat(obj.model.data.predicted_value[381]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[382],
                        'temperature': obj.model.data.average_dry_bulb_temperature[382],
                        'hdd': parseFloat(obj.model.data.degree_day[382]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[382],
                        'expected': parseFloat(obj.model.data.predicted_value[382]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[383],
                        'temperature': obj.model.data.average_dry_bulb_temperature[383],
                        'hdd': parseFloat(obj.model.data.degree_day[383]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[383],
                        'expected': parseFloat(obj.model.data.predicted_value[383]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[384],
                        'temperature': obj.model.data.average_dry_bulb_temperature[384],
                        'hdd': parseFloat(obj.model.data.degree_day[384]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[384],
                        'expected': parseFloat(obj.model.data.predicted_value[384]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[385],
                        'temperature': obj.model.data.average_dry_bulb_temperature[385],
                        'hdd': parseFloat(obj.model.data.degree_day[385]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[385],
                        'expected': parseFloat(obj.model.data.predicted_value[385]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[386],
                        'temperature': obj.model.data.average_dry_bulb_temperature[386],
                        'hdd': parseFloat(obj.model.data.degree_day[386]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[386],
                        'expected': parseFloat(obj.model.data.predicted_value[386]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[387],
                        'temperature': obj.model.data.average_dry_bulb_temperature[387],
                        'hdd': parseFloat(obj.model.data.degree_day[387]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[387],
                        'expected': parseFloat(obj.model.data.predicted_value[387]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[388],
                        'temperature': obj.model.data.average_dry_bulb_temperature[388],
                        'hdd': parseFloat(obj.model.data.degree_day[388]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[388],
                        'expected': parseFloat(obj.model.data.predicted_value[388]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[389],
                        'temperature': obj.model.data.average_dry_bulb_temperature[389],
                        'hdd': parseFloat(obj.model.data.degree_day[389]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[389],
                        'expected': parseFloat(obj.model.data.predicted_value[389]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[390],
                        'temperature': obj.model.data.average_dry_bulb_temperature[390],
                        'hdd': parseFloat(obj.model.data.degree_day[390]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[390],
                        'expected': parseFloat(obj.model.data.predicted_value[390]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[391],
                        'temperature': obj.model.data.average_dry_bulb_temperature[391],
                        'hdd': parseFloat(obj.model.data.degree_day[391]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[391],
                        'expected': parseFloat(obj.model.data.predicted_value[391]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[392],
                        'temperature': obj.model.data.average_dry_bulb_temperature[392],
                        'hdd': parseFloat(obj.model.data.degree_day[392]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[392],
                        'expected': parseFloat(obj.model.data.predicted_value[392]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[393],
                        'temperature': obj.model.data.average_dry_bulb_temperature[393],
                        'hdd': parseFloat(obj.model.data.degree_day[393]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[393],
                        'expected': parseFloat(obj.model.data.predicted_value[393]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[394],
                        'temperature': obj.model.data.average_dry_bulb_temperature[394],
                        'hdd': parseFloat(obj.model.data.degree_day[394]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[394],
                        'expected': parseFloat(obj.model.data.predicted_value[394]).toFixed(0),
                        'reason': selection
                    },
                    {
                        'date': obj.model.data.timestamp[395],
                        'temperature': obj.model.data.average_dry_bulb_temperature[395],
                        'hdd': parseFloat(obj.model.data.degree_day[395]).toFixed(0),
                        'meterReading': obj.model.data.raw_value[395],
                        'expected': parseFloat(obj.model.data.predicted_value[395]).toFixed(0),
                        'reason': selection
                    },
                ]
                $table2.bootstrapTable({ data: data })
            })
        })

这是HTML输出

<table id="table2" class="table table-bordered table-hover">
   <thead>
      <tr>
         <th style="" data-field="date">
            <div class="th-inner ">Date</div>
            <div class="fht-cell"></div>
         </th>
         <th style="" data-field="temperature">
            <div class="th-inner ">Temperature</div>
            <div class="fht-cell"></div>
         </th>
         <th style="" data-field="hdd">
            <div class="th-inner ">HDD</div>
            <div class="fht-cell"></div>
         </th>
         <th style="" data-field="meterReading">
            <div class="th-inner ">Meter</div>
            <div class="fht-cell"></div>
         </th>
         <th style="" data-field="expected">
            <div class="th-inner ">Expected</div>
            <div class="fht-cell"></div>
         </th>
         <th style="" data-field="replacement">
            <div class="th-inner ">Replacement</div>
            <div class="fht-cell"></div>
         </th>
         <th style="" data-field="reason">
            <div class="th-inner ">Reason</div>
            <div class="fht-cell"></div>
         </th>
         <th style="" data-field="notes">
            <div class="th-inner ">Notes</div>
            <div class="fht-cell"></div>
         </th>
      </tr>
   </thead>
   <tbody>
      <tr data-index="0">
         <td>2020-05-01</td>
         <td>74.8</td>
         <td>9</td>
         <td>8060</td>
         <td>7426</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="1">
         <td>2020-05-02</td>
         <td>78.4</td>
         <td>6</td>
         <td>6300</td>
         <td>5717</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="2">
         <td>2020-05-03</td>
         <td>81</td>
         <td>3</td>
         <td>5520</td>
         <td>4483</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="3">
         <td>2020-05-04</td>
         <td>82.4</td>
         <td>2</td>
         <td>4710</td>
         <td>3818</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="4">
         <td>2020-05-05</td>
         <td>77.2</td>
         <td>7</td>
         <td>4520</td>
         <td>6287</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="5">
         <td>2020-05-06</td>
         <td>75.6</td>
         <td>8</td>
         <td>4710</td>
         <td>7046</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="6">
         <td>2020-05-07</td>
         <td>73</td>
         <td>11</td>
         <td>6140</td>
         <td>8281</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="7">
         <td>2020-05-08</td>
         <td>76.6</td>
         <td>7</td>
         <td>6970</td>
         <td>6572</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="8">
         <td>2020-05-09</td>
         <td>68.7</td>
         <td>15</td>
         <td>5120</td>
         <td>10322</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="9">
         <td>2020-05-10</td>
         <td>69.3</td>
         <td>15</td>
         <td>9460</td>
         <td>10037</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="10">
         <td>2020-05-11</td>
         <td>73.6</td>
         <td>10</td>
         <td>8890</td>
         <td>7996</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="11">
         <td>2020-05-12</td>
         <td>69.1</td>
         <td>15</td>
         <td>7440</td>
         <td>10132</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="12">
         <td>2020-05-13</td>
         <td>74.5</td>
         <td>10</td>
         <td>9040</td>
         <td>7569</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="13">
         <td>2020-05-14</td>
         <td>80.6</td>
         <td>3</td>
         <td>7160</td>
         <td>4673</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="14">
         <td>2020-05-15</td>
         <td>80.1</td>
         <td>4</td>
         <td>4690</td>
         <td>4910</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="15">
         <td>2020-05-16</td>
         <td>71.8</td>
         <td>12</td>
         <td>4730</td>
         <td>8850</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="16">
         <td>2020-05-17</td>
         <td>76.5</td>
         <td>8</td>
         <td>7350</td>
         <td>6619</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="17">
         <td>2020-05-18</td>
         <td>80.4</td>
         <td>4</td>
         <td>6140</td>
         <td>4768</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="18">
         <td>2020-05-19</td>
         <td>83.1</td>
         <td>1</td>
         <td>4900</td>
         <td>3486</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="19">
         <td>2020-05-20</td>
         <td>83.8</td>
         <td>0</td>
         <td>4270</td>
         <td>3154</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="20">
         <td>2020-05-21</td>
         <td>81.7</td>
         <td>2</td>
         <td>4310</td>
         <td>4151</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="21">
         <td>2020-05-22</td>
         <td>83.3</td>
         <td>1</td>
         <td>4310</td>
         <td>3391</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="22">
         <td>2020-05-23</td>
         <td>83.7</td>
         <td>0</td>
         <td>3740</td>
         <td>3201</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="23">
         <td>2020-05-24</td>
         <td>80.1</td>
         <td>4</td>
         <td>0</td>
         <td>4910</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="24">
         <td>2020-05-25</td>
         <td>71.1</td>
         <td>13</td>
         <td>0</td>
         <td>9183</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="25">
         <td>2020-05-26</td>
         <td>74.7</td>
         <td>9</td>
         <td>0</td>
         <td>7474</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="26">
         <td>2020-05-27</td>
         <td>73.2</td>
         <td>11</td>
         <td>0</td>
         <td>8186</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="27">
         <td>2020-05-28</td>
         <td>75.7</td>
         <td>8</td>
         <td>0</td>
         <td>6999</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="28">
         <td>2020-05-29</td>
         <td>78.8</td>
         <td>5</td>
         <td>0</td>
         <td>5527</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="29">
         <td>2020-05-30</td>
         <td>77.4</td>
         <td>7</td>
         <td>0</td>
         <td>6192</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
      <tr data-index="30">
         <td>2020-05-31</td>
         <td>78.6</td>
         <td>5</td>
         <td>0</td>
         <td>5622</td>
         <td>-</td>
         <td>[object Object]</td>
         <td>-</td>
      </tr>
   </tbody>
</table>

Answer 1

这一行给你一个 jQuery 对象：

let selection = $('<select class="form-select" id="inputGroupSelect01"><option>hello</option><option>goodbye</option><option>welcome</option></select>')

相反，您需要 HTML:

的字符串

let selection = '<select class="form-select" id="inputGroupSelect01"><option>hello</option><option>goodbye</option><option>welcome</option></select>'

但是，您已对其进行编码，以便每个 <select> 都具有相同的 ID inputGroupSelect01。您需要更改此设置，以便每个人都有不同的 ID，因为不允许重复 ID。

如何使用 bootstrap-table.js 将 select 元素添加到列

How to add select element to columns using bootstrap-table.js

html

jquery

bootstrap-table