Grizzly's daily
0%

Flask | xm-select控件回显

发表于 更新于 分类于
本文字数： 2.2k 阅读时长 ≈ 2 分钟

本文适用于Flask + Layui + HTML + JS 的场景，其他场景不保证完全适用。

本文是关于Flask下控件回显问题的解决方案，包括xm-select单选框的回显问题

控件回显问题

在Flask中调用render_template的时候页面会进行刷新，此时页面的From之类需要输入的控件在刷新后就会显示空白内容，因为刷新等于重新加载一次页面，虽然获取了输入的值，但是并没有保留在原本的控件 value 中。

解决显式控件回显问题方法

本文所谓的显式控件是，控件的元素都是在HTML或JS中直接定义的，此事我们只需要找到控件所在的位置，给元素进行赋值，例如：

app.py

1
2
3
4
5
6
7
8
9
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def Hello():
        if request.method == 'POST':
            form_name = request.form['name']
	return render_template('index.html',name=form_name)

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <from method="POST">
        <label style="width: 220px">姓名：</label>
        <input type="text" name="name" value="{{ name }}">
        <button type="submit">立即查看</button>
    </from>
</body>
</html>

我们这里是将从表单中获取的name值，再次赋值给name，也就是回显。

其实也就是利用 Flask的{{ }}进行传参，只不过这里是将参数传给value而已，与之前获取参数一节不过是举一反三。

解决隐式控件回显问题方法

在写小程序的时候，使用了layui框架的扩展插件xm-select，该插件主要是设计了好看的选择控件，例如单选多选等等，之后再开章节细讲。

本人的调用的xm-select控件部分代码如下。

index.html

1
2
3
4
5
6
7
8
9
10
<form class="layui-form layui-form-pane" style="font-family: 微软雅黑" method="POST">
    <div class="layui-form-item">
        <div class="layui-inline layui-col-md6">
            <label class="layui-form-label">小区选择</label>
            <div class="layui-input-block">
                <div id="sites" name="sites" class="xm-select-demo"></div>
            </div>
        </div>
    </div>
</form>

运行结果如下：

但是在提交表单之后，界面进行刷新，页面中选择的参数就会消失，此时我们去寻找对应的控件，就傻眼了。

我们只能在①处找到自己写的代码，而下拉框②这些都是动态生成的，对于我这个前端新手来说还是很厉害的，所以，我去查找说明文档，事实证明说明文档是很重要的。

从中我们得知，在进行xmSelect.render()后会返回一个xmSelect对象，也就是我们的下拉框对象，使用getValue可以获取下拉框的当前值，使用setValue可以设置下拉框的当前值，也就我们所需要的回显，调用格式如下：

1
2
3
sites_select.setValue([
    {name: sitesname, value: sitesname, selected: true}
]);

这样就成功完成了控件的回显。

// Todo: 还有一个多选的回显，还为解决。

个人收获

  1. 学会举一反三，Flask传过来的值在HTML的任何一个位置都可以运用；
  2. 当控件是动态显示的时候，一定会存在赋值取值的函数入口，查找说明文档是最快的方法。
------ 本文结束------