0
大家好, 請在下面的代碼中找到json數據解析throgh jquery多級別的子類別。 目前有3個子類別,我想要一個關於腳本的建議,我們如何使它能夠顯示子類別的動態腳本。使用json和jquery顯示一個類別的子類別
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$('#expList').find('li:has(ul)')
.click(function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button funtionality
$('#expandList')
.unbind('click')
.click(function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click(function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
/**************************************************************/
/* Functions to execute on loading the document */
/**************************************************************/
$(document).ready(function() {
var myJSONCategories ={"categories":[{"ic_id":"100002","ic_disp_val":"Campaigns","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"Campaigns sub categorist","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]},{"ic_id":"100002","ic_disp_val":"Products","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"cxtest","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]},{"ic_id":"100002","ic_disp_val":"Campaigns/Products","ic_sub":1,"ic_sub_categories":[{"ic_id":"100021","ic_disp_val":"cxtest","ic_sub":1,"ic_sub_categories":[{"ic_id":"100118","ic_disp_val":"camp 1","ic_sub":0},{"ic_id":"100119","ic_disp_val":"camp 2","ic_sub":0},{"ic_id":"100120","ic_disp_val":"camp 3","ic_sub":0}]}]}]};
var htmlBuilder='';
$.each(myJSONCategories.categories, function(inx, content) {
if(inx==0)
{
htmlBuilder +='<li>'+content.ic_disp_val;
}else{
htmlBuilder +='<li>'+content.ic_disp_val;
}
if (content.ic_sub==1)
{
$.each(content.ic_sub_categories, function(inx1, cnt_sub1)
{
len1=content.ic_sub_categories.length-1;
if(inx1==0)
{
htmlBuilder += '<ul><li>'+cnt_sub1.ic_disp_val;
}else
{
htmlBuilder += '</li><li>'+cnt_sub1.ic_disp_val;
}
if (cnt_sub1.ic_sub==1)
{
$.each(cnt_sub1.ic_sub_categories, function(inx2, cnt_sub2)
{
len2=cnt_sub1.ic_sub_categories.length-1;
if(inx2==0)
{
htmlBuilder += '<ul><li>'+cnt_sub2.ic_disp_val;
}else
{
htmlBuilder += '</li><li>'+cnt_sub2.ic_disp_val;
}
if(inx2==len2)
{
htmlBuilder +='</li></ul>';
}
});
}
if(inx1==len1)
{
htmlBuilder +='</li></ul>';
}
});
}
htmlBuilder +='</li>'; //Categories End
});
$("#expList").html(htmlBuilder);
prepareList();
});
HTML代碼
<ul id="expList">
</ul>
什麼樣的動態腳本...請建議 –
由於我們提供了json中的多級別類別和子類別,腳本必須自動解析,請參閱上面的代碼我已經添加了3級子類別,但它會'n'個子類別。 – Manjunatha
請找到下面的鏈接工作腳本http://jsfiddle.net/uqgd07kp/現在我想使它動態加載類別和子類別! – Manjunatha