我在数据列表上使用引导程序的表类(特别是 class="table table-hover")(在单页应用程序中使用敲除进行数据绑定)-
<table id="tblAllCert" border="0" class="table table-hover" width="100%">
<tbody data-bind="foreach: allCertificates">
<tr id="AllCertRow" style="cursor: pointer" data-bind="a: console.log($data), click: $parent.selectThing, css: { 'highlight': $parent.isSelected() == $data } ">
<td>
<b><span data-bind=" text: clientName"></span> (<span data-bind=" text: clientNumber"></span>) <span data-bind=" text: borrowBaseCount"></span> Loan(s) </b>
Collateral Analyst: <span data-bind=" text: userName"></span>
Certificate: <span data-bind="text: lwCertID"></span> Request Date: <span data-bind=" text: moment(requestDate).format('DD/MMM/YYYY')"></span>
</td>
<td data-bind="text: $parent.isSelected"></td>
</tr>
</tbody>
</table>
我需要发生以下事情 -
1. 当用户点击一行时,应该实现 class="highlight"(突出显示点击的行)。
2. 当用户点击不同的行时,删除第一行的高亮类并将class="highlight" 应用于新选择的行。从引导表类 (class="table table-hover") 将第一行返回到原始颜色。
简而言之,只有单击的行应该被突出显示。其他行应该保留 bootstrap 的 class="table table-hover" 的特征。想法?
编辑 2013 年 7 月 23 日小提琴:http: //jsfiddle.net/wood0615/5BKt6/ -(淘汰赛代码)-
define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/CertificateDataService'],
function (logger, system, router, CertificateDataService) {
var allCertificates = ko.observableArray([]);
var myCertificates = ko.observableArray([]);
//var serverSelectedOptionID = ko.observableArray();
var isSelected = ko.observable();
var serverSelectedOptionID = ko.observable();
var CurrentDisplayThing = ko.observable(allCertificates);
var serverOptions = [
{ id: 1, name: 'Certificate', OptionText: 'lwCertID' },
{ id: 2, name: 'Client Name', OptionText: 'clientName' },
{ id: 3, name: 'Client Number', OptionText: 'clientNumber' },
{ id: 4, name: 'Request Date', OptionText: 'requestDate' },
{ id: 5, name: 'Collateral Analyst', OptionText: 'userName' }
];
var activate = function () {
// go get local data, if we have it
return SelectAllCerts(), SelectMyCerts();
};
var vm = {
activate: activate,
allCertificates: allCertificates,
myCertificates: myCertificates,
title: 'Certificate Approvals',
SelectMyCerts: SelectMyCerts,
SelectAllCerts: SelectAllCerts,
theOptionId: ko.observable(1),
serverOptions: serverOptions,
serverSelectedOptionID: serverSelectedOptionID,
SortUpDownAllCerts: SortUpDownAllCerts,
isSelected: ko.observable(),
selectThing: function(row, event) {
isSelected(row.lwCertID);
}
};
serverSelectedOptionID.subscribe(function () {
var sortCriteriaID = serverSelectedOptionID();
allCertificates.sort(function (a, b) {
var fieldname = serverOptions[sortCriteriaID - 1].OptionText;
if (a[fieldname] == b[fieldname]) {
return a[fieldname] > b[fieldname] ? 1 : a[fieldname] < b[fieldname] ? -1 : 0;
}
return a[fieldname] > b[fieldname] ? 1 : -1;
});
});
allCertificates.valueHasMutated();
return vm;
////////////
function SortUpDownAllCerts() {
allCertificates.sort();
allCertificates.valueHasMutated();
}
function SortUpDownMyCerts() {
return allCertificates.sort()
}
function SelectAllCerts() {
return CertificateDataService.getallCertificates(allCertificates);
}
function SelectMyCerts() {
return CertificateDataService.getMyCertificates(myCertificates);
}
//function RowSelected() {
// $('#tblAllCert tr').on('click', function (event) {
// $(this).addClass('highlight').siblings().removeClass('highlight');
// });
// $("#tblAllCert tr").addClass("highlight");
// $('#tblAllCert tr').css('background-color: Red');
//}
});