javascript - Bootstrap 表数据显示列 ="true"丢失输入的数据

Question

我正在使用 Bootstrap 表来显示一些数据。我的表格包含多个下拉列表、标签、文本框等。我还包含 data-show-columns="true" 以便允许用户显示/隐藏表格列。

我在使用此功能时遇到问题。如果用户在文本框中输入内容，然后使用列筛选器功能，则在文本框中输入的数据将丢失。

这是一个jsfiddle 。有人可以让我知道如何解决它，或者至少指出我正确的方向吗？

谢谢，

Answer 1

您可以根据您的要求处理以下任何事件并更新表格列:

1. 使用 column-switch.bs.table 和 `search.bs.table' 显示/隐藏列(推荐)
2. 值发生变化或输入框模糊

以下是代码更改 ( Fiddle ):

标记

<table id="myDataTable" data-height="299" data-show-columns="true" data-id-field="id" class="table table-hover table-striped" data-toggle="table" data-search="false" data-filter-control="false"
 data-show-multi-sort="false">
    <thead>
    <tr>
        <th data-field="state" data-radio="true"></th>
        <th data-field="name" data-switchable="true">Name</th>
        <th data-field="price">Price</th>
        <th data-field="column1">Columns1</th>
        <th data-field="column2" data-visible="false">Columns2</th>
        <th data-field="column3" data-switchable="false">Columns3</th>
        <th data-field="column4" data-visible="false">Columns4</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td data-field="state"></td>
            <td data-field="name"><input type="text" name="fname" id="fname" class="fname"></td>
            <td data-field="price"><input type="text" name="price" id="price"></td>
            <td data-field="column1"><input type="text" name="1"></td>
            <td data-field="column2"><input type="text" name="2"></td>
            <td data-field="column3">Somehting</td>
            <td data-field="column4">Something</td>
        </tr>

    </tbody>
</table>

JavaScript

$(document).ready(
    function() {
        $('body').on('change', '#fname', function() {
            var nameValue = this.value;
            $('#myDataTable').bootstrapTable('updateRow', {
                    index: 0,
                    row: {
                        name: '<input type="text" name="fname" id="fname" value="' + nameValue + '"/>'
                    }
                });
        });

        $('body').on('change', '#price', function() {
            var priceValue = this.value;
            $('#myDataTable').bootstrapTable('updateRow', {
                    index: 0,
                    row: {
                        price: '<input type="text" name="price" id="price" value="' + priceValue + '"/>'
                    }
                });
        });
    }
);