我的数据结构如下:
Forum
Topic
Post
Subscriptions
Polls
Members
Email
等等。实际上,可以有无限数量的孩子。我想在页面加载时创建一个jquery ajax调用,以获取最外层的父项。然后,当我选择父母时,另一个ajax调用触发,让这个父母的子女在另一个中选择是否存在。然后,如果我点击那个孩子,另一个ajax调用会触发,获取所选孩子的孩子,依此类推。然后,当我点击不同的父级时,所有选择的前一个父级消息。
我如何编码?
到目前为止,我有这个:(parent_id = 0表示:得到最外面的父母)
$.ajax({
method: 'get',
url: 'ajaxLoad.php?action=manage-permissions&mod=_get-entities&parent_id=0',
success: function (response){
$("#entities").html(response);
}
});
//The below line does not work because the call is asynchronous and i prefer to keep it that way as its recommended
$(".parent_select").change(function(){
alert("Chose");
});
更新1:
我已经重构了代码,所以看起来像这样:
var visible_entities = [];
var active_entity = 0;
function myCallback(result)
{
if (result != "no_children")
{
$("#entities").append(result);
}
$(".parent_select").change(function(){
visible_entities.push( $(this).attr('rel') );
foo(myCallback,$(this).val());
for (i=0; i <= visible_entities.length; i++)
{
}
active_entity = $(this).val();
});
}
function foo(callback,id)
{
$.ajax({
method: 'get',
url: 'ajaxLoad.php?action=manage-permissions&mod=_get-entities&parent_id='+id,
success: myCallback
});
}
foo(myCallback,0);
现在我让每个孩子都进入一个新的选择标签。但是当我换到另一个父母时,选择会成倍增长而且仍然不会消失。
答案 0 :(得分:1)
我试图理解你的问题,所以我找到了一个解决方案,当然,因为我没有客户端,我用对象客户端模拟它。
var JSONSampleMenu = {
'Forum': {'Topic': {'Post': null}, 'Subscriptions': null, 'Polls': null},
'Members': {'Email': null}
};
var urlSample = URL.createObjectURL(new Blob([JSON.stringify(JSONSampleMenu, undefined, 4)], {type: 'application/json'}));
function myCallback(result, obj) {
var mySubMenu = '<ul>';
$.each(result, function(index, element) {
mySubMenu += '<li class="menuItem">' + index + '</li>';
});
mySubMenu += '</ul>'
obj.append(mySubMenu);
}
function getObject(response, menuName) {
for(o in response) {
if (o == menuName) {
if (response[menuName])
return response[menuName];
else
return null;
}
}
for(o in response) {
if (o != null) {
var obj = getObject(response[o], menuName);
if (obj != null) {
return obj;
}
}
}
return null;
}
function toggleMenu(e, afterCreate) {
var obj = $(e.target);
if (obj.parent().attr('id') == 'menu') {
if (afterCreate) {
obj.siblings().children().toggle();
} else {
obj.children().toggle();
obj.siblings().children().toggle();
}
} else {
if (!afterCreate) {
obj.children().toggle();
}
}
}
$(function () {
$(document).on('click', ".menuItem", function(e){
e.stopImmediatePropagation();
var obj = $(this);
if (obj.children().length == 0) {
var menuName = this.innerText;
var menuDepth = obj.parents('#menu');
$.ajax({
method: 'get',
url: urlSample,
success: function (response) {
var menuObj = getObject(response, menuName);
if (menuObj != null) {
myCallback(menuObj, obj);
toggleMenu(e, true);
}
}
});
} else {
toggleMenu(e, false);
}
});
});
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<ul id="menu">
<li class="menuItem">Forum</li>
<li class="menuItem">Members</li>
</ul>