javascript 如何在 Bootstrap 表中插入和更新数据?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31288666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 13:35:31  来源:igfitidea点击:

How to insert and update data in Bootstrap table?

javascripttwitter-bootstrap-3

提问by Ritesh Mathur

I haven't found the exact answer that how to insert and update data in bootstrap table.

我还没有找到如何在引导表中插入和更新数据的确切答案。

The data is coming from a URL in JSON format.

数据来自 JSON 格式的 URL。

I have to use multiple URLs in a same table.

我必须在同一个表中使用多个 URL。

采纳答案by HimalayanCoder

<html>
    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.css">

        <!-- Latest compiled and minified JavaScript -->
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.js"></script>
    </head>

    <body>
        <div style="margin : 100px;">
            <button class="btn-primary btn" onclick="load();" >Load Table</button>
            <button class="btn-primary btn" onclick="reload();">Update Table</button>
        </div>
        <table class="table" id="table">
            <thead>
                <tr>
                    <th data-field="id">Item ID</th>
                    <th data-field="name">Item Name</th>
                    <th data-field="price">Item Price</th>
                </tr>
            </thead>
        </table>
        <script>
            $('#table').bootstrapTable({});
            function load(){
                var data = [{
                        id: 1,
                        name: 'Item 1',
                        price: ''
                    }, {
                        id: 2,
                        name: 'Item 2',
                        price: ''
                    }]; 
                $('#table').bootstrapTable("load", data);
            }
            function reload(){
                var data = [{
                        id: 3,
                        name: 'Item 3',
                        price: ''
                    }, {
                        id: 4,
                        name: 'Item 4',
                        price: ''
                    }]; 
                    $('#table').bootstrapTable("load", data);
            }
        </script>
    </body>
</html>

If the data is coming from an API as JSON, you need to first download the JSON from the API endpoint and store it in a javascript variable and load

如果数据以 JSON 形式来自 API,则需要首先从 API 端点下载 JSON 并将其存储在 javascript 变量中并加载

Demo on JSFiddle

在 JSFiddle 上演示

回答by javatogo

Say the json data is held in a javascript array called myList at index 0 & you are inserting into myTable, use the 'insertRow' option for bootstrap table to insert as the last row at the end of the table, as below:

假设 json 数据保存在索引 0 处名为 myList 的 javascript 数组中,并且您要插入 myTable,请使用引导表的 'insertRow' 选项作为表末尾的最后一行插入,如下所示:

var rowId = $("#myTable >tbody >tr").length;
$(myTable).bootstrapTable('insertRow',{
            index: rowId,
            row: myList[0]
         });