6

编辑 2012 年 4 月 16 日:我解决了问题并让排序正常工作。我还将时区转换为它们的单字母 UTC 代码 (AZ)。剩下的唯一事情就是让格式化程序检查夏令时,但是关于这个主题有很多。但是,如果您愿意,请随时做出贡献,这将是最受欢迎的。感谢大家帮助我实现目标。

EDIT2 2012 年 4 月 16 日:我解决了!!由于日期已经在 UTC,我正在做一些不必要的转换,这些转换会产生一些冲突/奇怪的结果。这个问题将被视为已解决。感谢所有帮助过的人。

我正在使用 knockoutjs 创建一个从我的服务器动态提取信息的小部件(html/javascript 中的表格)。我坚持为此的排序方法。我制作并下载了不同版本的表格排序方法,但它们都使从服务器中提取的初始数据消失了。他们将表格视为无法编辑的信息;所以似乎与我的表有冲突,因为我需要使所有信息都可编辑。

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:

纠正了排序错误,我不小心忘记重命名复制的排序函数之一,因此导致冲突。我仍然无法弄清楚如何让桌子恢复到原来的顺序。如果有人可以查看我制作的排序功能并向我展示我需要做什么或更改,将不胜感激。

我也无法让删除功能正常工作。它以某种方式引起了冲突,因为当我将它包含在表中时,来自服务器的数据没有填充表。

编辑:我设法找到一种“快速而肮脏”的方式来对单个列进行排序。它是这样的:

//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;
    });
}

但是,如果我为所有其他列复制了此代码(将所有 Column1 更改为 Column2 和 3,以此类推,用于函数的每个不同副本);某些行未正确排序。但是,如果我只保留这一个功能而没有对其他列的任何副本,它就可以正常工作。

**我还需要能够将桌子恢复到原来的顺序。现在我将这个函数绑定到表中的 Column1 标题。如果我单击一次,它将按降序排列,如果我再次单击标题;它将表格按升序排列(当然根据 Column1 的信息)。现在的问题是,如果我第三次单击,它将表恢复到其默认(原始)顺序。

4

2 回答 2

0

如何实施这样的事情?(单击列标题进行排序):

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>

于 2012-04-16T12:49:19.677 回答
0

我解决了!!由于日期已经在 UTC,我正在做一些不必要的转换,这些转换会产生一些冲突/奇怪的结果。这个问题将被视为已解决。感谢所有帮助过的人。

于 2012-04-19T17:31:02.453 回答