javascript通过json数据按格式生成一个按字母分类排序的分类信息表

效果图如下

1.json数据格式

var _people=[{name:‘朱瑞‘,url:‘aaaaaa‘,nick:‘zhu‘},{name:‘刘桂清‘,url:‘aaaaa‘,nick:‘liu‘}];这里按姓氏排序借用了nick，不用nick的话，需要加载一个汉字拼音对照数组，判断匹配

2.javascript代码

  1 (function ($){
  2     function SortByGroup(arr,option){
  3         this.option=option;
  4         this.arr=arr||[];
  5     }
  6     SortByGroup.prototype={
  7         init:function(){
  8             this.sort();
  9             return this.sortByGroup(this.group());
 10         },
 11         sort:function(){
 12             var tag=this.option.tag;
 13             this.arr=this.arr.sort( function compareFunction(param1,param2){
 14                  return param1[tag].localeCompare(param2[tag]);
 15              });
 16         },
 17         group:function(){
 18             var arr=[],count=0,def;
 19             var charTemp="-1",temp;
 20             for(var i in this.arr){
 21                 temp=this.arr[i];
 22                 if(charTemp!==temp[this.option.tag].charAt(0)){
 23                     var one=[];
 24                     one.push(temp);
 25                     arr[count]=one;
 26                     charTemp=temp[this.option.tag].charAt(0);
 27                     count++;
 28                 }else{
 29                     arr[count-1].push(temp);
 30                 }
 31             }
 32             return arr;
 33         },
 34         sortByGroup:function(arr){
 35             var temp;
 36             for(var i =0;i<arr.length;i++){
 37                 temp=arr[i];
 38                 temp.sort(function compareFunction(param1,param2){
 39                     return param1[‘name‘].localeCompare(param2[‘name‘]);
 40                 });
 41             };
 42             return arr;
 43         }
 44     };
 45     function RenderPage(arr){
 46         this.model=arr;
 47         this.index=[];
 48         this.lastIndex="-1";
 49     }
 50     RenderPage.prototype={
 51         init:function(){
 52
 53             $("#container").html(this.render());
 54             $("#index").html(this.renderIndex());
 55             this.bindEvent();
 56         },
 57         getIndex:function(nick){
 58             this.index.push(nick.charAt(0).toUpperCase());
 59
 60         },
 61         bindEvent:function(){
 62             $("#index a").mouseover(function(){
 63
 64                 var tag=$(this).attr("data");
 65                 if(tag!="more"){
 66                     $("#container .block").css("display","none");
 67                     $("#container ."+tag).css("display","block");
 68                 }else{
 69                     $("#container .block").css("display","block");
 70                 }
 71
 72             });
 73
 74
 75         },
 76         render:function(){
 77             var str="";
 78             for(var i=0;i<this.model.length;i++){
 79                 str+=this.renderGroup(this.model[i],i);
 80             }
 81
 82             return str;
 83         },
 84         renderGroup:function(arr,num){
 85             var str="",temp;
 86
 87             for(var i=0;i<arr.length;i++){
 88                 if(i==0){
 89                     this.getIndex(arr[i].nick);
 90                     temp=this.index[num];
 91
 92                     str=‘<div class="block ‘+temp+‘"><h3>‘+temp+‘</h3><ul>‘
 93                 }
 94                 str+=this.renderOne(arr[i]);
 95             }
 96             if(str) str+="<div class=‘clear‘></div></ul></div>";
 97             return str;
 98         },
 99         renderOne:function(one){
100             return ‘<li><a href="‘+one.url+‘" target="_blank">‘+one.name+‘</a></li>‘;
101         },
102         renderIndex:function(){
103             var str="";
104
105             for(var i =0;i<this.index.length;i++){
106                 str=str+"<a data=‘"+this.index[i]+"‘>"+this.index[i]+"</a>";
107             }
108             str+="<a data=‘more‘>MORE</a>";
109             return str;
110         }
111     };
112     new RenderPage(new SortByGroup(_people,{tag:‘nick‘}).init()).init();
113 })(jQuery);

3.html页面结构

<!-- 区域32（按字母检索）Start -->
<div id="pd32" class="w1020">
	<div class="title4">
		<span>按字母搜索</span>
		<p id="index" class="index"></p>
		<div class="clear"></div>
	</div>
	<!--block-->
	<div id="container" class="container">

	</div>
	<!--block-->
</div>
<!-- 区域32（按字母检索）End -->

4.css样式

#pd32 .title4{
	border-bottom:1px solid #cecece;
	padding-bottom:10px;
}

#pd32 .title4 p{
	float:right;
}

#pd32 .title4 p a{
	background:none;
	padding:0px;
	float:none;
	color:#d26213;
	font-family:"Microsoft Yahei","????";
	font-size:22px;
	cursor:pointer;
	margin-left:12px;
}

#pd32 .block{
	margin-top:15px;
}

#pd32 .block h3{
	border-bottom:1px dotted #cfcfcf;
	font-size:30px;
	font-family:"Arial","Microsoft Yahei","????";
	color:#000;
	height:40px;
	line-height:40px;
	padding-bottom:5px;
	margin-bottom:8px;
}

#pd32 .block ul{
	zoom:1;
}

#pd32 .block li{
	float:left;
	display:inline;
	width:102px;
	height:30px;
	line-height:30px;
	overflow:hidden;
	font-size:16px;
	font-family:"Microsoft Yahei","????";
}

#pd32 .block li a{
	color:#000;
}

注：另外需要引入jquery，这里的json数据是在开始就引入的。后面的js代码直接引用了people这个变量（比较low）。