根據類型動態生成數據 html錨點使用 分頁 待完成
{
"sucess":"true",
"list":
[
{
"id":1,
"type":"common",
"name":"moudule1",
"children":
[
{
"id":2,
"type":"suse",
"name":"attack1",
"children":
[
{
"id":3,
"type":"suse",
"name":"suse1"
},
{
"id":4,
"type":"common",
"name":"公共1"
},
{
"id":5,
"type":"task",
"name":"task1"
},
{
"id":6,
"type":"taoyao",
"name":"taoyao1"
},
{
"id":7,
"type":"dongl",
"name":"dongl1"
}
]
},
{
"id":8,
"type":"common",
"name":"Nan1",
"children":
[
{
"id":9,
"type":"dongl",
"name":"suse2"
},
{
"id":10,
"type":"common",
"name":"公共2"
},
{
"id":11,
"type":"task",
"name":"task2"
},
{
"id":12,
"type":"taoyao",
"name":"taoyao2"
},
{
"id":13,
"type":"dongl",
"name":"dongl2"
}
]
},
{
"id":14,
"type":"suse",
"name":"Red1",
"children":
[
{
"id":15,
"type":"suse",
"name":"suse3"
},
{
"id":16,
"type":"common",
"name":"公共3"
},
{
"id":17,
"type":"task",
"name":"task3"
},
{
"id":18,
"type":"taoyao",
"name":"taoyao3"
},
{
"id":19,
"type":"dongl",
"name":"dongl3"
}
]
}
]
},
{
"id":1,
"type":"common",
"name":"moudule2",
"children":[
{
"id":20,
"type":"taoyao",
"name":"moudule2",
"children":[
{
"id":21,
"type":"moutaoyaodule",
"name":"moudule2"
}
]
}
]
}
]
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/jquerydata.css" />
</head>
<body>
<div class="content">
<!--div內容區-->
</div>
<div class="scrool">
<div class="sideContent">
<ul class="sideContentUl">
<!--list內容區-->
</ul>
</div>
</div>
<div class="button">
<button class="prevbutton" onclick="prev()">上一頁</button>
<button class="nextbutton" onclick="next()">下一頁</button>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="js/jquerydata.js" ></script>
</html>
css
html,body{font-size: 14px;color: #555555;font-family: "微軟雅黑";}
*{padding: 0px;margin: 0px;}
ul,li{list-style: none;}
a{text-decoration: none;}
.content{margin-top: 50px;margin-left: 20px;}
.item{border: 1px solid #bbb;margin-bottom: 20px;width: 50%;padding: 20px;position: relative;}
.title{position: absolute;top: -13px;padding:3px 6px;background: yellow;}
.scrool{position: fixed;top: 100px;right: 180px;border: 1px solid red;width: 180px;height: 250px;overflow: hidden;}
.scrool li{height: 25px;line-height: 25px;background: #eaeaaa;cursor: pointer;}
.scrool li span{display: block;width: 100%;height: 100%;}
/*.scrool li a{display: block;height: 15px;background: red;}*/
.scrool li span.active,.scrool li span:hover{color: blue;background: pink;}
.level1{}
.level2 span{padding-left: 20px;}
.button{position: fixed;top: 100px;right: 80px;}
.button button{display: block;margin: 5px 0px;}
.sideContentUl{position: relative;top: 0px;}
js
$(function(){
//數據渲染
dataFuntion();
});
function dataFuntion(){
$.getJSON("jquerydata.json",function(data){
//異步請求，數據操作必須等數據渲染完成以後
var objList=data.list;
dataJsonFuntion(objList);
//list點擊事件
clickFunction();
});
}
//list點擊事件
function clickFunction(){
$(".sideContentUl li:eq(0)").find("span").addClass("active");
$(".sideContentUl li").click(function(){
$(this).siblings().find("span").removeClass("active");
$(this).find("span").addClass("active");
var id=$(this).data("list");
// location.hash=‘anhor_‘+id;
});
}
//右邊的list數據，左面的div內容數據
function dataJsonFuntion(objList){
var listUl=‘‘;
var divUl=‘‘;
if(objList&&objList.length>0){
for(var i=0;i<objList.length;i++){
var secondArray=objList[i].children;
var firstId=objList[i].id;
var firstName=objList[i].name;
var firstType=objList[i].type;
var secondLi=‘‘;
var thirdLi=‘‘;
if(secondArray&&secondArray.length>0){
for(var j=0;j<secondArray.length;j++){
var secondName=secondArray[j].name;
var secondId=secondArray[j].id;
var thirdArray=secondArray[j].children;
var firstType=secondArray[j].type;
secondLi=‘<li class="level1" data-list="‘+secondId+‘">‘+
‘<span>‘+secondName+‘</span>‘+
// ‘<a href="#anhor_‘+secondId+‘"></a>‘+
‘</li>‘;
listUl+=secondLi;
divUl+=typeData(secondArray[j]);
if(thirdArray&&thirdArray.length){
for(var index=0;index<thirdArray.length;index++){
var thirdName=thirdArray[index].name;
var thirdId=thirdArray[index].id;
thirdLi=‘<li class="level2" data-list="‘+thirdId+‘">‘+
‘<span>‘+thirdName+‘</span>‘+
// ‘<a href="#anhor_‘+thirdId+‘"></a>‘+
‘</li>‘;
listUl+=thirdLi;
divUl+=typeData(thirdArray[index]);
}
}
}
}
}
}
$(".sideContentUl").append($(listUl));
$(".content").append($(divUl));
}
//根據類型來判斷返回哪一種html
function typeData(obj)
{
if(obj.type==‘suse‘){
return ‘<div class="item" data-form="‘+obj.id+‘">‘+
‘<a id="#anhor_‘+obj.id+‘"></a>‘+
‘<div class="title">‘+obj.name+‘</div>‘+
‘<input class="input_common" />suse類型‘+
‘</div>‘;
}
else if(obj.type==‘common‘){
return ‘<div class="item" data-form="‘+obj.id+‘">‘+
‘<a id="#anhor_‘+obj.id+‘"></a>‘+
‘<div class="title">‘+obj.name+‘</div>‘+
‘<input class="input_common" />common類型‘+
‘</div>‘;
}
else if(obj.type==‘task‘){
return ‘<div class="item" data-form="‘+obj.id+‘">‘+
‘<a id="#anhor_‘+obj.id+‘"></a>‘+
‘<div class="title">‘+obj.name+‘</div>‘+
‘<input class="input_common" />task類型‘+
‘</div>‘;
}
else if(obj.type==‘taoyao‘){
return ‘<div class="item" data-form="‘+obj.id+‘">‘+
‘<a id="#anhor_‘+obj.id+‘"></a>‘+
‘<div class="title">‘+obj.name+‘</div>‘+
‘<input class="input_common" />taoyao類型‘+
‘</div>‘;
}
else if(obj.type==‘dongl‘){
return ‘<div class="item" data-form="‘+obj.id+‘">‘+
‘<a id="#anhor_‘+obj.id+‘"></a>‘+
‘<div class="title">‘+obj.name+‘</div>‘+
‘<input class="input_common" />dongl類型‘+
‘</div>‘;
}
}
//上一頁下一頁
var curentIndex=0;
var size=10;
var top=0;
function prev(){
$(".sideContentUl").animate({top:‘0px‘});
}
function next(){
$(".sideContentUl").animate({top:‘-250px‘});
}
根據類型動態生成數據 html錨點使用 分頁 待完成