2011-11-19 208 views
2

我可能想出了一種令人難以置信的粗糙方式來完成這種事情,但我想我會問在場的許多專家。基本上,我有一個數組,看起來像下面這樣:通過鍵值對JavaScript數組中的對象進行排序

var bugs = [ 
    { 
     id: "197526", 
     title: "Updating Lighthouse", 
     summary: "Enhancing the UI of Lighthouse", 
     status: "Active", 
     project: "Lighthouse", 
     area: "Internal Web Applications", 
     hours: 19 
    }, 
    { 
     id: "190328", 
     title: "Adding Login Authentication to Lighthouse", 
     summary: "Create a login authentication process for Lighthouse", 
     status: "Active", 
     project: "Lighthouse", 
     area: "Administration", 
     hours: 12 
    }, 
    ... 
    { 
     id: "187562", 
     title: "Create a Maintenance Page", 
     summary: "Create a maintenance page to be displayed with the company site is down", 
     status: "Resolved", 
     project: "Other", 
     area: "Internal Web Projects", 
     hours: 4 
    }, 
]; 

基本上,數組中存放一些「漏洞」,每一個ID,標題,摘要,狀態,項目,面積和時間屬性。這些錯誤中的每一個都將顯示在我的Web應用程序中,但我允許用戶選擇如何將其分組;無論是按地位,項目還是地區。根據他們從上面的選擇框中選擇的三個中的哪一個,我希望能夠對所有錯誤進行排序,並根據他們選擇的類別對它們進行分組。然後,在顯示它們時,爲該類別的每個當前選項設置一個簡單的標題。舉例來說,如果他們的地位排序,這將是這樣的:

Group By: Status 

Active 
------ 
Bug with status: "active" 
Bug with status: "active" 
Bug with status: "active" 

Resolved 
-------- 
Bug with status: "resolved" 
Bug with status: "resolved" 

我應該通過錯誤的整個陣列,並根據類別迭代進行排序,只需爲每個新陣列該類別的可能選項,並添加適當的錯誤給他們?所以在上面的情況下,創建新的陣列var activeBugs = []var resolvedBugs = []?如果是這樣,我的問題就是知道有什麼可能的選擇。那麼我是否應該在創建這些新陣列之前首先遍歷整個bugs數組,以查看期望組類別中存在的可能選項?

不借助其他jQuery插件來做這件事的最好方法是什麼?

+0

這裏有一個數組方法 - [.sort()](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/sort) –

+0

如果你不需要實際的排序他們,但只是想在特定的領域將他們分組,我根本不會對他們進行分類。你用什麼來渲染這些列表(即導致你需要對數組進行排序或爲每個排序屬性構建單獨的數組)? –

+0

我想我可以用它來將它們全部排列在數組本身的某個類別中。從那裏,只要他們改變爲不同的選項,我只需要打印標題? –

回答

0

要闡述我的評論質疑需要排序/過濾器在所有的,你可以這樣做(非常粗略的)這樣在你的顯示邏輯?

$('#SortOrder').live('change', function() { 
    var groupby = $(this).val(); 

    $('#Bugs').empty(); 

    for (var i = 0; i < bugs.length; i++) { 
    if (!document.getElementById(bugs[i][groupby])) { 
     $('<h3>', { text: bugs[i][groupby] }).appendTo('#Bugs'); 

     $('<ul>', { 
      id: bugs[i][groupby] 
     }).appendTo('#Bugs'); 
    } 

    var $li = $('<li>', { 
     text: bugs[i].title 
    }); 

    $('#Bugs').find('#' + bugs[i][groupby]).append($li); 
    } 
}); 

工作演示:http://jsfiddle.net/TTApQ/1/

這樣,沒有排序或篩選可言的,你只需要做出一個傳球陣列上。

+0

我會將gi有一個嘗試,謝謝。 –

0

用戶是否可以複製所有錯誤?或者你只是發送,可以說,第一個100?

  • 如果你發送了第一個100,我建議你在服務器上製作3個數組,它們保存指向對象的指針,並根據它的位置插入每個新的bug。然後從請求的列表中發送。這應該是快速的,因爲你只是提取信息。並在插入時進行排序。 (所有'排序'是在添加錯誤時完成的 - 假設您更經常地查看信息,您可以編輯它!)
  • 如果客戶端持有所有數據的副本,則只需在客戶端重新對其進行分類與JavaScript。不應該花費太多時間。這節省了你的帶寬,並假設你沒有那麼多的錯誤,所以你可以一次顯示所有的錯誤。
+0

客戶端發出一個AJAX調用到訪問數據庫的服務器。當錯誤返回給客戶端時,我認爲最好將整個錯誤列表存儲在客戶端,以便如果用戶想要更改他們希望他們分組的類別,則不必再撥打另一個電話到servlet(以及數據庫)。讓客戶處理排序問題,還是每次更改參數並讓數據庫處理時都不得不打電話更好? –

+0

好,取決於你有多少錯誤。如果你使用數據庫,我想你會有比用戶更多的bug。所以發送所有數據會浪費帶寬。如果你有幾個,並且普通用戶會看到他們全部 - 然後發送他們。 - 也考慮未來增長\減少。但主要問題是「普通用戶會看到所有的錯誤嗎?(或者至少有90%的錯誤會被一次又一次地發送出去) –

+0

那麼,數據庫中充滿了所有用戶的錯誤,但我的查詢只是返回分配給指定用戶的數據或那些已經有數小時由用戶登錄的數據。大多數情況下,這個數字在5-20個bug之間(我還沒有看到用戶超過​​了這個數字)。 ,如果一個特定的用戶有300個錯誤,我希望它以同樣的方式工作 –

0

使用array.sort按狀態對數組進行排序。迭代整個數組,記住之前迭代的.status屬性是什麼。當它改變時,創建一個新的視覺表示。

bugs.sort(mySortFunc); 

var lastStatus = ''; 
for (var i=0, b; b = bugs[i]; i++) { 
    if (b.status != lastStatus) { 
    //output a header for the new status b.status 
    document.write(b.status + '<br>----<br>'); 
    lastStatus = b.status; 
    } 
    // output the bug 
    document.write(b.title + '<br>'); 
} 

警告:最終你會希望你讓數據庫做所有的排序/分組/分頁/等。

+0

我最初將它們與數據庫分組(「排序」),但如果用戶決定更改錯誤類別我不得不再次打電話給服務器和數據庫,以便正確定購他們。我認爲,如果我能處理客戶端的分組,我不必打電話給數據庫每次更改「分組依據」選擇框 –

0

下面是使用.filter()正如我在註釋中所描述的例子:

var active_bugs = bugs.filter(function(bug) { 
    return bug.status === "active"; 
}); 
相關問題