twitter-bootstrap 如何使用引导程序的表 table-hover 类突出显示数据列表中的一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17775042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to highlight a row in a list of data with bootstrap's table table-hover class
提问by Chris
I am using bootstrap's table class (in particular class="table table-hover") on a list of data (using knockout for databinding in a single page application)-
我在数据列表上使用引导程序的表类（特别是 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>
I need the following to happen-
1. When a user clics on a row, class="highlight" should be implemented (highlights the clicked on row).
2. When a user clicks on a different row, remove the highlight class on the first row and apply the class="highlight" to the newly selected row. Return the first row to the original colors from bootstraps table class (class="table table-hover").
我需要发生以下情况-
1. 当用户点击一行时，应该实现 class="highlight"（突出显示点击的行）。
2. 当用户点击不同的行时，移除第一行的高亮类并将 class="highlight" 应用到新选择的行。将第一行从引导表类（class="table table-hover"）返回到原始颜色。
In short, only the row clicked on should be highlighted. The other rows should retain the characteristics of bootstrap's class="table table-hover". Ideas?
简而言之，只应突出显示单击的行。其他行应该保留 bootstrap 的 class="table table-hover" 的特性。想法？
EDIT 7/23/2013 FIDDLE: http://jsfiddle.net/wood0615/5BKt6/- ( KNOCKOUT CODE )-
编辑 7/23/2013 小提琴：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');
//}
});
采纳答案by Chris
I got it to work finally by changing the data-binding on the view to-
我最终通过将视图上的数据绑定更改为 -
<tr id="AllCertRow" style="cursor: pointer" data-bind="click: $parent.selectThing, css: { highlight: $parent.isSelected() == $data.lwCertID }">
They key I was missing was the boolean compare in the css binding. Thanks to those who replied to my post.
我缺少的关键是 css 绑定中的布尔比较。感谢那些回复我帖子的人。
回答by lashab
$('table').on('click','tr',function(e){
$('table').find('tr.highlight').removeClass('highlight');
$(this).addClass('highlight');
})
回答by Rohith Nair
var vm = function() {
var self=this;
self.isSelected = ko.observable(false);
self.selectThing = function (row, event) {
self.isSelected(true);
}.bind(this);
This will make your rows change color on selection.
这将使您的行在选择时更改颜色。
Plugin your logic, so that only one row is selected. Now this selects all rows because its a parent property and all the rows bind to this parent level property.
插入您的逻辑，以便只选择一行。现在这将选择所有行，因为它是一个父属性，并且所有行都绑定到这个父级属性。
This is not an exact solution, but this will help you to play around with KO
这不是一个确切的解决方案，但这将帮助您玩转 KO
