我正在制作一个非常小的网站,其中将根据下拉菜单选择显示数据库信息。
可以说我的数据库包含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>'))
}