数据表服务器端处理

Question

我有一个数据表，其中有一列是可以编辑的。我想解决三个问题。有没有人能帮我呢？

1. 我需要把第一列的数据传给我的服务器脚本（这列是数据库的主键）
2. 我需要让只有一个单元格是不可编辑的（就是第一行第一列的那个单元格）
3. 在编辑完表格后，我想在这一列看到编辑后的值。我知道如果使用 sUpdateURL: function(value, settings) 可以显示更改。有没有人能帮我解决这个问题？我对这个数据表还很陌生。

这是我的代码

$(document).ready(function() {
        $('#jtable').html( '<table cellpadding="1" cellspacing="1" border="1" class="pretty" id="edit_table"></table>' );
        $("#edit_table").dataTable({
            "aaData": {{ result | safe }},
            "aLengthMenu" : 100,
            "aaSorting": [],
            "aoColumns" : [
                {'sTitle' : 'Options' },
                {'sTitle' : 'Values'}
            ],
            "iDisplayLength": -1,
            "bFilter" : false,
            "bSearchable" :false,
            "bInfinite" :true,
            "bSort" :false,
            "bPaginate": false
        });
    });
    $(document).ready(function(){
        $("#edit_table").dataTable().makeEditable({
             sUpdateURL: "/submitchanges",
            "aoColumns": [
                null,
                {
                },
                {
                    indicator: 'Saving platforms...',
                    tooltip: 'Click to edit platforms',
                    type: 'textarea',
                    submit:'Save changes',
                    fnOnCellUpdated: function(sStatus, sValue, settings){

                    }
                }
            ]
        });
    });

我在服务器端处理时使用的是 Python 和 Flask 框架。

Answer 1

这里是与您的客户端配合工作的服务器代码（稍作修改，见下文）：

from flask import Flask, render_template, request as flask_request
app = Flask(__name__)

@app.route('/')
def hello_world():
    aa_data = [['First', 'Second'], ['First', 'Second']]
    return render_template('index.html', result = aa_data)

@app.route('/update/', methods=['POST'])
def update_records():
    value = flask_request.form['value']
    row_id = flask_request.form['rowId']
    # todo: perform database update operation
    return value

if __name__ == '__main__':
    app.run(debug=True)

客户端的修改内容：

$("#edit_table").dataTable().makeEditable({
            sUpdateURL: "/update/",
            "aoColumns": [
                null,
                {
                    sName:"secondColumn"
                }
            ]
        });