关于select下拉框的实现的两种方法,一种为与前端ajax结合二级联动,一种为利用后台from类方法重写。

方法1 :

models里有Dataroom和Cabinet的类就不用说了。数据库用的是mysql不多做描述。

urls:

    url(r'dataroomselect',dataroomselect),url(r'cabinetselect(\d+)', cabinetselect)

View视图:

from django.http import JsonResponse
#机房select
def dataroomselect(request):dataroomList = Dataroom.objects.all()list1 = []for item in dataroomList:list1.append([item.basemodel_ptr_id,item.DataroomName])print(list1)return JsonResponse({'data': list1 })
#机柜select
def cabinetselect(request,pid):print(pid)cabinetList = Cabinet.objects.filter(DataRoomID=pid)list1 = []for item in cabinetList:list1.append([item.basemodel_ptr_id,item.CabinetName])return JsonResponse({'data': list1})

前端html和jq:

                         <div class="span4 field-box"><label>所属机房:</label><div class="ui-select span4"><select id="dataroomselect"><option value="">请选择机房</option></select></div></div><div class="span4 field-box"><label>所属机柜:</label><div class="ui-select span4"><select id="cabinetselect"><option value="">请选择机柜</option></select></div></div>            

 <script>$(function () {//获取所有机房$.get('/user/dataroomselect', function (dic) {pro = $('#dataroomselect');$.each(dic.data, function (index, item) {pro.append('<option value=' + item[0] + '>' + item[1] + '</option>');})});//获取所选机柜$('#dataroomselect').change(function () {$.get('/user/cabinetselect' + $(this).val(), function (dict) {city = $('#cabinetselect');city.empty().append('<option value="">请选择机柜</option>');$.each(dict.data, function (index, item) {city.append('<option value=' + item[0] + '>' + item[1] + '</option>');})});});})</script>

效果:

方法2 :

models.py,这里做了三个下拉框,其中设备类型是做的定项下拉,机房和机柜数据是动态下拉获取的是数据库中的数据

class ImportForm(forms.Form):Device_type_list = ((1, "服务器"),(2, "网络设备"),(3, "安全设备"),(4, "存储设备"))#固定下拉选项,Device_type为post值,widget为下拉内容,下同。device_type = forms.IntegerField(widget = forms.Select(choices=Device_type_list))#动态不定下拉选项Dataroom_list = forms.IntegerField(widget=forms.Select())def __init__(self,*args,**kwargs):super(ImportForm,self).__init__(*args,**kwargs)#查询数据库获取下拉内容,根据主键basemodel_ptr_id查询获取name字段。并赋值给选项self.fields['Dataroom_list'].widget.choices = Dataroom.objects.all().values_list('basemodel_ptr_id','DataroomName')class CabinetSelect(forms.Form):# 机柜动态不定下拉选项Cabinet_list = forms.IntegerField(widget=forms.Select())def __init__(self, *args, **kwargs):super(CabinetSelect, self).__init__(*args, **kwargs)# 查询数据库获取下拉内容,根据主键basemodel_ptr_id查询获取name字段。并赋值给选项self.fields['Cabinet_list'].widget.choices = Cabinet.objects.all().values_list('basemodel_ptr_id', 'CabinetName')

view.py视图里直接初始化下拉框变量,然后给HTML页面直接调用即可。

def DeviceAdd(request):obj = ImportForm(request.POST)if Dataroom.objects.all() and Cabinet.objects.all():if request.method == "POST" and request.POST:s.DataRoomID = request.POST["Dataroom_list"]s.DataRoom = Dataroom.objects.get(basemodel_ptr_id=s.DataRoomID).DataroomNames.CabinetID = request.POST["Cabinet_list"]s.Cabinetname = Cabinet.objects.get(basemodel_ptr_id=s.CabinetID).CabinetName           return render_to_response("DeviceAdd.html",locals())

html:

<div class="span4 field-box"><label>所属机房:</label><div class="ui-select span4"><p>{{ obj.Dataroom_list }}</p></div>
</div><div class="span4 field-box"><label>机柜号:</label><div class="ui-select span4"><p>{{ cabinetselect.Cabinet_list }}</p></div>
</div>

效果:

很明显。方法1更实用,也更灵活,不过对前端知识有所要求。

转载于:https://www.cnblogs.com/feigerlan/p/9134068.html

Django的cmdb探索与开发(三)相关推荐

  1. 基于Django进行简单的微信开发

    代码地址如下: http://www.demodashi.com/demo/11756.html 一.微信公众号的准备: 1. 注册 访问地址:https://mp.weixin.qq.com/ 按照 ...

  2. 抢饭碗?这位 05 后开发三款小程序!

    整理 | 伍杏玲 出品 | CSDN(ID:CSDNnews) 2017 年 1 月 9 日,微信小程序横空出世.而后,支付宝小程序.百度小程序.12大厂商联盟的快应用等纷纷入局,在短短两年的时间里, ...

  3. WPF触控程序开发(三)——类似IPhone相册的反弹效果

    原文: WPF触控程序开发(三)--类似IPhone相册的反弹效果 用过IPhone的都知道,IPhone相册里,当图片放大到一定程度后,手指一放,会自动缩回,移动图片超出边框后手指一放,图片也会自动 ...

  4. 协调探索和开发能力的改进灰狼优化算法

    文章目录 一.理论基础 1.基本灰狼优化算法 2.改进灰狼优化算法 (1)佳点集种群初始化 (2)非线性控制参数策略 (3)基于个体记忆功能的位置更新公式 二.仿真实验与分析 三.参考文献 一.理论基 ...

  5. Django项目实战——用户投票系统(三)

    Django项目实战--用户投票系统(三) 承接上文 官方文档链接附上: 编写你的第一个 Django 应用,第 3 部分 | Django 文档 | Django (djangoproject.co ...

  6. TVM开发三个示例分析

    TVM开发三个示例分析 把自主生成的代码生成TVM 把自主生成的代码生成TVM 目录 简介 要生成C代码. 要生成任何其它图形表示. 实现一个C代码生成器 实现[CodegenC] 运算符代码生成 输 ...

  7. python开发微信小程序-Django微信小程序后台开发教程的实现

    1 申请小程序,创建hello world小程序 2 添加交互框和按钮 index. wxml cal {{ result }} index.wxss /**index.wxss**/ .input ...

  8. 探索多媒体开发最新最佳实践,我们在深圳等你

    2018年初始,音视频技术生态并不平静,Codec争夺愈加激烈,新一代标准的挑战一浪高过一浪:WebRTC的定版也为打通浏览器.移动端乃至IoT带来了机会:此外AI.区块链技术的兴起,催化着与多媒体领 ...

  9. Eclipse+PyDev+Django+Mysql搭建Python web开发环境

    Eclipse+PyDev+Django+Mysql搭建Python web开发环境 Python的web框架有很多,目前主流的有Django.Tornado.Web.py等,最流行的要属Django ...

  10. SQL2K数据库开发三十之存储过程操作删除存储过程

            1.在要删除的存储过程上右击鼠标,在弹出的菜单中选择"删除"命令.         2.在"除去对象"对话框中显示了即将删除的对象,点击&quo ...

最新文章

  1. 基于bmob的校园资料分享互助平台
  2. SQLite数据库存储
  3. mysql php 变量赋值,mysql变量赋值要注意的_MySQL
  4. 2018年第九届蓝桥杯 - 省赛 - C/C++大学B组 - F.递增三元组
  5. void 型指针的高阶用法,你掌握了吗?
  6. 关于编程思想的一点思考
  7. recv返回的数据过大 易语言_高性能数据传输系统的框架设计
  8. socket编程(六)
  9. Atitit table的类型 表类型目录1. 元数据表 日志表 12. 按照文件结构分为堆组织表(HOT)和索引组织表(IOT) 13. 内存表和文件存储表q 24. 全局表 2
  10. Linux 安装flash
  11. 物联网、RISC-V、OS应用、边缘AI蓄势待发...
  12. C语言程序设计实验报告——实验三
  13. PS中和FW一样的精灵图缩小功能(像素栏输入数字就能缩小
  14. Excel对遗传学质量基因进行卡方分析
  15. python11_python11:函数
  16. 12.21 linux前戏
  17. QEMU虚拟机源码分析概论
  18. 掌握赚钱最快的方法 其实赚钱很有意思 你可以什么都不会
  19. Java笔记-面向对象(上)
  20. gin:结合gorilla实现webSocket

热门文章

  1. Pr 2021快速入门教程,素材的导入与管理
  2. iOS开发之跳转指定的tabbar控制器(二级页面跳转到指定的tabbar页面)
  3. Mac端Java开发分析工具JProfiler 13.0.1
  4. 如何批量更改Mac视频帧速率
  5. Ubuntu E: Sub-process /usr/bin/dpkg returned an error code (1)
  6. 利用子查询解决复杂sql问题
  7. String和StringBuffer与StringBuilder的区别
  8. 金融科技:科技生活化和生活金融化
  9. seci-log 1.06 发布 增加全文搜索
  10. 9, Java NIO SocketChannel