django：下拉框二級聯動實現

注意：只列舉核心部分代碼

前台模板：

第一級下拉菜單：

<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)