使用带有输入字段的引导表答案

【问题标题】：Using bootstrap table with input fields使用带有输入字段的引导表
【发布时间】：2019-09-13 12:09:49
【问题描述】：

我的表格包含包含输入字段的单元格。

当用户更改输入字段的值时，我需要执行以下操作以保持表格排序。

“询问”表格刚刚更改的输入字段是否属于表格排序依据的列。
如果问题 1 的答案为真，我需要“告诉”表格对行进行排序。

我的问题是：

上面的逻辑感觉正确吗？
我该如何（我应该使用什么 API 调用）来回答 #1
如何调用表格的“重新排序行”API？

代码sn-p

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>


    <title>sorted table</title>
</head>
<body>

<span>A Bootstrap table</span>

<table id="my_table_1" data-toggle="table" data-sort-stable="true">
    <thead>
    <tr>
        <th data-sortable="true">A</th>
        <th data-sortable="true">B</th>
        <th data-sortable="true">C</th>
        <th data-sortable="false">D</th>
    </tr>
    </thead>
   <tbody>
        <tr>
            <td>1</td>
            <td><select>
                <option val="112">A</option>
                <option val="2">B</option>
                <option val="356" selected>C</option>
            </select>
            </td>
            <td><input type="date" value="2018-07-22"></td>
            <td><input type="checkbox"></td>
        </tr>
        <tr>
            <td>123</td>
            <td><select>
                <option val="1" selected>A</option>
                <option val="2">B</option>
                <option val="3">C</option>
            </select>
            </td>
            <td><input type="date" value="2014-07-22"></td>
            <td><input type="checkbox"></td>
        </tr>

        <tr>
            <td>56</td>
            <td><select>
                <option val="1">A</option>
                <option val="2" selected>B</option>
                <option val="3">C</option>

            </select>
            </td>
            <td><input type="date" value="2014-08-23"></td>
            <td><input type="checkbox"></td>
        </tr>

        <tr>
            <td>14</td>
            <td><select>
                <option val="1">A</option>
                <option val="2" selected>B</option>
                <option val="3">C</option>

            </select>
            </td>
            <td><input type="date" value="2014-07-23"></td>
            <td><input type="checkbox"></td>
        </tr>
        </tbody>
</table>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
          console.log('ready');
          $('#my_table_1').find('input[type="date"]').change(function() {
            console.log('Table 1.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
          });
          $('#my_table_1').find('select').change(function() {
            console.log('Table 1.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
          });
         });
    </script>

</body>
</html>

谢谢

【问题讨论】：

标签： javascript twitter-bootstrap bootstrap-table

【解决方案1】：

同#987，需要调用updateRow将更改保存到表data：https://live.bootstrap-table.com/code/wenzhixin/737。

【讨论】：

在 #987 中，“销售”列不可排序。在我的情况下，包含输入字段的列是可排序的，因此我需要在输入字段值更改后触发表排序。拨打updateRow 会这样做吗？
问题。在示例 #987 中，表格是基于 json 数据呈现的。在我的情况下，表格是在服务器端呈现的。如何将提供的解决方案应用于我的模型？（我问的是因为函数selectFormatter 将选择标记作为value 参数而不是您的示例中的选定值）
如果你使用的是服务器端分页，我认为你需要将数据发布到服务器。
我不使用服务器端分页。该表仅包含 10 到 50 条记录。当用户更改输入字段的值时，更改会通过 XHR 传播到服务器。 XHR 调用完成后 - 我希望根据用户更改对表格进行排序。有什么方向吗？
可以用<input type="number">代替<option>吗？