Question

更新：我还希望升序/降序箭头键恰好显示在单击的标题旁边，以显示当前的排序顺序。我已经在油漆中制作了图像，并确保它们像12 x 10像素。

我做了很多搜索，似乎没有下载文件就无法完成。我想使用我目前拥有的代码，以某种方式将我的HTML表格按照从私有服务器动态填充的某个列的值进行排序。

我正在使用Knockoutjs进行所有数据绑定。

单击列标题时，排序工作正常。它目前按每个其他点击的升序/降序排列（单击一次：降序，再次单击：升序，再次单击：降序........）。我希望最初使用TimeObserved信息填充表，其中已经按照我已经拥有的代码（如果可能的话）以降序排序。任何帮助表示赞赏。

请注意：我对这一切都很陌生，而且从个人经验中我知道有人可能会要求将它放入jsfiddle。我不习惯jsfiddle而且忙于工作。请理解我现在没有时间将其转换为这种格式，并且所提供的代码应该不仅仅是提供信息和组织阅读和理解。谢谢。

以下是此代码片段：

HTML文件：

/////////////////////////////////////////////// ////////////////////////////////////////////////// ////////////////////////////////////////////////// /////////////////////////

<table border="6" id="widget"><thead>
    <tr>
        <th><a href=#" data-bind="click: SortByTimeObserved">TimeObserved</a></th>
    </tr></thead>

    <tbody data-bind="foreach: rows">
        <td><input data-bind="value: TimeObserved" /></td>
    </tbody>
</table>

<script src="TableViewModel.js" type="text/javascript"></script>

/////////////////////////////////////////////// ////////////////////////////////////////////////// ////////////////////////////////////////////////// //////////////////////////

继承人javascript viewmodel文件：

=============================================== ===================================

function Event(TimeObserved){
    var self = this;
    self.TimeObserved = TimeObserved;
}

function TableViewModel(){
    var self = this;
    self.sortColumn = "TimeObserved";
    self.sortAscending = true;

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

this.Model = new TableViewModel;
ko.applyBindings(this.Model);

=============================================== ===================================

Answer 1

看看Ko Grid。我打赌它会给你你需要的东西：

https://github.com/ericmbarnard/KoGrid

Answer 2

你不能用一些脚本初始化它......

this.Model = new TableViewModel;
this.Model.sortAscending = false;
this.Model.SortByTimeObserved();
ko.applyBindings(this.Model);

Answer 3

我解决了。当我使用时：

function getEvents(){
    $.getJSON("http://.....",
        function (data){
            $.each(data.d, function (i, item){
                handleEvent(item)
            });
        Model.SortByTimeObserved(); // <----This is what solved the problem
        }
    );
 }

在我使用服务器中的项目填充handleEvent之后添加the Model.SortByTimeObservable();，然后按正确的顺序对TimeObserved进行排序。不需要this.Model.SortByTimeObserved();文件末尾的ViewModel.js，因为它只会以相反的顺序放置所有内容。

最初设置要排序的HTML列

3 个答案: