Django学习11 -- Admin页面级联选择

最新推荐文章于 2024-08-12 08:44:02 发布

Rolei_zl

最新推荐文章于 2024-08-12 08:44:02 发布

阅读量3.3k

点赞数 1

分类专栏： My Coding

本文链接：https://blog.csdn.net/u012841352/article/details/102645957

版权

My Coding 专栏收录该内容

66 篇文章 2 订阅

订阅专栏

系统用的越多问题也就越多，用户提出的要求也越多，问题和要求积攒多了总有撑不住的时候，只得重新筛选问题进行维护。
偷懒并不总是能“有效躲避”问题，学习还要继续、继续。。。。。。

问题描述：Admin页面级联选择

解决方案

解决方案1：django-smart-selects -- 《Django学习8 -- 添加个人应用》中提到过这种方法。
应用在python早期版本，python3版本需要对源码进行修改，对数据库设计的级联关系也有要求。 -- 一直未实际应用

解决方案2：使用JS（JQuery，Ajax）对页面数据进行处理
不常用此技术，从网上照抄了代码，照葫芦画瓢，进行修改
参考文档 -- https://blog.csdn.net/lsysafe/article/details/83051352，）

建将并寻找存储字段关联关系，此处使用 project 和 task 进行说明（一个project可以有多个task）
使用django admin后台管理程序生成页面（如下图）：建model -- admin注册 -- admin生成页面 -- view处理页面数据显示逻辑
确认级联关系：当选择 project 时，task 中只显示与 project 相关联的数据

view页面处理数据逻辑

## get task list by select project in page
def gettasks(request):
    if request.method == 'GET':   -- 当project选择值变化时，get到对应的值
                                  -- post方法是否可用？没研究
        project=request.GET.get('selpro')    -- 页面ajax data数据设置
        if project:
            data = list(Task.objects.filter(project=project).values("taskname"))  -- get task by select project                
            return JsonResponse(data, safe=False)

Get方法获取参数，需要对view方法配置对应的URL

    url('gettask/', view.gettasks,name='gettask'), -- 与veiw方法对应

设计页面，此处使用 Admin 框架自带后台管理页面模板 -- 参考 django Templates的使用
* 在Template目录下新建change_form.html页面，对Admin change_from.html进行扩展（为了方便管理建将了对应的application目录）
* 扩展 after_field_sets模块，在页面初始化模块完成后、操作页面元素时对操作和数据进行处理
* 获取页面元素ID（与实际models中设置相关）：project -- id_project， task -- id_task
* html页面处理

{% extends "admin/change_form.html" %}  -- 扩展原有页面，django Template灵活性体现
{% load i18n admin_urls static admin_modify %}

{% block after_field_sets %}  -- 扩展对应模块；
                              -- 是否可以在其他模块处理，同样可以对页面进行处理，未做尝试
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 <script type="text/javascript">

    $("#id_project").change(function() {   -- 在project选项变化时触发方法
      var selpro = $(this).val();
         {#alert(selpro);#}

      $.ajax({
        url: '/gettask/',              -- 使用get方法设置变化的project URL串；照抄，原理不明
            data:{"selpro":selpro},    -- 获取选中的project；此处与veiw中get方法一致
         type: 'GET',                  -- POST?
         dataType: 'json',
         success: function (data) {    -- 获取数据成功对显示内容进行处理
            var content='';
             $.each(data, function(i, item){
                  content+='<option value='+item.taskname+'>'+item.taskname+'</option>';
                                       -- 生成Task数据为{key:value}字典
                });
            $('#id_task').html(content) -- 显示task到对应的元素ID；照抄，原理不明
        },
      })
	   .fail(function(){              -- 处理异常，当选择无效时显示；error呢？
            var content='';
            content+='<option value= task> --------- </option>';
            $('#id_task').html(content)
		  });
    });
</script>
{% endblock %}

问题回顾：从最初设计系统开始，这个问题应一直存在，一直以不会、不熟悉拖延着。后来使用时总是出现对应关联关系选择错误的情况，使用者反应“很不满意”，而后台修改错误的工作量越来越大，不得已才查看帮助、参考文档进行修改。

后续工作：

补充知识 JS(JQuery, Ajax)，https://api.jquery.com/jquery.ajax/ -- 估计还要看使用者反馈，要不要偷懒；
页面出错或刷新后project/task如何响应，扩展哪个block；

知识扩展：模版继承 -- 待续

{% extends “template_name” %}

{% extends "base.html"%}     -- extend parent template
{% block title %}            -- extend block

{{ block.super }}            -- override or overwrite or cover parent template  
 
{% endblock %}               -- end extend