flask layui 联动选择框 实例

  • 图1
    image.png
  • 图2
    image.png
  • 图3

image.png

orm


class Select(db.Model):
    __tablename__ = 'select_project'  # 表名
    select_id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    select_name = db.Column(db.String(200), nullable=False)  # 分类名称、不能为空
    roles = db.Column(db.Integer, nullable=False)  # 级别、不能为空

    def single_to_dict(self):
        return {c.name: getattr(self, c.name) for c in self.__table__.columns}

    def to_dict(self):
        model_dict = dict(self.__dict__)
        del model_dict['_sa_instance_state']
        return model_dict


class Resources(db.Model):
    __tablename__ = 'resources'  # 表名
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    resources_name = db.Column(db.String(200), nullable=False)  # 分类名称、不能为空
    parent_id = db.Column(db.Integer, nullable=False)  # 父级id、不能为空。



###obj转json
def to_json_all(msg: list):
    import json
    data = {}
    if type(msg) == list:
        for i in range(len(msg)):
            temp_dict = {}
            j = 0
            for k, v in msg[i].__dict__.items():
                if j > 0:
                    temp_dict[k] = v
                j += 1

            data[i] = temp_dict
    else:
        temp_dict = {}
        j = 0
        for k, v in msg.__dict__.items():
            if j > 0:
                temp_dict[k] = v
            j += 1
        data[0] = temp_dict
    return json.dumps(data, ensure_ascii=False)



image.png

  • select_project

image.png

  • resources

view


@silence.route('/silence_add', methods=['GET'])
@silence.route('/silence_add/', methods=['GET'])
@login_required
@permission_required(Permission.AVERAGE_USER)
def silence_add1():
    return render_template('silence_add.html', select_project=Select.query.all())

@silence.route('/select_project/', methods=['POST'])
def select_project1():
    select_id = request.form.get('select_id')  # 接收ajax提交的数据--地区 id
    print("##id", select_id)
    resources_obj = Resources.query.filter_by(parent_id=select_id).all()
    #resources_json = resources_obj.single_to_dict()
    data = to_json_all(resources_obj)  # 打包成成json格式
    print("##data", data)

    return data

html



<form class="layui-form" >
        <div class="layui-form-item">
            <label class="layui-form-label">project</label>
            <div class="layui-input-block">
                <select name="village" lay-filter="village" lay-verify="required" lay-search>
                    <option value=""></option>
                    {% for village in select_project %}
                        <option value="{{ village.select_id }}">{{ village.select_name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Values</label>
            <div class="layui-input-block">
                <select name="locationtest" id="locationtest" lay-filter="locationtest" lay-verify="required"
                        lay-search>
                    <option value=""></option>

                </select>
            </div>
        </div>

</form>






js

    <script>
        layui.use(['layer', 'jquery', 'form'], function () {
            var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form; // 不写下拉框加载不出来


            form.on('select(village)', function (data) {
                if (data.value != '') {
                    console.log(data.value);  // 打印获取到的值----地区value值
                    locationtest(data.value);   // 调用locationtest方法,参数是获取到的地区value值
                }
            });


            function locationtest(village) {
                var url = '/select_project/';  // 处理地址 url
                var data = {'select_id': village};  // 提交到后天的数据--地区value值--地区 id
                $.ajax({
                    type: 'post',
                    url: url,
                    data: data,
                    dataType: 'json',
                    success: function (data) {
                        var html = '<option value=""></option>';  // 将下拉框清空重新填写新的内容
                        $.each(data, function (key, obj) { // each便利django返回的json数据,并用拼接字符串的形式动态加载到下拉框
                            html += '<option value="+ obj.id +">' + obj.resources_name + '</option>'
                        });
                        $('[name=locationtest]').html(html);
                        // -----①  见下方说明处
                        form.render('select');  // 重新渲染
                        // -----
                    }
                });
            }


        });


    </script>

这个人很懒,没有什么说的。

89 声望
15 粉丝
0 条评论
推荐阅读
P34. vuex 状态管理
App.vue {代码...} Home.vue {代码...} index.js {代码...}

台湾省委书记阅读 84

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.6k评论 2

封面图
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: {代码...} {代码...} 但是,CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看,...

chokcoco25阅读 2.1k

封面图
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.6k

封面图
开局一张图,构建神奇的 CSS 效果
假设,我们有这样一张 Gif 图:利用 CSS,我们尝试来搞一些事情。图片的 Glitch Art 风在这篇文章中 --CSS 故障艺术,我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类似于抖音的 LOGO。像是这样:假设...

chokcoco13阅读 2.1k评论 3

封面图
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.7k

封面图
现代 CSS 高阶技巧,完美的波浪进度条效果!
本文为稀土掘金技术社区首发签约文章,14 天内禁止转载,14 天后未获授权禁止转载,侵权必究!我的新的专栏 -- 现代 CSS 与 Web 动画解决方案。将专注于实现复杂布局,兼容设备差异,制作酷炫动画,制作复杂交互...

chokcoco10阅读 2.7k

封面图

这个人很懒,没有什么说的。

89 声望
15 粉丝
宣传栏