.py
def getParentMenuList(request):
try:
cursor = connection.cursor()
resultList=[]
cursor.execute("SELECT id,func_name FROM '表名稱' WHERE parent_id IS NULL")
result = cursor.fetchall()
for row in result:
resultList.append(str(row[0])+","+str(row[1]))
return JsonResponse({'parent_menu': resultList})
except:
pass
def get_child_menu_dynamically(request):
parent_id = request.GET.get("parent_id")
try:
cursor = connection.cursor()
resultList = []
cursor.execute(
"SELECT id,func_name FROM '表名稱' WHERE secondary_menu_id=0 and parent_id=%s" % str(
parent_id))
result = cursor.fetchall()
for row in result:
resultList.append(str(row[0]) + "," + str(row[1]) )
return JsonResponse({'child_menu': resultList})
except:
pass
.html
<div class="portlet-body form">
<!-- BEGIN FORM-->
<form class="form-horizontal" id="function-form" method="post">
{% csrf_token %}
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">一級(jí)菜單</label>
<div class="col-md-4">
<select name="sel_class" id="sel_class" style="border: 1px solid cornflowerblue; width: 335px; height: 30px;" onchange="myfunc()">
<option id="selected_option" value="{{ sel_class }}">{{ sel_class }}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">二級(jí)菜單</label>
<div class="col-md-4">
<select name="sel_class1" id="sel_class1" style="border: 1px solid cornflowerblue; width: 335px; height: 30px"></select></div>
<span class="hidden" id="s1" style="color: red;">二級(jí)菜單加載中...</span</div>
<div class="form-group">
<label class="col-md-3 control-label">功能編碼</label>
<div class="col-md-4">
<input type="text" class="form-control input-circle" placeholder="請(qǐng)輸入新的url或置空" name="func_code" id = "func_code"></div> </div>
<div class="form-group">
<label class="col-md-3 control-label">功能名稱</label>
<div class="col-md-4">
<input type="text" class="form-control input-circle" placeholder="請(qǐng)輸入唯一的功能名稱" name="func_name" id="func_name"> </div></div> </div>
<div class="">
<div class="row">
<div class="col-md-offset-3 col-md-9 ">
<button type="submit" class="btn btn-circle green" >提交</button</div></div></div>
</form>
<!-- END FORM-->
</div>
.js
$('#function-form').submit(function(){
$.ajax({
type:"post",
url: "/auth/authmanager/thirdmenu/submit/",
cache: false,
data:$('#function-form').serialize(),
success: function(result){
if (result.code === 1){
alert('操作成功筑舅！');
}
else if (result.code === 2){
alert('功能名稱不能為空！')
}
else if(result.code === 3){
alert('該功能名稱已存在，不能重復(fù)，請(qǐng)重新輸入！')
}
else if (result.code === 4){
alert('此非空url已存在棍辕，不能重復(fù)暮现，請(qǐng)重新輸入！')
}
else if (result.code === 6){
alert('一級(jí)菜單或二級(jí)菜單不能為空楚昭！')
}
else{
alert('操作失敗')
}
},
error: function(){
alert("操作失敗,請(qǐng)聯(lián)系管理員");
}
});
return false
});
$(document).ready(function(){
get_parent_menu();
});
function get_parent_menu(){ //到頁(yè)面后 通過ajax 異步動(dòng)態(tài)生成該父類菜單栖袋。
$.ajax({
type: "get",
url: '/index/get_parent_func',
async: true,
success: function (data) {
data.parent_menu.forEach(function(val,index) {
the_val = data.parent_menu[index].split(',')[0];
the_text = data.parent_menu[index].split(',')[1];
$("#sel_class").append("<option value='"+the_val+"' >"+the_text+"</option>")
})
}
})
}
function myfunc(param) { //根據(jù)父標(biāo)簽的onchange事件，調(diào)用該函數(shù)抚太，發(fā)送ajax請(qǐng)求塘幅，取出相應(yīng)的子菜單數(shù)據(jù)。
var options=$("#sel_class option:selected").val();
$.ajax({
type: "get",
url: '/index/get_child_menu_dynamically?parent_id='+options,
async: true,
cache:true,
beforeSend:function(){
var content = $('#s1');
var menu1_content = $('#sel_class option:selected');
content.removeClass('hidden');
if (menu1_content.val() === ''){
content.addClass('hidden')
}
},
success:function (data) {
//console.log(data.child_menu)
var data_children = data.child_menu;
$('#sel_class1').empty();
data.child_menu.forEach(function (val,index) {
the_name = data.child_menu[index].split(',')[1];
the_val = data.child_menu[index].split(',')[0];
$("#sel_class1").append("<option value='"+the_val+"'>" + the_name + "</option>");
});
},
complete:function () {
var content = $('#s1');
content.addClass('hidden')
}
})
}
異步加載數(shù)據(jù)凭舶，動(dòng)態(tài)追加元素到頁(yè)面晌块，動(dòng)態(tài)生成html標(biāo)簽中的內(nèi)容。
好處：
It just makes the query incrementally rather than pulling the entire data set all at once.
