注意:只列举核心部分代码

前台模板:

第一级下拉菜单:

<div class="col-sm-4">
  <select data-placeholder="选择项目..." class="form-control" name="project_id" id="db_link" required="required">
    <option value="">请选择数据库连接</option>
    {% for item in res %}
    <option value="{{ item.id }}" hassubinfo="true">{{ item.link_name }}</option>
    {% endfor %}
  </select> </div>

第二级下拉菜单:

<div class="col-sm-4">
  <select data-placeholder="选择基础表." class="form-control" name="project_id" id="db_table" required="required">
  // 这里放置回调函数渲染的内容
  </select>
</div>

对应js:

<script>
$("#db_link").change(function() {
var options=$("#db_link option:selected"); //获取选中的项
var db_link_id = options.val(); //获取选中的值
{#alert("ok");#}
alert(db_link_id); // 选择id=db_link的元素时触发该ajax请求,调用/comparison/get_table接口
$.ajax({
url: '/comparison/get_table',
data: {"db_link_id": db_link_id},
type: 'GET',
dataType: 'json',
success: function (data) {
var content='';
{#alert(123456);#}
$.each(data, function(i, item){
// 调用接口后返回list数据[u'account_role', u'account_user'],循环遍历该list拼接选项的内容
content+='<option value='+item+'>'+item+'</option>'
});
// 将拼接好的内容作为id=db_table这个select元素的内容
$('#db_table').html(content)
},
}) })
</script>

视图函数:

def get_table(request):
"""
当选择数据库连接时,联动查询出该库的表,供下拉选择
:return:
"""
if request.method == 'GET':
# 获得前台传递来的id,查询对应的数据库连接信息
db_link_id = request.GET.get('db_link_id')
print '从前台获得的id为:%s' % db_link_id
# 获取数据库类型和数据库名称
db_link_info = LinkDBInfo.objects.get(id=db_link_id)
# 当使用model_to_dict时orm只能是get,不能是filter
db_link_info_dict = model_to_dict(db_link_info)
print db_link_info_dict
# 根据不同数据库类型选择不同的连接库方式
if db_link_info_dict['type'] == 'mysql': conn = pymysql.connect(db_link_info_dict['host'], db_link_info_dict['db_username'], db_link_info_dict['db_pwd'], db_link_info_dict['db_name'], charset='utf8')
cursor = conn.cursor()
# db_name = "select db_name from comparison_linkdbinfo where id='%s'" % db_link_id
# print db_name
# 查询该库中的所有表
get_all_table_sql = "select table_name from information_schema.tables where table_schema= '%s'" % db_link_info_dict['db_name']
cursor.execute(get_all_table_sql)
data = list(cursor.fetchall())
print data
table_list = []
for i in data:
table_list.append(i[0])
# print data_list
print table_list
return JsonResponse(table_list, safe=False)

django:下拉框二级联动实现的更多相关文章

  1. C# MVC LayUI实现下拉框二级联动

    一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...

  2. asp 下拉框二级联动

    <script language = "JavaScript"> //js开始 var aaa;//定义aaa变量 aaa=0;//aaa赋0 bb = new Arr ...

  3. js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  4. ASP.NET——实现两个下拉框动态联动

    引入: 在网页中,我们经常会遇到下图中的情况.首先在下拉框中选择所在的省,选择之后,第二个下拉框会自动加载出该省中的市.这样设计极大的方便了用户的查找.那这是如何实现的呢? 1.建立数据库 " ...

  5. 通过创建元素从而实现三个下拉框的联动效果(create.Element("option"))和提交表单时的验证p.match("请选择")

    <html> <head> <meta charset="utf-8"> <title>下拉框</title> < ...

  6. Excel下拉选项二级联动

    在日常工作中,难免遇到操作excel的时候,二级联动下拉选项多用于像地市区县的应用场景 1)先把要联动的内容准备好,把它放到第二个sheet页中 2)操作级联的文本 全部选中之后,Ctrl+G -- ...

  7. WebForm使用AngularJS实现下拉框多级联动

    数据准备 ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,                                             CateId = ,        ...

  8. 下拉框多级联动辅助js,优化您的下拉框

    function IniteSelect(options) { $("body").IniteSelect(options) } (function ($) { $.fn.Init ...

  9. vue 获取数据联动下拉框select ,并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误

    公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...

随机推荐

  1. Alpha冲刺(6/10)——2019.4.29

    所属课程 软件工程1916|W(福州大学) 作业要求 Alpha冲刺(6/10)--2019.4.29 团队名称 待就业六人组 1.团队信息 团队名称:待就业六人组 团队描述:同舟共济扬帆起,乘风破浪 ...

  2. 最新NetMonitor代码

    <Window x:Class="NetMonitor.MainWindow" xmlns="http://schemas.microsoft.com/winfx/ ...

  3. Python开发应用之-SQL 建索引的几大原则

       SQL 建索引的几大原则: 最左前缀匹配原则,非常重要的原则,mysql会一直向右匹配直到遇到范围查询(>.<.between.like)就停止匹配,比如a = 1 and b = ...

  4. danci5

    foss community 自由软体社区 可理解为开源 program 英 ['prəʊɡræm] 美 ['proɡræm] n. 程序:计划:大纲 vt. 用程序指令:为…制订计划:为…安排节目 ...

  5. 前端性能----页面渲染(DOM)

    CSS会阻塞渲染树的构建,不阻塞DOM构建,但是在CSSOM构建完成之前,页面不会开始渲染(一片空白),CSSOM构建完成后,页面将会显示出内容. DOM(Document Object Model) ...

  6. SQL操作Spark SQL--BasicSQLTestt

    object BasicSQLTest { def main(args: Array[String]): Unit = { val spark = SparkSession .builder() .a ...

  7. LeetCode 446. Arithmetic Slices II - Subsequence

    原题链接在这里:https://leetcode.com/problems/arithmetic-slices-ii-subsequence/ 题目: A sequence of numbers is ...

  8. Tensorflow可视化-P295-Tensorboard可视化

    各模块含义 1>表示一个Batch的大小是不确定的 2>当两个节点之间传输的张量多与1时,可视化效果图将只显示张量的个数 3>效果图上的粗细表示两个节点之间传输的标量维度的总大小,而 ...

  9. P4848 崂山白花蛇草水

    题意:支持修改的矩形第 \(k\) 大. 题解:动态开点权值线段树 套 Kd-tree. 然后也没什么难的但就是写不对...调了两天才调出来然后发现跑的巨慢,于是又%了一发Claris'题解,跑的真快 ...

  10. H5视频播放小结(video.js不好用!!!)

    近期在做一个H5的视频课堂,遇到了H5播放的需求,因为原生的video的样式不太理想,尤其是封面无法压住控制条,这就需要我们自定义播放控件. 于是,找了很近的插件,找到了用户比较多的video.js插 ...