DJANGO结合jQuery cxSelect 作二级菜单过滤

最新推荐文章于 2023-03-13 22:20:09 发布

weixin_34319111

最新推荐文章于 2023-03-13 22:20:09 发布

阅读量176

点赞数

文章标签： javascript python ViewUI

本文介绍了如何在网站中使用jQuerycxSelect插件实现多选下拉框过滤功能，包括HTML结构搭建、jQuery插件初始化配置及后端views.py实现数据返回。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

EN，到这个阶段，基本功能算是完成了。

使用了jQuery cxSelect这个插件。

http://code.ciaoca.com/jquery/cxselect/

相关代码如下：

html:

<form class="uk-form" name="filter-form">
    <div id="element_id">
      项目：<select class="Site_name" name="Site_name"></select>
      组件：<select class="App_name" name="App_name"></select>
    　　<a class="filter_btn uk-button" name="filter_btn">过滤</a>
      </div>
 </form>

JS:

$('#element_id').cxSelect({
      url: '/version/filter_app/',
      selects: ['Site_name', 'App_name'],
      jsonName: 'name',
      jsonSub: 'value',
      nodata: 'none'
    });

views.py

def filterAppFromSite(request):
    app_list = []
    site_names = S.objects.all()
    for site_name in site_names:
        app_names = site_name.app_name.all()
        app_dict = {}
        a = []
        for app_name in app_names:
            c = {}
            c['name'] = str(app_name.name)
            a.append(c)
        app_dict['name'] = str(site_name.name)
        app_dict['value'] = a
        app_list.append(app_dict)
    return render_to_json_response(app_list)

实现：

附一段通过MANYTOMANY检索语法：

从发布单倒追组件到项目，然后用ID IN功能检索多少条发布记录：

app_id_list = []
site = S.objects.get(name=self.kwargs['site_name'])
for app in site.app_name.all():
       app_id_list.append(app.id)

return DV.objects.filter(app_name_id__in=app_id_list)