Bootstrap 5 + Bootstrap-Table + X-editable用于就地编辑表格单元格？

6ojccjat 于 2023-04-09 发布在 Bootstrap

关注(0)|答案(2)|浏览(330)

我使用的是Bootstrap 5.2.3和最新的Bootstrap-Table，我想让一些表列可以就地编辑，比如下表：
| ID|联系我们|公司简介|城镇|
| --------------|--------------|--------------|--------------|
| 1|约翰|史密斯|纽约|
| 二|珍|多伊|巴黎|
...我希望用户能够修改列TOWN中的值。
在Bootstrap-Table，they say的文档中，这应该使用x-editable插件来完成。
现在，我想知道这是否真的是最好的解决方案，因为x-editable看起来很旧，只支持Bootstrap 3......尽管如此，我还是找到了一个fork skycyclone/x-editable（这是Talv/x-editable的fork，它fork了原来的Talv/x-editable）;它包含bootstrap 5-editable，并且似乎可以工作，但这是一种可靠的方法吗？
2.现在，我已经成功地让X-editable为静态链接工作（它按预期显示内联编辑器和JS警报），但是当我点击表格单元格时，它没有做任何事情。这可能是什么问题？

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test</title>

        <link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="vendor/fortawesome/font-awesome/css/all.min.css" rel="stylesheet">
        <link href="vendor/wenzhixin/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet">
        <link href="skycyclone-x-editable/dist/bootstrap5-editable/css/bootstrap-editable.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <!-- x-editable works! -->
                <a href="#" id="username" data-type="text" data-pk="1" data-title="Enter username">superuser</a>

                <!-- it doesn't... -->
                <table class="table" id="myEditableTable" data-toggle="table" data-id-field="ID" data-editable="true">
                    <thead>
                        <tr>
                            <th scope="col" data-field="ID">ID</th>
                            <th scope="col" data-field="FIRST_NAME">First name</th>
                            <th scope="col" data-field="LAST_NAME">Last name</th>
                            <th scope="col" data-field="TOWN" data-editable="true">Town</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td>1</td><td>John</td><td>Smith</td><td>New York</td></tr>
                        <tr><td>2</td><td>Jane</td><td>Doe</td><td>Paris</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- JavaScript -->

        <script src="vendor/components/jquery/jquery.min.js"></script>
        <script src="vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="vendor/wenzhixin/bootstrap-table/dist/bootstrap-table.min.js"></script>
        <script src="skycyclone-x-editable/dist/bootstrap5-editable/js/bootstrap-editable.min.js"></script>

        <script>
            $(function() {
                $('#username').editable({
                    success: function(response, newValue) {
                        alert('newValue = ' + newValue);
                    }
                });
            });
        </script>
    </body>
</html>

twitter-bootstrap

来源：https://stackoverflow.com/questions/75833732/bootstrap-5-bootstrap-table-x-editable-for-in-place-editing-of-table-cells

2条答案

按热度按时间

kuhbmx9i1#

原来我丢失了Bootstrap-table的Editable扩展。
工作代码：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test</title>

        <link href="vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="vendor/fortawesome/font-awesome/css/all.min.css" rel="stylesheet">
        <link href="skycyclone-x-editable/dist/bootstrap5-editable/css/bootstrap-editable.css" rel="stylesheet">
        <link href="vendor/wenzhixin/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet">        
    </head>
    <body>
        <div class="container">
            <table id="mainTable" data-toggle="table" data-classes="table table-striped">
                <thead>
                    <tr>
                        <th scope="col" data-field="USER_ID">User ID</th>
                        <th scope="col" data-field="FIRST_NAME">First name</th>
                        <th
                            scope="col"
                            data-field="LAST_NAME"
                            data-editable="true"
                            data-editable-type="text"
                            data-editable-mode="inline"
                            data-editable-emptytext="N/A"
                        >Last name</th>
                        <th scope="col" data-field="EMAIL">Email</th>
                        <th scope="col" data-field="COUNTRY">Country</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>1</td><td>John</td><td>Smith</td><td>john.smith@example.com</td><td>US</td></tr>
                    <tr><td>2</td><td>Jane</td><td>Doe</td><td>jane.doe@example.com</td><td>ES</td></tr>
                    <tr><td>3</td><td>Alice</td><td></td><td>alice@example.com</td><td>FR</td></tr>
                    <tr><td>4</td><td>Bob</td><td>Jones</td><td>bjonesss@example.com</td><td>UK</td></tr>
                </tbody>
            </table>
        </div>

        <!-- JavaScript -->

        <script src="vendor/components/jquery/jquery.min.js"></script>
        <script src="vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="skycyclone-x-editable/dist/bootstrap5-editable/js/bootstrap-editable.min.js"></script>
        <script src="vendor/wenzhixin/bootstrap-table/dist/bootstrap-table.min.js"></script>
        <script src="vendor/wenzhixin/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.min.js"></script>

        <script>
            $(function() {
                $("#mainTable").on("editable-save.bs.table", function(event, field, row, rowIndex, oldValue, el) {
                    alert("New value = " + row[field] + ", old value = " + oldValue);
                });
            });
        </script>
    </body>
</html>

赞(0）回复(0）举报 2023-04-09

j2datikz2#

尝试将data-toggle="table"更改为data-bs-toggle="table"

赞(0）回复(0）举报 2023-04-09