나는 오랫동안 머리를 긁적이지만 이것에 대한 해결책을 얻지 못했습니다. 트위터 부트 스트랩 테마에서 탐색 메뉴를 재귀 적으로 빌드하기 위해이 함수를 작성했습니다. 당분간은 메뉴 구조를 JSON 객체가 포함 된 목록에 넣었지만 궁극적으로 동적으로 가져옵니다. 이를 수행하는 코드는 다음과 같습니다.
function createMenus() {
//fill the menus in navbar dynamically.
vars={};
vars.title = "RAFinder";
vars.menus = ['Home',
{'Student':['Search Jobs','Sent Applications', 'Find Professors', 'My Profile', 'Test Scores']},
{'Professor':[
{'Research Jobs':['Research Jobs', 'Search RA', 'Sent Applications', 'Find Students', 'Student Profiles', 'Students Past Jobs and Performance', 'My Profile']},
{'Posted Jobs':['Contracts FixedHourly', 'Work Diary', 'Reviewevaluation of students performance']},
{'Messages':['Inbox', 'Sent', 'Archive']},
]},
'About','Contact'
];
//$('#divmain').html('');
for (var i=0;i<vars.menus.length;i++)
populateMenu(vars.menus[i]);
$('title').text(vars.title);
$('.navbar-brand').text(vars.title);
}
보시다시피 구조는 문자열 (메뉴의 경우) 또는 JSON 객체 (추가 반복되는 하위 메뉴의 경우) 일 수있는 항목 목록으로 구성됩니다. 다음은 재귀 적으로이를 수행하는 populateMenu입니다.
function populateMenu(menu, parent='') {
console.log(menu, parent);
tp=type(menu);
if (tp=="string")
{
//Just fill menu.
$('#divmain').append(parent + '::' + menu + '<br>');
addMenuItem(menu, parent, false); //actually add it on bootstrap navbar
}
else if (tp=="object")
{
$('#divmain').append('Length of dict is: ' + Object.keys(menu).length.toString() + '<br>');
k='';
for (var key in menu) //this should ideally be one loop
{
//if (menu.hasOwnProperty(k)) {
// }
console.log('ITERATING::',key);
k = key;
}
//else {$('#divmain').append('notOwnProperty: ' + k);}
//just fill k
$('#divmain').append(parent + '::' + k.toString() + '-><br>');
addMenuItem(k.toString(), parent, true); //actually add it on bootstrap navbar
l = menu[k];
//for(item in l)
for(var i=0;i<l.length;i++)
{
//$('#divmain').append(k + '::' + l[item] + '-><br>');
$('#divmain').append('Now calling populateMenu for dict ' + l[i].toString() + ' and parentIs: ' + k.toString() + '<br>');
populateMenu(l[i], k.toString()); //these are dropdowns
}
}
}
루트 수준 메뉴는 정상적으로 채워져 있습니다 (예 : 홈, 학생, 교수, 정보, 연락처). 학생 하위 메뉴도 괜찮습니다. 문제는 교수 하위 메뉴에 있습니다. 목록에서 "Research Jobs"인 첫 번째 JSON 개체 만 채워집니다. 나머지는 for 루프에서 무시됩니다. 이유를 모르겠습니다.
마지막으로 다음과 같은 방식으로이 문제를 해결했습니다.
function createMenus() {
//fill the menus in navbar dynamically.
vars.menus = ['Home',
{'Student':['Search Jobs','Sent Applications', 'My Profile']},
{'Professor':[
{'Research Jobs':['Search RA', 'Sent Applications', 'Find Students', 'Student Profiles', 'Students Past Jobs and Performance']},
{'Posted Jobs':['Contracts FixedHourly', 'Work Diary', 'Review/Evaluation of students performance']},
{'Messages':['Inbox', 'Sent', 'Archive']},
]},
'About','Contact'
];
buildMenu(vars.menus, $('.navbar-nav'));
}
function buildMenu(arr, parentEl) {
arr.forEach(function(root) {
var li;
var id;
// This is a normal string entry
if ( typeof root === 'string' ) {
id = root;
li = $('<li></li>').html('<a href="' + id + '">' + root + '</a>');
parentEl.append(li);
}
// Or this is an object
else {
// Loop over all the keys
Object.keys(root).forEach(function(child) {
id = removeSpecialChars(child);
istopmenu = parentEl.hasClass('navbar-nav');
li = $('<li class="dropdown' + (istopmenu ? '' : ' dropdown-submenu') + '"></li>').html('<a class="dropdown-toggle" data-toggle="dropdown" href="#" onclick="javascript:createView(\'' + id + '\');" aria-expanded="false">' + child + (istopmenu ? '<span class="caret"></span>' : '') + '</a>');
var ul = $('<ul class="dropdown-menu" role="menu"></ul>');
// Recursively loop over the array elements
buildMenu(root[child], ul);
li.append(ul);
parentEl.append(li);
});
}
});
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다