项目场景:
最近在用django自带的后台管理站点实现CRM系统的实现,虽然自带的管理页面中,对于foreignkey字段,系统会识别成一个下拉框,如下图所示 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200904103914662.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyNzc1Ng==,size_16,color_FFFFFF,t_70#pic_center)问题描述:
所以问题来了,如果我的下拉项很多怎么办?一个个看着选肯定不现实,所以就萌生了个想法,能不能加个搜索框,可以搜索选项呢?然后去翻了下django官网,发现在django2.0版本后,提供了一个名为“autocomplete_fields”的属性,
说白了就是在下拉框增加个搜索框,效果如下:
每当点击下拉框展开选项时或者输入关键字搜索时,都会请求后台拿到数据然后展示出来,对于一般的不需要根据其他内容去决定显示哪些选项的,这个属性是个不错的选择
但如果我有两个foriegnkey字段,第二个字段需要根据第一个字段所选的选项决定显示哪些选项,那么autocomplete_fields这个属性就有点力不从心了,所以我决定放弃他,另寻出路
@Override
public void run() {
bytes = mmInStream.read(buffer);
mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();
}
分析:
我们从官网的描述可以看到,其实这个属性是用了“select2”这个插件,那么,就在想能不能不要django自带的autocomplete_fields属性,自己将这个插件添加进去,然后实现级联的效果呢?结果是可以的解决方案:
我的CRM系统有一个模型BO_Record,里面有两个foreignkey字段customerName ,contacterNameclass BO_Record(models.Model):
customerName = models.ForeignKey(customers,on_delete=models.DO_NOTHING,verbose_name="客户名称")
contacterName = models.ForeignKey(contacts,on_delete=models.DO_NOTHING,verbose_name="联系人名称")
然后重写html模板(具体怎么重写,可以百度或者私聊交流下),加入select2的插件
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<script>
function formatState (state) {
var customerName_val = $('#id_customerName').select2("data")[0].text //获取选项的值
if(state.text.indexOf(customerName_val) !== -1){
return state.text
}
}
<--! 初始化下拉框,其中,组件的id要自行改过来-->
$(document).ready(function(){
var selectorx = $('#id_customerName').select2({
placeholder: '请选择'
});
var selectorx2 = $('#id_contacterName').select2({
templateResult: formatState, // 控制下拉框显示哪些选项
placeholder: '请选择'
});
});
</script>
可以看到,在第二个select中添加了个templateResult参数,参数后接了个formatState 函数,formatState函数的作用就是根据第一个下拉框选中的项,在第二个下拉框中将不符合的选项隐藏掉,所以最终出来的效果是这样的
代码和描述可能有点简略,如果有不明白,可以随时私聊,一起交流