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

效果图如下

1.json数据格式

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

2.javascript代码

(function ($){
    function SortByGroup(arr,option){
        this.option=option;
        this.arr=arr||[];
    }
    SortByGroup.prototype={
        init:function(){
            this.sort();
            return this.sortByGroup(this.group());
        },
        sort:function(){
            var tag=this.option.tag;
            this.arr=this.arr.sort( function compareFunction(param1,param2){
                 return param1[tag].localeCompare(param2[tag]);
             });
        },
        group:function(){
            var arr=[],count=0,def;
            var charTemp="-1",temp;
            for(var i in this.arr){
                temp=this.arr[i];
                if(charTemp!==temp[this.option.tag].charAt(0)){
                    var one=[];
                    one.push(temp);
                    arr[count]=one;
                    charTemp=temp[this.option.tag].charAt(0);
                    count++;
                }else{
                    arr[count-1].push(temp);
                }
            }
            return arr;
        },
        sortByGroup:function(arr){
            var temp;
            for(var i =0;i<arr.length;i++){
                temp=arr[i];
                temp.sort(function compareFunction(param1,param2){
                    return param1['name'].localeCompare(param2['name']);
                });
            };
            return arr;
        }
    };
    function RenderPage(arr){
        this.model=arr;
        this.index=[];
        this.lastIndex="-1";
    }
    RenderPage.prototype={
        init:function(){
            
            $("#container").html(this.render());
            $("#index").html(this.renderIndex());
            this.bindEvent();
        },
        getIndex:function(nick){
            this.index.push(nick.charAt(0).toUpperCase());

        },
        bindEvent:function(){
            $("#index a").mouseover(function(){

                var tag=$(this).attr("data");
                if(tag!="more"){
                    $("#container .block").css("display","none");
                    $("#container ."+tag).css("display","block");
                }else{
                    $("#container .block").css("display","block");
                }
                
            });


        },
        render:function(){
            var str="";
            for(var i=0;i<this.model.length;i++){
                str+=this.renderGroup(this.model[i],i);
            }

            return str;
        },
        renderGroup:function(arr,num){
            var str="",temp;
            
            for(var i=0;i<arr.length;i++){
                if(i==0){
                    this.getIndex(arr[i].nick);
                    temp=this.index[num];

                    str='<div class="block '+temp+'"><h3>'+temp+'</h3><ul>'
                }
                str+=this.renderOne(arr[i]);
            }
            if(str) str+="<div class='clear'></div></ul></div>";
            return str;
        },
        renderOne:function(one){
            return '<li><a href="'+one.url+'" target="_blank">'+one.name+'</a></li>';
        },
        renderIndex:function(){
            var str="";

            for(var i =0;i<this.index.length;i++){
                str=str+"<a data='"+this.index[i]+"'>"+this.index[i]+"</a>";
            }
            str+="<a data='more'>MORE</a>";
            return str;
        }
    };
    new RenderPage(new SortByGroup(_people,{tag:'nick'}).init()).init();
})(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）。