Sắp xếp bảng HTML có thông tin tự động điền từ máy chủ

Question

EDIT 4/16/2012: Tôi đã khắc phục sự cố và phân loại hoạt động phù hợp. Tôi cũng đã chuyển đổi múi giờ thành mã UTC một chữ cái của họ (A-Z). Điều duy nhất còn lại là lấy trình định dạng để kiểm tra Tiết kiệm ánh sáng ban ngày, nhưng có rất nhiều về chủ đề đó. Tuy nhiên, bạn có thể tự do đóng góp nếu bạn muốn nó được chào đón nhiều nhất. Cảm ơn tất cả các bạn đã giúp tôi trong việc đạt được mục tiêu.

EDIT2 4/16/2012: Tôi đã giải quyết nó !! Do ngày đã có trong UTC, tôi đã thực hiện một số chuyển đổi không cần thiết đã tạo ra một số xung đột/kết quả lạ. Câu hỏi này được xem là SOLVED. Cảm ơn mọi người đã giúp đỡ.

Tôi đang sử dụng knockoutj để tạo tiện ích (bảng trong html/javascript) để lấy thông tin động từ máy chủ của tôi. Tôi đang mắc kẹt trên phương pháp phân loại cho việc này. Tôi đã tạo và tải xuống các phiên bản khác nhau của các phương pháp phân loại bảng nhưng tất cả chúng đều làm cho dữ liệu ban đầu được lấy từ máy chủ biến mất. Họ đối xử với các bảng như thông tin không thể được chỉnh sửa; do đó, có vẻ như xung đột với bảng của tôi vì tôi cần phải làm cho tất cả thông tin có thể chỉnh sửa được.

Right now in my ViewModel.js file I have: 

Event(column1,column2,column3,...columnN){ 
    var self = this; 
    self.column1 = column1; 
    self.column2 = column2; 
    . 
    . 
} 

function ViewModel(){ 
    var self= this; 
    self.rows = ko.observableArray([]); 

    self.addRow = function(){ 
     self.rows.push("","",.......); 
    } 

    //THIS REMOVE FUNCTION DOESN'T WORK 
    self.removeRow = function(row) 
     self.rows.remove(row); 
    } 

    //THIS DOESN'T WORK EITHER, a.column and b.column, the 'column would be column1, 
    //column2, etc. 
    self.SortMethod = function(){ 
     self.items.sort(function(a,b){ 
      return a.column < b.column ? -1 : 1; 
     }); 
    } 
} 

//navigate to the server and its info 
function getEvents(){ 
    $get.JSON("http://......", 
     function(data){ 
      $.each(data.d, function(i,item){handleEvent(item)}) 
     } 
    ); 
} 

//this populates the rows/columns in the table with the events(info) from the server 
//Here, 'Model' is a new ViewModel which is declared further below 
function handleEvent(item){ 
    var newEvent = new Event(item.Event1, item.Event2,.....); 
    this.Model.rows.push(newEvent); 
} 

this.Model = new ViewModel(); 
this.getEvents(); 
ko.applyBindings(this.Model); 

//The HTML code just makes the table, the headers and the style of the table and I then use 
//data-bind to bind the info in the server into the appropriate block in the table. 
//And yes, I do use <script src="knockout.js"> and for all other js files I have in the 
//HTML file. 

The HTML is basically this: 

title 
meta 
scripts 
table style 
table 
headers <tr><td>Column1Header</td><td>Column2Header</td>.....</tr> 
table body 
    Example line from table's body: <td><input data-bind = "value: column1" /><td> 
    buttons (for adding a row and another button for sorting the array) 

//I think it would be better to get rid of the sorting button and make it so if you click on 
//the table headers, you'll sort the table according to that header's column's information. 

======================= =================================== EDIT2:

Đã sửa lỗi sắp xếp, tôi vô tình quên đổi tên một trong các chức năng sắp xếp sao chép để nó gây ra xung đột. Tôi vẫn chưa thể tìm ra cách để bàn quay trở lại thứ tự ban đầu của nó. Nếu ai đó có thể nhìn vào chức năng sắp xếp tôi đã thực hiện và cho tôi thấy những gì tôi cần làm hoặc thay đổi nó sẽ được đánh giá cao.

Tôi cũng không thể lấy chức năng xóa để hoạt động chính xác. Nó gây ra xung đột bằng cách nào đó khi tôi đưa nó vào trong bảng, dữ liệu từ máy chủ không có trong bảng.

EDIT: Tôi đã tìm ra cách "nhanh chóng và bẩn" để phân loại cho một cột riêng lẻ. Nó đi một cái gì đó như thế này:

//After the line: self.rows = ko.observableArray([]); I continued with: 
self.sortColumn = "Column1"; 
self.sortAscending = true; 

self.SortColumn1 = function(){ 
    if(self.sortColumn == "Column1") 
     self.sortAscending = !self.sortAscending; 
    else{ 
     self.sortColumn = "Column1"; 
     self.sortAscending = true; 
    } 
    self.rows.sort(function(a,b){ 
     if(self.sortAscending == true) 
      return a.Column1 < b.Column1 ? -1 : 1; 
     else 
      return a.Column1 > b.Column1 ? -1 : 1; 
    }); 
} 

Tuy nhiên, nếu tôi sao chép mã này cho tất cả các cột khác (thay đổi tất cả của thành của --COLUMN2 và 3 và vân vân cho mỗi bản sao khác nhau của hàm COLUMN1); một số hàng không được sắp xếp chính xác. Tuy nhiên nếu tôi chỉ giữ một chức năng này mà không có bất kỳ bản sao nào đối với các cột khác, nó hoạt động tốt.

** Tôi cũng cần khả năng trả lại bảng về thứ tự ban đầu của bảng. Ngay bây giờ tôi có một hàm này được liên kết với tiêu đề Column1 trong bảng. Nếu tôi nhấp một lần, nó sẽ đặt nó theo thứ tự giảm dần và nếu tôi nhấp lại vào tiêu đề; nó đặt bảng theo thứ tự tăng dần (theo thông tin của Column1). Bây giờ vấn đề là để làm cho nó ở đâu nếu tôi nhấp vào một lần thứ ba, nó khôi phục lại bảng theo thứ tự mặc định (ban đầu) của nó.

Answer 1

Tôi giải quyết nó !! Do ngày đã có trong UTC, tôi đã thực hiện một số chuyển đổi không cần thiết đã tạo ra một số xung đột/kết quả lạ. Câu hỏi này được xem là SOLVED. Cảm ơn mọi người đã giúp đỡ.

Answer 2

Làm cách nào để triển khai một cái gì đó như this? (Nhấp vào tiêu đề cột để phân loại):

function ViewModel(){ 
 
    var self = this; 
 
    
 
    self.rows = ko.observableArray([]); 
 
    self.newOne = { 
 
     firstName:ko.observable(""), 
 
     lastName:ko.observable("") 
 
    }; 
 
    
 
    self.currentSort = ko.observable(""); 
 
    
 
    self.addNew = function() { 
 
     self.addRow(self.newOne.firstName(), self.newOne.lastName()); 
 
     self.newOne.firstName(""); 
 
     self.newOne.lastName(""); 
 
    } 
 

 
    self.addRow = function(firstName, lastName) { 
 
     self.rows.push(
 
      { 
 
       firstName: firstName.capitalize(), 
 
       lastName:lastName.capitalize() 
 
      }); 
 
    
 
     if(self.currentSort() != "") 
 
      self.sortBy(self.currentSort()); 
 
    }; 
 

 
    self.removeRow = function() { 
 
     self.rows.remove(this); 
 
    }; 
 
    
 
    self.sortBy = function(sortField) { 
 
     sortFunc = self.defaultSorter; 
 
     
 
     self.rows.sort(function(left, right) { 
 
      return sortFunc(left[sortField], right[sortField]); 
 
     }); 
 
     
 
     self.currentSort(sortField); 
 
    }; 
 
    
 
    self.defaultSorter = function(left, right) { 
 
     if(left > right) 
 
      return 1; 
 
     
 
     return left < right ? -1 : 0; 
 
    }; 
 
}; 
 
    
 
String.prototype.capitalize = function() { 
 
    return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase(); 
 
}; 
 

 

 
this.Model = new ViewModel(); 
 
this.Model.addRow("Any", "Coder"); 
 
this.Model.addRow("Some", "Another"); 
 
this.Model.addRow("Nice", "Guy"); 
 
this.Model.addRow("Cool", "One"); 
 
ko.applyBindings(this.Model);

th, td 
 
{ 
 
    border: 1px solid gray; 
 
    padding: 0px 2px; 
 
} 
 

 
.sort-by 
 
{ 
 
    cursor: pointer; 
 
} 
 

 
button 
 
{ 
 
    width: 18px; 
 
    height: 18px; 
 
    border: 1px solid lightgray; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script> 
 

 
<div> 
 
    current sorting: <span data-bind="text: currentSort"></span> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
      <th class="sort-by" data-bind="click: sortBy.bind($data, 'firstName')">First name</th> 
 
      <th class="sort-by" data-bind="click: sortBy.bind($data, 'lastName')">Last name</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: rows"> 
 
     <tr> 
 
      <td data-bind="text: firstName"></td> 
 
      <td data-bind="text: lastName"></td> 
 
      <td><button href='#' data-bind="click: $parent.removeRow">-</button></td> 
 
     </tr> 
 
    </tbody> 
 
    <tfoot> 
 
     <tr> 
 
      <td><input data-bind="value: newOne.firstName" /></td> 
 
      <td><input data-bind="value: newOne.lastName" /></td> 
 
      <td><button data-bind="click: addNew">+</button></td> 
 
     </tr>   
 
    </tfoot> 
 
    </table> 
 
</div>