使用JQuery动态编写带有JSON的手风琴菜单.NET

Question

我用HTML/jQuery编写了一个手风琴式菜单。我使用JSON将信息动态加载到手风琴中。问题是，我最初的JSON是用一种特定的格式编写的——我理解并知道如何通过jQuery访问这种格式。

我开始使用JSON。NET将我的数据序列化为JSON对象(简单有效)。举个例子：

以前的JSON格式(这是硬编码的)：

{
"Country": [
{
"CountryName": "exampleCountry",
"Region": [
{
"RegionName": "exampleRegion",
"SubRegion": [
{
"SubRegionName": "exampleSubRegion"
}
]
}
]
}
]
}

JSON。NET输出格式(从数据库检索)：

[
{
"Country": "exampleCountry",
"Region": "exampleRegion",
"SubRegion": "exampleRegion"
}
]

我的手风琴应该看起来像：

---Country---
---exampleCountry1---
---exampleRegion1---
---exampleRegion2---
---exampleRegion3---
---exampleSubRegion1---
---exampleSubRegion2---
---exampleSubRegion3---
---exampleCountry2---
---exampleCountry3---

这是我用来返回原始JSON文件中的值的jQuery：

$.getJSON('example.json', function (cwData) {
$.each(cwData.Country, function (i, country) { // loop through all the countries
var countries = '<li class="country_name"><a href="#">' + country.CountryName + '</a></li>'; // the name of the country
var country_region = '<ul class="country_region">'; // create a list of all the regions in the country
$.each(Country.Region, function (i, region) { // loop through all the regions
country_region += '<li class="region_name"><a href="#">' + region.RegionName + '</a></li>'; // the name of the region
var region_subregion = '<ul class="region_subregion">'; // create a list of all the subregions in the region
$.each(Region.SubRegion, function (i, subregion) { // loop through all the regions
region_subregion += '<li class="subregion_name"><a href="#">' + subregion.SubRegionName + '</a></li>'; // the name of the subregion
});
region_subregion += '</u>'; //close the list tags
$(region_subregion).appendTo(country_region); // append the subregion to the region
});
country_region += '</ul>'; //close the list tags
$(countries).appendTo('#accordion_menu').append(country_region); // append the region to the country and append the country to the accorion menu
});
});

我添加了尽可能多的评论，以使内容更加可读/易懂。正如您可能已经注意到的，以前的JSON有更多的"层次"结构，而新的JSON有更"扁平"的结构。

是否可以访问和操作JSON。NET使用jQuery动态构建手风琴？如果是这样，我该怎么做？解决方案是改变我将数据存储到序列化对象中的方式吗？

Answer 1

当然，可以使用客户端的AJAX调用从服务器获取手风琴的片段，然后动态更新UI。但要做到这一点，你几乎必须改变你的代码现在的工作方式：

• 您必须编写一个服务器端API，以便只检索您想要的部分
• 您可能需要更改数据库查询才能使用API
• 当用户单击手风琴时，您必须更改UI/jQuery代码才能进行调用
• UI的响应速度将低于预先拥有所有数据的情况

由于您的UI代码已经使用分层结构，我认为更好的解决方案是让您的服务器将平面子区域列表转换为UI期望的分层格式。