我正在制作一个非常小的网站,其中将根据下拉菜单选择显示数据库信息。
可以说我的数据库包含2个表,第一个表包含具有ID和名称的公司。另一个与员工“链接”到这些公司的人。例如:

╔═════════════╦════════════╗
║ company_ID  ║ company    ║
╠═════════════╬════════════╣
║ 1           ║ Google     ║
║ 2           ║ H&M        ║
║ 3           ║ IKEA       ║
╚═════════════╩════════════╝

╔═════════════╦═════════════════╗
║ company_ID  ║ employee        ║
╠═════════════╬═════════════════╣
║ 1           ║ Google_emp1     ║
║ 1           ║ Google_emp2     ║
║ 2           ║ H&M_emp1        ║
║ 1           ║ Google_emp3     ║
║ 3           ║ IKEA_emp1       ║
║ 3           ║ IKEA_emp2       ║
║ 2           ║ H&M_emp2        ║
╚═════════════╩═════════════════╝


当一个人在下拉菜单中选择“ Google”时,所有Company_ID为1的员工都应该出现在第二个下拉菜单中(因为在这种情况下,Google的ID为1)。
问题:
我需要将Flask变量传递到.js文件,以填充下拉列表。
目前,python文件的重要部分如下所示:

def database():
    c, conn = connectionDB()

    compDB = c.execute("SELECT * FROM Companies")
    compDB = c.fetchall()

    empDB = c.execute("SELECT * FROM Employees")
    empDB = c.fetchall()

    return render_template("database.html",
                            compDB = compDB,
                            empDB = empDB,
                            HEADERTEXT_LIST = HEADERTEXT_LIST)


我的.html文件的重要部分如下所示:

<select class="chzn-select" id="company" data-placeholder="Choose company" name="company">
    <option value=""></option>
<!--Here is the appending supposed to start-->
</select>

<select class="chzn-select" id="employee" data-placeholder="Choose employee" name="employee">
    <option value=""></option>
<!--Here is the appending (depending on company) supposed to start-->
</select>


(我实际上有几层,但这是相同的原理)
我的.js文件看起来像这样(我将其用作样式):

$(function () {
            $('.chzn-select').chosen({
                no_results_text: "No results for: ",
                search_contains: true,
                single_backstroke_delete: false,
                disable_search: false,
                width: "200px",
            });
            $('#company').append($('<option value=""></option>'));
            $('#company').trigger("chosen:updated");

        });


应该在以下位置输入我的数据库信息:

<option value="company_id">company</option>


问题1:
如何从.py文件传递这些变量,以便可以由.js文件操作?我的意思是,我可以使用Flask-logic,但这只能在我的.html文件中解释。
问题2:
填充这些内容的最明智的方法是什么?某种for循环?我对javascript完全陌生,很抱歉可能问了明显的问题。
谢谢!

最佳答案

如果您在Flask中使用Jinja2模板,则可以在Python中创建JSON对象,例如,可以使用python逻辑从查询结果中创建如下所示的对象:

object = [
    {"id": 1, "company": "Google", "employees": [
       {"name": "Mike"},
       {"name": "Jessica"},
    ]},
    {"id": 2, "company": "H&M", "employees": [...]},
    {"id": 3, "company": "Ikea", "employees": [...]},
]


将此对象添加到您的render_template调用中:

return render_template("database.html",
                        compDB = compDB,
                        empDB = empDB,
                        javascript = object,
                        HEADERTEXT_LIST = HEADERTEXT_LIST)


然后,在模板HTML中,您需要使用2个内置的Jinja2过滤器将变量呈现为JSON(这是Flask的默认部分)。然后这是我用来动态更新选择的jQuery代码。

<script type="text/javascript">

    var myVariable = {{ javascript|tojson|safe }};

    var selectCompany = $('#company');
    var selectEmployee = $('#employee');

    selectCompany.empty();
    $.each(myVariable, function (index, value) {
        selectCompany.append(
            $('<option>', {
                value: index,
                text: value.name
            }, '</option>'))
    });

    updateEmployeeSelect();

    selectCompany.on('change', function() {
        updateEmployeeSelect();
    });

    function updateEmployeeSelect() {
        var selected = selectCompany.val();

        selectEmployee.empty();
        $.each(myVariable[selected].employees,
            function (index, value) {
                selectEmployee.append(
                    $('<option>', {
                        value: index, text: value.name
                    }, '</option>'))
            });
        }
    }
</script>


另外-更新,只是意识到我在没有明确说明的情况下使用了上面的jQuery。您可以将jQuery $ .each()调用替换为javascript for循环的基本功能,例如像这样的模式:

for (var a = 0; a < myVariable.length; a++) {
    selectCompany.append(
        $('<option>', {
            value: a,
            text: myVariable[a].name
        }, '</option>'))
}

07-24 09:38
查看更多