很多时候，我们会遇到这种需求，通过一个select框中选择的值，去动态的加载另一个下拉框中的内容
对于前端的同学来讲，这个本应该是一个很简单的需求，获取第一个下拉框的值然后通过ajax去动态加载即可。
在xadmin中，我们可以通过自定义一个插件来完成这个需求
1）按照我们之前说的xadmin自定义插件的步骤，首先，在xadmin--->plugins下面新建插件文件 linkageFilter.py
import xadmin
from xadmin.views import BaseAdminPlugin
from xadmin.views.detail import DetailAdminView
from xadmin.views.edit import CreateAdminView
"""
此插件用于实现二级联动查询
""" class LinkageFilter(BaseAdminPlugin):
is_execute = False def init_request(self, *args, **kwargs):
return bool(self.is_execute) def get_context(self, context):
return context def get_media(self, media):
path = self.request.get_full_path()
current_uri = '{scheme}://{host}'.format(scheme=self.request.scheme, host=self.request.get_host()) if "add" in path or "update" in path:
media = media + self.vendor('xadmin.self.select.js')
return media xadmin.site.register_plugin(LinkageFilter,CreateAdminView)
2）将此插件名称添加到xadmin-->plugins--->__init__.py文件中的 PLUGINS 中
3）然后在我们需要加载插件的界面Admin options中设置属性 is_execute= True
class postsAdmin(object):
is_execute = True
... ...
4）编写js
在xadmin--->static--->xadmin--->js--->xadmin.self.select.js中：
/*自定义js, 用于xadmin edit界面二级联动查询*/
(function($) {
function linkage_query() {
$("#id_navi_f").change(function (e) {
var val = $(this).val();
var url = "/forum_navi/?fid=" + val;
getSecNavi(url, "id_navi_s");
});
function getSecNavi(url, id) {
$.ajax({
type: "get",
url: url,
async: true,
beforeSend: function (xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", $.getCookie("csrftoken"));
},
success: function (data) {
console.log(data);
$('#'+id)[0].selectize.clearOptions(); //二级select清空选项
for (var i = 0; i < data.length; i++) {
$('#'+id)[0].selectize.addOption({text: data[i].name, value: data[i].id, $order: i + 1}); //添加数据
}
},
error: function (xhr, textStatus) {
console.log(xhr);
console.log(textStatus);
}
})
}
}
linkage_query();
})(jQuery);