DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> Javascript中實現JSON數組多鍵值排序
Javascript中實現JSON數組多鍵值排序
編輯:JavaScript綜合知識     

   ①首先在後台使用C#獲取數據庫中的菜單數據,生成一個包含菜單數據項的JSON數組(由於某種原因沒有使用SQL中的ORDER BY),如下:

 

  view sourceprint?var menuData1=[

{"orderid":-10,"text":"主頁","title":"個人網站主頁","url":"Default.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":10,"text":"個人新聞","title":"個人新聞","url":"News.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":5,"text":"發表論文","title":"發表論文","url":"Paper.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":2,"text":"出版專著","title":"出版專著","url":"Monograph.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":7,"text":"參與項目","title":"參與項目","url":"Project.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":8,"text":"個人榮譽","title":"個人榮譽","url":"Prize.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":1,"text":"發明專利","title":"發明專利","url":"Patent.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":0,"text":"文件共享","title":"文件共享","url":"FileShare.aspx?TeacherID=153","visible":true,"target":"_self"}

];

 

 ②這時需要先將數組按orderid升序排序,注意,sort方法會改寫原來的數組

 

  view sourceprint?menuData1.sort(function(a, b) { return a.orderid > b.orderid ?1 : -1;} );//

 

  ③經過排序後,結果為:

 

  view sourceprint?menuData1=[

{"orderid":-10,"text":"主頁","title":"個人網站主頁","url":"Default.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":0,"text":"文件共享","title":"文件共享","url":"FileShare.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":1,"text":"發明專利","title":"發明專利","url":"Patent.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":2,"text":"出版專著","title":"出版專著","url":"Monograph.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":5,"text":"發表論文","title":"發表論文","url":"Paper.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":7,"text":"參與項目","title":"參與項目","url":"Project.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":8,"text":"個人榮譽","title":"個人榮譽","url":"Prize.aspx?TeacherID=153","visible":true,"target":"_self"},

{"orderid":10,"text":"個人新聞","title":"個人新聞","url":"News.aspx?TeacherID=153","visible":true,"target":"_self"}

];
 

 

  ④然後根據menuData1[i].visible屬性,將可視菜單項顯示出來(其中String.Format見《在Javascript中實現類似C#中string.Format的功能》一文):

  然後根據menuData1[i].visible屬性,將可視菜單項顯示出來(其中String.Format見《在Javascript中實現類似C#中string.Format的功能》一文):

 

var menuString = "<ul><li class="menuDiv"></li>";
for(var i=0;i<menuData1.length;i++) {
    if(menuData1[i].visible) {
        menuString += String.Format("<li><a title="{0}" class="menuA"onfocus="this.blur()" href="{1}" target="{2}">{3}</a></li><li class="menuDiv"></li>", menuData1[i].title, menuData1[i].url, menuData1[i].target, menuData1[i].text);
    }
}
menuString += "</ul>";
$(menuContainer).innerHTML = menuString;

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved