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>
阅读 295

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

89 声望
0 粉丝
0 条评论
推荐阅读
P20. vue3 生命周期 勾子
Vue每个生命周期的详细介绍:beforeCreate(){}:Vue创建前,此阶段为实例初始化之后,this指向创建的实例,数据观察,数据监听事件机制都未形成,不能获得DOM节点。data,computed,watch,methods 上的方法和数...

台湾省委书记阅读 244

封面图
如何优雅地中断 Promise?来试试 AbortController 吧!
欢迎大家来到 前端小课堂 的第五期,今天我们来聊一聊如何终止正在进行中的 Fetch 以及 Promise。文中会跟大家详细介绍这里面的两个关键知识点 AbortController 和 AbortSignal。对动手实践比较感兴趣的同学还可...

dreamapplehappy23阅读 2.8k评论 4

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

XboxYan29阅读 3k评论 2

封面图
超强的苹果官网滚动文字特效实现
每年的苹果新产品发布,其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都非常有意思,今年 iPhone 14 Pro 的介绍页不例外。最近,刚好有朋友问到,其对官网的一段文字特效特别感兴趣,看适用简单却...

chokcoco24阅读 1.6k

封面图
CSS 渐变锯齿消失术
在 CSS 中,渐变(Gradient)可谓是最为强大的一个属性之一。但是,经常有同学在使用渐变的过程中会遇到渐变图形产生的锯齿问题。何为渐变锯齿?那么,什么是渐变图形产生的锯齿呢?简单的一个 DEMO: {代码...} ...

chokcoco17阅读 1.7k评论 1

封面图
单标签实现复杂的棋盘布局
其实,对于一个页面的布局而言,标签越少不一定是好事,我们在考虑 DOM 的消耗的同时,也需要关注代码的可读性,以及后续基于这个布局的制作的交互的难易性等等。

chokcoco17阅读 3.2k评论 3

封面图
超强的纯 CSS 鼠标点击拖拽效果
背景鼠标拖拽元素移动,算是一个稍微有点点复杂的交互。而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。在之前的这篇文章中 -- 不可思议的纯 CSS 实现鼠标跟随...

chokcoco16阅读 1.9k评论 7

封面图

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

89 声望
15 粉丝
宣传栏