0
各種tablesorting jQuery插件周圍碴後的錶行,我就翻過一個它的,因爲它符合下列要求完美的作品:我能在這個jQuery插件更改爲包含排序的,這是隱藏
- 排序正確日期
- 排序號碼正確
- 排序號的話(如:一,二,三)妥善
- 它排序的DOM知道地。這意味着如果您更新表格單元格的內容,則當您單擊表格標題對該列進行排序時,它會識別新值,而不是對首次加載頁面時的內容進行排序。 (此功能是特別難找到,因爲排序時流行tablesorters不要在運行時識別更改)
我遇到的唯一問題是,它似乎這是可見的行唯一的排序。我希望它可以對整個表進行排序,而不僅僅是可見的表,同時保持上述所有功能(尤其是DOM知曉部分),因爲這將用於數據可能由用戶更新的表上,並隨後進行分類。
我會開源這個jQuery插件,所以我沒有在這裏分享代碼的問題。這裏的jQuery代碼是我的,我用於排序部分的插件如下:http://www.kryogenix.org/code/browser/sorttable。
以下代碼演示了此問題。您可以單擊任意單元格以進行內聯編輯,並可以通過這種方式更改DOM部分。
(function($) {
$.fn.tables = function(options) {
var settings = $.extend({
page: 0,
pageCount: 10,
}, options);
$thead = this.find('thead');
$tbody = this.find('tbody');
$tfoot = this.find('tfoot > tr > td').attr('colspan', $tbody.find('tr')[0].cells.length);
var align = '';
for (var content_align = 0; content_align < $thead.find('tr')[0].cells.length; content_align++) {
align = $($thead.find('tr')[0].cells[content_align]).attr('data-align');
if (align === undefined) {
} else {
$tbody.find('tr > td:nth-child(' + (content_align + 1) + ')').each(function() {
$(this).addClass(align);
});
}
}
var numRows = $tbody.find('tr').length;
var numPages = Math.ceil(numRows/settings.pageCount);
this.bind('repaginate', function() {
$tbody.find('tr').removeClass('visible').slice(settings.page * settings.pageCount, (settings.page + 1) * settings.pageCount).addClass('visible');
});
this.trigger('repaginate');
$tfoot.find('td').html('');
for (var page = 0; page < numPages; page++) {
$('<a></a>').text(page + 1).bind('click', {
newPage: page
}, function(event) {
settings.page = event.data['newPage'];
$(this).trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
if (options.pageChanged !== undefined) {
options.pageChanged(this);
}
}).appendTo($tfoot); //.addClass('clickable');
}
$tbody.find('td').click(function() {
if (options.cellClick !== undefined) {
if ($(this).hasClass('editing') == false) {
var col = $(this).parent().children().index($(this));
var row = $(this).parent().parent().children().index($(this).parent())
var type = $($thead.find('tr')[0].cells[col]).attr('data-type');
var typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values');
var align = $($thead.find('tr')[0].cells[col]).attr('data-align');
console.log(type);
$(this).addClass('editing');
options.cellClick(this, true, col, row);
switch (type) {
case 'text':
$(this).html('<input type="text" value="' + $(this).text() + '">');
$(this).find('input').focus().blur(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
$(this).parent().html($(this).prop('value'));
});
break;
case 'textarea':
_html = $(this).html();
$(this).html('<textarea type="text">' + $(this).html().replace(/\<br\\?>/g, "\n") + '</textarea>');
$(this).find('textarea').focus().blur(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
$(this).parent().html($(this).prop('value').replace(/\n/g, "<br>"));
});
break;
case 'number':
$(this).html('<input type="number" value="' + $(this).text() + '">');
$(this).find('input').focus().blur(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
$(this).parent().html($(this).prop('value'));
});
break;
case 'currency':
$(this).html('<input type="currency" value="' + $(this).text() + '">');
$(this).find('input').focus().blur(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
$(this).parent().html($(this).prop('value'));
});
break;
case 'select':
if (typevalues === undefined) {
console.log('You must define both \'data-type\' and \'data-values\' for select elements. \'data-values\' should be a comma delimited array of the items to be displayed in the drop-down');
} else {
typevalues = typevalues.split(',');
_html = '<select>';
for (var i = 0; i < typevalues.length; i++) {
if (typevalues[i] == $(this).text()) {
_html = _html + '<option value="' + typevalues[i] + '" selected>' + typevalues[i] + '</option>';
} else {
_html = _html + '<option value="' + typevalues[i] + '">' + typevalues[i] + '</option>';
}
}
_html = _html + '</select>';
$(this).html(_html);
$(this).find('select').focus().change(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
$(this).parent().html($(this).prop('value'));
}).blur(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
$(this).parent().html($(this).prop('value'));
});
}
break;
case 'checkbox':
if (typevalues === undefined) {
$($thead.find('tr')[0].cells[col]).attr('data-values', 'T,F');
typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values');
console.log('You can define the \'data-values\' parameter for checkbox elements. \'data-values\' should be a comma delimited array of two items. The first item is the \'checked\' value, and the second item is the \'unchecked\' value. Defaults to \'T,F\'');
}
typevalues = typevalues.split(',');
_html = '';
if (typevalues[0] == $(this).text()) {
_html = '<input type="checkbox" checked="checked">';
} else {
_html = '<input type="checkbox">';
}
$(this).html(_html);
$(this).find('input').focus().click(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values').split(',');
if (this.checked) {
$(this).parent().html(typevalues[0]);
} else {
$(this).parent().html(typevalues[1]);
}
})
.blur(function() {
$(this).parent().removeClass('editing');
options.cellClick($(this).parent(), false, col, row);
typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values').split(',');
if (this.checked) {
$(this).parent().html(typevalues[0]);
} else {
$(this).parent().html(typevalues[1]);
}
});
break;
}
}
}
})
this.addClass('sortable');
$tfoot.find('a:first-child').addClass('active');
return this;
};
}(jQuery));
:root {
--tables-even-color: #CDEDF7;
--tables-odd-color: #90C3D4;
}
.tables {
border-collapse: collapse;
}
/* Header */
.tables thead > tr {
background: #3E8096;
color: #CDEDF7;
}
.tables thead > tr > td {
padding: 4px;
padding-left: 8px;
padding-right: 10px;
}
.tables thead > tr > td:hover {
background: #CDEDF7 !important;
color: #3E8096 !important;
}
/* Footer */
.tables tfoot > tr {
background: #3E8096;
color: #CDEDF7;
}
.tables tfoot > tr > td > a {
border: 1px solid #3E8096;
padding: 4px;
cursor: pointer;
display: inline-block;
}
.tables tfoot > tr > td > a:hover {
border: 1px solid #CDEDF7;
}
.tables tfoot > tr > td > a.active {
background: #CDEDF7;
color: #3E8096;
}
/* Rows */
.tables tbody > tr:nth-child(even) {
background: #CDEDF7;
color: #90C3D4;
}
.tables tbody > tr:nth-child(even):hover {
background: #18EAF5;
color: #90C3D4;
}
.tables tbody > tr:nth-child(odd) {
background: #90C3D4;
color: #CDEDF7;
}
.tables tbody > tr:nth-child(odd):hover {
background: #18EAF5;
color: #90C3D4;
}
.tables tbody > tr {
display: none;
}
.tables tbody > tr.visible {
display: table-row !important;
}
.tables tbody > tr > td {
padding: 5px;
cursor: default;
}
/* Cell Content */
.tables tbody > tr > td.center {
text-align: center;
}
.tables tbody > tr > td.center > input {
text-align: center;
}
.tables tbody > tr > td.center > textarea {
text-align: center;
}
.tables tbody > tr > td.right {
text-align: right;
}
.tables tbody > tr > td.right > input {
text-align: right;
}
.tables tbody > tr > td.right > textarea {
text-align: right;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery.tables.css">
<script type="text/javascript">
$(document).ready(function() {
$table = $('.tables').tables({
pageChanged: function(item) {
console.log($(item).text());
},
cellClick: function(item, focused, column, row) {
console.log('COLUMN: ' + column + ', ROW: ' + row);
}
});
})
</script>
</head>
<body>
<table class="tables">
<thead>
<tr>
<td data-type="textarea">Column 1</td>
<td data-type="checkbox" data-align="center">Column 2</td>
<td data-type="select" data-values="Apples,Oranges,Bananas">Column 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td>ab</td>
<td>Apples</td>
</tr>
<tr>
<td>ac</td>
<td>ad</td>
<td>Oranges</td>
</tr>
<tr>
<td>bb
<br>ccc<b>newline</b>
</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>aaa</td>
<td>T</td>
<td>Apples</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
<tr>
<td>bbccc</td>
<td>F</td>
<td>Oranges</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="1"></td>
</tr>
</tfoot>
</table>
</body>
</html>
獎勵:如果你能弄清楚如何正確的CSS交替行的顏色後進行排序,這將是真棒(不添加東西,每個TD ...基本上,只是「刷新'的CSS不知何故)