您现在的位置是:首页 > 学无止境 > Python 网站首页学无止境

Django Admin后台新增文章添加二级联动

在博客开发最终完成阶段,面临了一个问题:在admin新增文章的时候,无论main_category的值是什么,sub_category都是全部可选

然而,main_categorysub_category在设计时是有依赖关系的。


models.py中二者代码关系:

# 主目录
class MainCategory(models.Model):
    name = models.CharField(max_length=8, verbose_name="目录名", unique=True, db_index=True)
    created_at = models.DateTimeField(auto_now_add=True, verbose_name="目录创建时间")

# 副目录
class SubCategory(models.Model):
    father = models.ForeignKey(MainCategory, related_name="subCategory")
    name = models.CharField(max_length=8, verbose_name="目录名", unique=True, db_index=True)
    created_at = models.DateTimeField(auto_now_add=True)

因此, 我的想法是当在admin中有联动效果,sub_category的可选值是根据main_category的值变化的

通过搜索参考了一些js设计二级联动的代码之后,对文章添加修改的模板change_form.html添加一些js代码。(change_form.html位于django/contrib/admin/templates/admin)

以下是代码:


var categories = [
    {
        "m_name": "请选择主目录",
        "m_id": 0,
    },
{
    "m_name": "学无止境",
    "m_id": 1,
    "sub_categories": [
        {
            "c_name": "python",
            "c_id": 1
        },
        {
            "c_name": "Java",
            "c_id": 2
        },
        {
            "c_name": "Django",
            "c_id": 3
        },
        {
            "c_name": "爬虫",
            "c_id": 4
        }
    ]
},
{
    "m_name": "点滴分享",
    "m_id": 2,
    "sub_categories": []

}, { "m_name": "慢生活", "m_id": 3, "sub_categories": [ { "c_name": "趣事", "c_id": 5, }, { "c_name": "段子", "c_id": 6 }, ]

}, ];

window.onload = init; //首次加载页面是初始可选择对象 function init() { //首先获取对象 var main_category = document.getElementById("id_main_category"); main_category.length = 0; var sub_category = document.getElementById("id_sub_category"); sub_category.length = 0; //遍历主目录数据,并把里面主目录的数据追加到option选项中 for (var i=0; i<categories.length; i++) { var option = document.createElement("option"); option.value = categories[i].m_id; option.innerHTML = categories[i].m_name; main_category.appendChild(option); } var t = document.createElement("option"); t.value = 0; t.innerHTML = "请选择子目录"; sub_category.appendChild(t);

  //主目录下拉框发生改变事件
 main_category.onchange = function() {
    //获取当前点击对象的值
    var proid = this.value;
    //console.log(proid);
    var sub_categories;
    //遍历主目录数据,把主目录下点击的那一个选项的值和主目录数据中的
    //主目录级数据对比,如果相等,取出当前的子目录的数据
    for (var i=0; i&amp;lt;categories.length; i++) {
        if (proid == categories[i].m_id) {
            sub_categories = categories[i].sub_categories;
        }
    }
    //获得子目录下拉框对象
    var sub_category = document.getElementById("id_sub_category");
    //每次点击主目录后,子目录初始化,避免高级重复追加
    sub_category.innerHTML = "&amp;lt;option value='none'&amp;gt;请选择子目录&amp;lt;/option&amp;gt;";
    //遍历子目录数据,并取出子目录数据,追加到子目录对象中
    for (var i=0; i&amp;lt;sub_categories.length; i++) {
        var option = document.createElement("option");
        option.innerHTML = sub_categories[i].c_name;
            option.value = sub_categories[i].c_id;
        sub_category.appendChild(option);
    }
  }}


由于js基础薄弱,以上代码参考:

js小例子之二级联动

利用JS实现一个简单的二级联动菜单


版权声明:本文为博主原创文章,转载时请注明来源。https://blog.thinker.ink/passage/3/

 

文章评论

Top