JavaScript uses JSON data to generate a classified information table sorted alphabetically by format

As follows

1.json data format

var _people=[{name: ' Zhu ', url: ' aaaaaa ', Nick: ' Zhu '},{name: ' Liu Guiqing ', url: ' AAAAA ', Nick: ' Liu '}];
Here by last name sort of borrowed Nick, without Nick, you need to load a Chinese pinyin control array to determine the matching

2.javascript Code

1(function ($){2     functionSortbygroup (arr,option) {3          This. option=option;4          This. arr=arr| |[];5     }6Sortbygroup.prototype={7Init:function(){8              This. Sort ();9             return  This. Sortbygroup ( This. Group ());Ten         }, OneSortfunction(){ A             vartag= This. Option.tag; -              This. arr= This. Arr.sort (functioncomparefunction (param1,param2) { -                  returnParam1[tag].localecompare (Param2[tag]); the              }); -         }, -Groupfunction(){ -             varArr=[],count=0, def; +             varchartemp= "-1", temp; -              for(varIinch  This. Arr) { +temp= This. Arr[i]; A                 if(chartemp!==temp[ This. Option.tag].charat (0)){ at                     varOne=[]; - One.push (temp); -arr[count]=One ; -chartemp=temp[ This. Option.tag].charat (0); -count++; -}Else{ inArr[count-1].push (temp); -                 } to             } +             returnarr; -         }, theSortbygroup:function(arr) { *             vartemp; $              for(varI =0;i<arr.length;i++){Panax Notoginsengtemp=Arr[i]; -Temp.sort (functioncomparefunction (param1,param2) { the                     returnparam1[' name '].localecompare (param2[' name ']); +                 }); A             }; the             returnarr; +         } -     }; $     functionRenderpage (arr) { $          This. model=arr; -          This. index=[]; -          This. lastindex= "-1"; the     } -Renderpage.prototype={WuyiInit:function(){ the              -$ ("#container"). HTML ( This. Render ()); Wu$ ("#index"). HTML ( This. Renderindex ()); -              This. Bindevent (); About         }, $GetIndex:function(Nick) { -              This. Index.push (Nick.charat (0). toUpperCase ()); -  -         }, ABindevent:function(){ +$ ("#index a"). MouseOver (function(){ the  -                 vartag=$ ( This). attr ("Data"); $                 if(tag!= "More"){ the$ ("#container. Block"). CSS ("display", "none")); the$ ("#container." +tag). CSS ("Display", "block"); the}Else{ the$ ("#container. Block"). CSS ("Display", "block"); -                 } in                  the             }); the  About  the         }, theRenderfunction(){ the             varStr= ""; +              for(vari=0;i< This. model.length;i++){ -str+= This. Rendergroup ( This. model[i],i); the             }Bayi  the             returnstr; the         }, -Rendergroup:function(arr,num) { -             varStr= "", temp; the              the              for(vari=0;i<arr.length;i++){ the                 if(i==0){ the                      This. GetIndex (Arr[i].nick); -temp= This. Index[num]; the  theStr= ' <div class= "block ' +temp+ '" > the                 }94str+= This. Renderone (Arr[i]); the             } the             if(str) str+= "<div class= ' Clear ' ></div></ul></div>"; the             returnstr;98         }, AboutRenderone:function(one) { -             return' <li><a href= ' ' +one.url+ ' "target=" _blank "> ' +one.name+ ' </a></li> ';101         },102Renderindex:function(){103             varStr= "";104  the              for(varI =0;i< This. index.length;i++){106str=str+ "<a data=" + This. index[i]+ "' >" + This. index[i]+ "</a>";107             }108str+= "<a data= ' more ' >MORE</a>";109             returnstr; the         }111     }; the     NewRenderpage (NewSortbygroup (_people,{tag: ' Nick '}). Init () ). Init ();113}) (JQuery);

3.html page Structure

<!--area 32 (search by Alphabet) Start--><div id= "pd32" class= "w1020" ><div class= "title4" ><span> Search by Alphabet </ Span><p id= "index" class= "index" ></p><div class= "clear" ></div></div><!-- Block--><div id= "container" class= "container" ></div><!--block--></div><!-- Area 32 (search by letter) End---

　　

4.CSS style

#pd32. title4{border-bottom:1px solid #cecece;p adding-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;}

　　

Note: There is also the need to introduce jquery, where the JSON data is introduced at the beginning. The following JS code directly refers to the people variable (relatively low).

JavaScript uses JSON data to generate a classified information table sorted alphabetically by format