我尝试使用以下jsfiddle中的淘汰过滤器和排序功能：http://jsfiddle.net/rrahlf/EZUEF/6/
排序工作得很好，但我的表标题不是可点击的＆＃34;。有谁能说出原因？
这是我的index.cshtml
@model PagedList.IPagedList<TVS.ESB.BamPortal.Website.Models.LookupViewModel>
@using System.Web.Script.Serialization
@{
ViewBag.Title = "Cross Ref";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>@ViewBag.Title</h2>
@{ string data = new JavaScriptSerializer().Serialize(Model); }
<div id="CrossRefDiv">
<p>Number of rows <span data-bind="text: lookups().length"> </span></p>
<div data-bind="foreach: filters">
<input type="button" data-bind="click: $parent.setActiveFilter, value: title" />
</div>
<table class="table table-striped">
<thead>
<tr data-bind="foreach: headers">
<th data-bind="click: $parent.sort, text: title"></th>
</tr>
</thead>
<tbody data-bind="template: { name: 'rowTemplate', foreach: filteredLookups }"></tbody>
</table>
<form data-bind="submit: save">
<button data-bind="click: addRow">Add Row</button>
<button data-bind="enable: lookups().length > 0" type="submit">Submit</button>
</form>
<script type="text/html" id="rowTemplate">
<tr>
<td><input data-bind="value: SourceSystem" /></td>
<td><input data-bind="value: SourceField" /></td>
<td><input data-bind="value: SourceValue" /></td>
<td><input data-bind="value: TargetSystem" /></td>
<td><input data-bind="value: TargetValue" /></td>
<td><a href="#" data-bind="click: function() { vm.removeRow($data) }">Delete</a></td>
</tr>
</script>
</div>
@section Scripts {
<script src="~/KnockoutVM/CrossRef.js"></script>
<script type="text/javascript">
var vm = new ViewModel(@Html.Raw(data));
ko.applyBindings(vm, document.getElementById("CrossRefDiv"));
</script>
}
我的CrossRef.js：
function ViewModel(data) {
var self = this;
//remove 1st element from array because this holds filter data which the filter Partial view
//will have already dealth with
data.splice(0, 1);
self.lookups = ko.observableArray(data);
//start of filter & sort
self.headers = [
{ title: 'Source System', sortPropertyName: 'sourceSystem', asc: true, active: false },
{ title: 'Source Field', sortPropertyName: 'sourceField', asc: true, active: false },
{ title: 'Source Value', sortPropertyName: 'sourceValue', asc: true, active: false },
{ title: 'Target System', sortPropertyName: 'targetSystem', asc: true, active: false },
{ title: 'Target Value', sortPropertyName: 'targetValue', asc: true, active: false }
];
self.filters = [
{ title: 'Show All', filter: null },
{ title: 'SCIP', filter: function (item) { return item.sourceSystem == 'SCIP'; } },
{ title: 'CCE', filter: function (item) { return item.sourceSystem == 'CCE'; } }
];
self.activeSort = ko.observable(function () { return 0; }); //set the default sort
self.sort = function (header, event) {
//if this header was just clicked a second time
if (header.active) {
header.asc = !header.asc; //toggle the direction of the sort
}
//make sure all other headers are set to inactive
ko.utils.arrayForEach(self.headers, function (item) { item.active = false; });
//the header that was just clicked is now active
header.active = true;//our now-active header
var prop = header.sortPropertyName;
var ascSort = function (a, b) { return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };
var descSort = function (a, b) { return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };
var sortFunc = header.asc ? ascSort : descSort;
//store the new active sort function
self.activeSort(sortFunc);
};
self.activeFilter = ko.observable(self.filters[0].filter);//set a default filter
self.setActiveFilter = function (model, event) {
self.activeFilter(model.filter);
};
self.filteredLookups = ko.computed(function () {
var result;
if (self.activeFilter()) {
result = ko.utils.arrayFilter(self.lookups(), self.activeFilter());
} else {
result = self.lookups();
}
return result.sort(self.activeSort());
});
//end of filter & sort
self.removeRow = function (row) {
this.lookups.remove(row);
}
self.addRow = function () {
this.lookups.push({ SourceSystem: "", SourceField: "", SourceValue: "", TargetSystem: "", TargetField: "", TargetValue: "" });
}
self.save = function () {
var data = ko.toJS(this.lookups);
$.ajax({
type: "POST",
url: location.href,
data: ko.toJSON(data),
contentType: 'application/json',
async: true
});
}
}
答案 0 :(得分：1)
我不太确定这是否是“clickable”的意思，但是这里有一个修改过的小提示，你给的是当前点击的表标题的一个类（当前点击的类是粗体，然后是其他的正常）。
小提琴here。
我在这里做的是将th字体权重设为正常，并添加一个名为current的类，它提供粗体字权重。
th{
cursor:pointer;
font-weight: normal;
}
.current{
font-weight: bold;
}
然后将标题项的active属性设置为可观察的。
self.headers = [
{title:'First Name',sortPropertyName:'firstName', asc: true, active: ko.observable(false)},
{title:'Last Name',sortPropertyName:'lastName', asc: true, active: ko.observable(false)},
{title:'Age',sortPropertyName:'age', asc: true, active: ko.observable(false)}
];
然后修改排序函数，以便将active视为可观察的。
self.sort = function(header, event){
//if this header was just clicked a second time
if(header.active()) {
header.asc = !header.asc; //toggle the direction of the sort
}
//make sure all other headers are set to inactive
ko.utils.arrayForEach(self.headers, function(item){ item.active(false); } );
//the header that was just clicked is now active
header.active(true);//our now-active header
var prop = header.sortPropertyName;
var ascSort = function(a,b){ return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };
var descSort = function(a,b){ return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };
var sortFunc = header.asc ? ascSort : descSort;
//store the new active sort function
self.activeSort(sortFunc);
};
最后在th。
<th data-bind="click: $parent.sort, text: title, css: {current: active}"></th>
如果表标题是升序或降序，您也可以在表标题中添加标识符，只需添加一个css类并使asc成为可观察的。{/ p>