Question

我在Datatables网站中使用jQuery Jeditable插件，Flask，以允许用户编辑已发送回Flask的表格内容服务器作为POST请求。

POST部分工作正常，但不是在单元格中显示已编辑的值，而是整个表格被填充在单元格中，我无法弄清楚原因。

我在http://legacy.datatables.net/release-datatables/examples/api/editable.html

引用了这个例子

我的代码：

__init__.py

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def landing_page():

    if request.method == 'POST':
        print request.form
    return render_template('home.html')

app.run(debug=True)

home.html

<!DOCTYPE html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script>
    <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">

    <script>
    $(document).ready(function() {
        $('#example').DataTable();
    });
    </script>

    <script>
    $(document).ready(function() {
        /* Init DataTables */
        var oTable = $('#example').dataTable();

        /* Apply the jEditable handlers to the table */
        oTable.$('td').editable( 'http://127.0.0.1', {
            "callback": function( sValue, y ) {
                var aPos = oTable.fnGetPosition( this );
                oTable.fnUpdate( sValue, aPos[0], aPos[1] );
            },
            "submitdata": function ( value, settings ) {
                return {
                    "row_id":oTable.fnGetPosition( this )[1],
                    "column": oTable.fnGetPosition( this )[2]
                };
            },
            "height": "14px",
            "width": "100%"
        } );
    } );

    </script>
</head>
<body>
    <table id="example" class="display" cellspacing="0" width="30%">
        <thead>
            <tr>
                <th id="Name">Name</th>
                <th>Position</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
            </tr>

        </tbody>
    </table>
</body>
</html>

编辑前后的图片：

Jeditable使用Python Flask将整个表放入已编辑的单元格中

0 个答案: