Question

我接受了一些用户输入，这会产生一个我可以display的表格。现在我想让用户选择一些数据，然后将这些数据发送回另一个进一步处理的函数。对于我用于演示目的的玩具示例，它可能如下所示：

不幸的是，我没有这样做。关键部分可能是jquery部分（整个代码可以在下面找到）：

$('#send_data').bind('click', function() {
  $.getJSON('/_selected_data', {
    sel_data: table.rows().data().toArray()

  }, function(data) {
    alert('This worked')
  });
  return false;
});

这部分我的Python代码：

@app.route('/_selected_data')
def get_selected_data():

    sel_data = request.args.get('sel_data')

当我打印sel_data时，它会打印None，当我使用requests.json时，它也无效;理想情况下，可以将结果再次作为具有相同列标题的pandas数据帧。

我该如何正确地做到这一点？此外，如果用户没有选择任何数据，那么当然应该返回整个表格。

这是整个代码：

from flask import Flask, render_template, request, jsonify
import pandas as pd
import numpy as np
import json

# just for reproducibility
np.random.seed(0)

# Initialize the Flask application
app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/_get_table')
def get_table():
    a = request.args.get('a', type=int)
    b = request.args.get('b', type=int)

    df = pd.DataFrame(np.random.randint(0, 100, size=(a, b)), columns=['C1', 'C2'])

    return jsonify(number_elements=a * b,
                   my_table=json.loads(df.to_json(orient="split"))["data"],
                   columns=[{"title": str(col)} for col in json.loads(df.to_json(orient="split"))["columns"]])


@app.route('/_selected_data')
def get_selected_data():

    sel_data = request.args.get('sel_data')
    print(sel_data)

    return jsonify(dummy_data=1)


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

和我的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Create a pretty table</h3>
      </div>

      <div>
        <p>Number of rows</p>
        <input type="text" size="5" id="a" value="10">
        <p>Number of columns</p>
        <input type="text" size="5" id="b" value="2">

        <p><a href="javascript:void();" id="calculate">get a pretty table</a></p>
        <p><a href="javascript:void();" id="send_data">send selected data</a></p>
         <p>Result</p>
        <p>Number of elements:</p>
          <span id="elements">Hallo</span><br>
          <table id="a_nice_table" class="table table-striped">Here should be a table</table>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var table = null;
        $('#calculate').bind('click', function() {
          $.getJSON('/_get_table', {
            a: $('#a').val(),
            b: $('#b').val()
          }, function(data) {
            $("#elements").text(data.number_elements);
            if (table !== null) {
              table.destroy();
              table = null;
              $("#a_nice_table").empty();
            }
            table = $("#a_nice_table").DataTable({
              data: data.my_table,
              columns: data.columns
            });
          });
          return false;
        });
        $('#send_data').bind('click', function() {
          $.getJSON('/_selected_data', {
            sel_data: table.rows().data().toArray()

          }, function(data) {
            alert('This worked')
          });
          return false;
        });
      });
    </script>
  </body>
</html>

Answer 1

以下是我尝试解决您的问题的方法。我假设用户一次只能选择一行。

<强>的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Create a pretty table</h3>
      </div>

      <div>
        <p>Number of rows</p>
        <input type="text" size="5" id="a" value="10">
        <p>Number of columns</p>
        <input type="text" size="5" id="b" value="2">

        <p><a href="javascript:void();" id="calculate">get a pretty table</a></p>
        <p><a href="javascript:void();" id="send_data">send selected data</a></p>
         <p>Result</p>
        <p>Number of elements:</p>
          <span id="elements">Hallo</span><br>
          <table id="a_nice_table" class="table table-striped">Here should be a table</table>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var table = null;
        var selected = null;
        $('#calculate').bind('click', function() {
          $.getJSON('/_get_table', {
            a: $('#a').val(),
            b: $('#b').val()
          }, function(data) {
            $("#elements").text(data.number_elements);
            if (table !== null) {
              table.destroy();
              table = null;
              $("#a_nice_table").empty();
            }
            table = $("#a_nice_table").DataTable({
              data: data.my_table,
              columns: data.columns
            });
            var drawn_table = document.getElementById('a_nice_table'),
                selected = drawn_table.getElementsByClassName('selected');
            drawn_table.onclick = highlight;
            function highlight(e) {
              if (selected[0]) selected[0].className = '';
              e.target.parentNode.className = 'selected';
            }
          });
          return false;
        });
        $('#send_data').bind('click', function() {
          var selected = $("tr.selected").html();
          if (selected != null) {
            console.log("<thead>" + $("#a_nice_table thead").html() + "</thead><tbody><tr>" + selected + "</tr></tbody>");
            $.getJSON('/_selected_data', {
              sel_data: "<thead>" + $("#a_nice_table thead").html() + "</thead><tbody><tr>" + selected + "</tr></tbody>"
            }, function(data) {
              alert('This worked');
            });
          } else {
            console.log($("#a_nice_table").html());
            $.getJSON('/_selected_data', {
              sel_data: $("#a_nice_table").html()
            }, function(data) {
              alert('This worked');
            });
          }
          return false;
        });
      });
    </script>
  </body>
</html>

<强> app.py

from flask import Flask, render_template, request, jsonify
import pandas as pd
import numpy as np
import json

# just for reproducibility
np.random.seed(0)

# Initialize the Flask application
app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/_get_table')
def get_table():
    a = request.args.get('a', type=int)
    b = request.args.get('b', type=int)

    df = pd.DataFrame(np.random.randint(0, 100, size=(a, b)), columns=['C1', 'C2'])

    return jsonify(number_elements=a * b,
                   my_table=json.loads(df.to_json(orient="split"))["data"],
                   columns=[{"title": str(col)} for col in json.loads(df.to_json(orient="split"))["columns"]])


@app.route('/_selected_data')
def get_selected_data():

    sel_data = request.args.get('sel_data')
    df_list = pd.read_html("<table>" + sel_data + "</table>")
    df = pd.concat(df_list)
    print(df)

    return jsonify(dummy_data=1)


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

所以基本上发生的事情是，在随机生成表之后，我必须创建几个变量（drawn_table和selected）来跟踪表及其选定的行。截至目前，选择行时没有视觉上的变化，但如果您想要进行任何CSS修改以表示何时选择行，则由您决定。当用户单击一行时，该行将获得＆＃34;选择＆＃34;的类分配，并取消选择任何其他行。这样，JQuery在将其发送回服务器时将知道选择了哪一行。

然后在send_data链接中，我会找到{＆＃34;已选中＆＃34;的tr（表格行）元素。 class（tr.selected）并获取此元素中的html代码。如果元素存在，那么我将把html和表头信息作为JSON发送到flask。如果没有tr.selected元素，那么html代码显然是未定义的，因此代码将运行块的else部分并发送整个表。

在 app.py 中，我读取了JSON值，这是一段HTML代码。由于Pandas有read_html方法，我可以将HTML字符串传递给方法来创建数据帧列表。然后，我concat数据框列表，以制作我的最终df。

您可以在Python的控制台日志（print(df)）中查看数据框的结果。您还可以在浏览器检查器中查看html代码结果，因为我添加了一些console.log语句。

如何从数据表中发送选定的数据？

1 个答案: