更新数据时保留和提示排序顺序
Preserving and hinting about the sort order when updating data?
在更新模型内部的数据时,是否可以保留排序顺序(最后是jsfiddle)?我有以下标记:
<table>
<thead>
<tr>
<th data-bind="sort: { arr: Records, prop: 'Name' }">Name</th>
<th data-bind="sort: { arr: Records, prop: 'Number' }">Number</th>
<th data-bind="sort: { arr: Records, prop: 'Desc' }">Description</th>
</tr>
</thead>
<tbody data-bind="foreach: Records">
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: Number"></td>
<td data-bind="text: Desc"></td>
</tr>
</tbody>
</table>
<button data-bind="click: changeMe">Remove</button>
<button data-bind="click: resetMe">Reset</button>
现在,排序本身是使用这篇原始文章中的bindingHandlers
实现的:
var recs = [];
ko.bindingHandlers.sort = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var asc = false;
element.style.cursor = 'pointer';
element.onclick = function(){
var value = valueAccessor();
var prop = value.prop;
var data = value.arr;
asc = !asc;
if(asc){
data.sort(function(left, right){
return left[prop] == right[prop] ? 0 : left[prop] < right[prop] ? -1 : 1;
});
} else {
data.sort(function(left, right){
return left[prop] == right[prop] ? 0 : left[prop] > right[prop] ? -1 : 1;
});
}
}
}
};
function ViewModel(){
var self = this;
self.Records = ko.observableArray();
self.changeMe = function() {
self.Records.pop()
}
self.resetMe = function() {
var recs = []
recs.push({Name: 'Bob', Number: 1, Desc: 'I am awesome'});
recs.push({Name: 'Joe', Number: 2, Desc: 'Another description'});
recs.push({Name: 'Mitch', Number: 3, Desc: 'Something'});
recs.push({Name: 'Steven', Number: 4, Desc: 'Yo'});
self.Records(recs);
}
}
var viewModel = new ViewModel();
recs.push({Name: 'Bob', Number: 1, Desc: 'I am awesome'});
recs.push({Name: 'Joe', Number: 2, Desc: 'Another description'});
recs.push({Name: 'Mitch', Number: 3, Desc: 'Something'});
recs.push({Name: 'Steven', Number: 4, Desc: 'Yo'});
recs.push({Name: 'Robin', Number: 6, Desc: 'Hello'});
recs.push({Name: 'Batman', Number: 7, Desc: 'Description'});
recs.push({Name: 'John', Number: 5, Desc: 'Ok'});
viewModel.Records(recs);
ko.applyBindings(viewModel);
例如,考虑这个JSFiddle和以下一系列交互:
- 单击某列,以便按该列对行进行排序。点击"数字"两次,使其按降序排列
- 现在,点击"Reset"模拟ajax调用(即,假设我正在更新模型)。现在,排序顺序恢复为原来的顺序
我如何保留排序顺序,即记住它应该按"数字"降序排序?当然,在专栏旁边以某种方式显示这一点?类似于数据表的操作方式(注意每个列名旁边的上下箭头)。
有什么建议吗?
尝试了一下,但应该有更好的方法。
重点是我做了一个"dataUpdated"标志,所以每次更新数据时,都要重新对它们进行排序。此外,我在一个可观察的对象中保存"道具"answers"顺序",这样你也可以在它们变化时做一些事情(例如,有一个箭头图标,并根据顺序进行更改)
看看
-->http://jsfiddle.net/blackjim/xgEdg/15/
var recs = [];
ko.bindingHandlers.changed = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
if(viewModel.dataUpdated()){
console.log('data updated, sorting...');
sortThis(viewModel.Records,viewModel.sortData().order,viewModel.sortData().col);
}
viewModel.dataUpdated(false);
}
}
ko.bindingHandlers.sort = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var order = 'none'; // initial order status for this column
if(!viewModel.Records.dataSort){
viewModel.Records.dataSort = { col: 'none', order: 'none' };
}
element.style.cursor = 'pointer';
element.sortAsc = element.sortAsc || false;
element.onclick = function () {
var value = valueAccessor(),
prop = value.prop,
data = value.arr;
// sortData updated
viewModel.sortData({
col: prop,
order: order = (order === 'asc' ? 'desc' : 'asc')
});
sortThis(data, order, prop);
}
}
};
// function for sorting the observable array
function sortThis(data, order, prop){
if (order === 'asc') {
data.sort(function (left, right) {
return left[prop] == right[prop] ? 0 : left[prop] < right[prop] ? -1 : 1;
});
} else {
data.sort(function (left, right) {
return left[prop] == right[prop] ? 0 : left[prop] > right[prop] ? -1 : 1;
});
}
}
function ViewModel() {
var self = this;
self.Records = ko.observableArray();
self.sortData = ko.observable({
col: "none",
order: "none"
});
self.dataUpdated = ko.observable(false); // flag for data updating
self.changeMe = function () {
self.Records.pop();
}
self.resetMe = function () {
self.Records.removeAll();
self.Records.push({
Name: 'Bob',
Number: 1,
Desc: 'I am awesome'
});
self.Records.push({
Name: 'Joe',
Number: 2,
Desc: 'Another description'
});
self.Records.push({
Name: 'Mitch',
Number: 3,
Desc: 'Something'
});
self.Records.push({
Name: 'Steven',
Number: 4,
Desc: 'Yo'
});
// trigger the dataUpdated 'event'
self.dataUpdated(true);
}
}
var viewModel = new ViewModel();
recs.push({
Name: 'Bob',
Number: 1,
Desc: 'I am awesome'
});
recs.push({
Name: 'Joe',
Number: 2,
Desc: 'Another description'
});
recs.push({
Name: 'Mitch',
Number: 3,
Desc: 'Something'
});
recs.push({
Name: 'Steven',
Number: 4,
Desc: 'Yo'
});
recs.push({
Name: 'Robin',
Number: 6,
Desc: 'Hello'
});
recs.push({
Name: 'Batman',
Number: 7,
Desc: 'Description'
});
recs.push({
Name: 'John',
Number: 5,
Desc: 'Ok'
});
viewModel.Records(recs);
ko.applyBindings(viewModel);
相关文章:
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- 使用promise和mongoose对文档进行排序
- Selectize.js:如何对整数值的选项进行排序
- Javascript排序的图像弹出窗口..可以't单独弹出
- 如何通过引用var Using DataTables来进行分页或排序
- 提示使用服务器端事件处理程序激活JavaScript
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- AngularJs对所有页面中的所有记录进行排序
- d3.js Chord图的动态工具提示
- 当属性不一致时,如何根据属性对JS对象列表进行排序
- Javascript 可选类型提示
- 按从高到低对多个int变量进行排序
- jQuery UI可排序-多连接列表拖动
- Javascript排序字符串或数字
- 单击按钮后启动javascript提示
- 2个backbone.js集合,具有相同的模型,但排序顺序不同
- 用于提示输入和输出的JavaScript按字母顺序排序
- 更新数据时保留和提示排序顺序
- 工具提示在元素排序后停止工作
- 引导工具提示在排序表上消失