前一阵子去一个公司面试,人家让我从一个网址上获取json,并且生成对应的折叠样式。
但是当时花了一下午时间都没有完成,后来面试果断黑了。
之后自己又花时间把这道题做出来。发现确实有很多实用的地方,所以发上来,使自己记得。
json数据的格式如下图:
ParentID是父结点,NewsSortID是当前结点,根结点为0
首先,要先从给出的网址上获取到json数据,化码如下
public partial class index : System.Web.UI.Page
{
private string pageUrl = "";
public string shuju;
protected void Page_Load(object sender, EventArgs e)
{
pageUrl = "";//这里是json的网址
WebRequest wrequest = WebRequest.Create(pageUrl);
WebResponse wresponse = wrequest.GetResponse();
Stream resStream = wresponse.GetResponseStream();
StreamReader sr = new StreamReader(resStream, Encoding.UTF8);
//通过utf-8的格式获取网页的数据
shuju = sr.ReadToEnd();
resStream.Close();
sr.Close();
}
}
通过使用WebRequest来获取到了json数据。
然后把数据传到前台,来使用js进行操作
<script>
var a = '<%=shuju%>';
var data = eval('(' + a + ')');//转换json格式
var parentid = 0;
var gen = document.getElementById("main");//确定插入地点
chuangjian(data,parentid,gen);//主要实现函数
</script>
下面是主要实现函数,使用迭代实现。
1 <script src="/jquery-1.11.1.min.js"></script> 2 <script> 3 function chuangjian(data, parentid, gen) 4 { 5 for (var i = 0; i < data.length ; i++) { 6 if (data[i].ParentID == parentid) { 7 var br1 = document.createElement("br"); 8 gen.appendChild(br1); 9 var para = document.createElement("span"); 10 var node = document.createTextNode(data[i].Name); 11 para.id = data[i].NewsSortID; 12 var img1 = document.createElement("img"); 13 img1.id = data[i].NewsSortID + ",img"; 14 if (data[i].NewsSortID > 10) { 15 img1.src = "1.png"; 16 } 17 else 18 { 19 img1.src = "2.png"; 20 } 21 img1.onclick = function (img1) { 22 var spanid1 = img1.srcElement.getAttribute("id"); 23 var shuzu1 = spanid1.split(','); 24 var spanid = shuzu1[0]; 25 var spanparent = document.getElementById(spanid); 26 if (img1.srcElement.getAttribute("src") == "1.png") { 27 img1.srcElement.setAttribute("src", "2.png"); 28 bianli(data, spanid, spanparent); 29 } 30 else { 31 img1.srcElement.setAttribute("src", "1.png"); 32 var childList = spanparent.childNodes; 33 var len = childList.length; 34 for (var j = 1; j < len ; j++) { 35 //childList[j].setAttribute("hidden", "true") 36 $(childList[j]).fadeOut("slow"); 37 //spanparent.removeChild(childList[j]); 38 } 39 } 40 }; 41 if (data[i].NewsSortID > 10) { 42 img1.style.marginLeft = "100px"; 43 } 44 para.appendChild(node); 45 gen.appendChild(img1); 46 gen.appendChild(para); 47 chuangjian(data,data[i].NewsSortID,para); 48 } 49 } 50 } 51 function bianli(data, parentid, gen) { 52 var childList = gen.childNodes; 53 var len = childList.length; 54 for (var j = 1; j < len ; j++) { 55 //childList[j].setAttribute("hidden", "true") 56 $(childList[j]).fadeIn("slow"); 57 //spanparent.removeChild(childList[j]); 58 } 59 } 60 </script>