在我的 html 表中,有一列(“IsReserved”)是复选框列表,有些已选中,有些未选中。 当用户单击 IsReserved 标题时,表将按其排序。 意味着第一次单击时按升序排列,第二次单击时按降序排列。 我希望这个问题是通过使用 javascript 或 jquery 来完成的,如果有其他的,请。
简而言之,我想根据“IsReserved”列中的复选框对表进行排序 谢谢。
function sortTable(f, n) {
var rows = $('#tab tbody tr').get();
rows.sort(function (a, b) {
var A = $(a).children('td').eq(n).text().toUpperCase();
var B = $(b).children('td').eq(n).text().toUpperCase();
$("input:checkbox").attr("id")
parseInt($(a).data("sort"));
if (A < B) {
return -1 * f;
}
if (A > B) {
return 1 * f;
}
return 0;
});
$.each(rows, function (index, row) {
$('#tab').children('tbody').append(row);
});
}
var f_sl = 1;
var f_nm = 1;
//sort table by name
$("#name").click(function () {
f_sl *= -1;
var n = $(this).prevAll().length;
sortTable(f_sl, n);
});
//sort table by code
$("#code").click(function () {
f_nm *= -1;
var n = $(this).prevAll().length;
sortTable(f_nm, n);
});
//sort table by category
$("#category").click(function () {
f_nm *= -1;
var n = $(this).prevAll().length;
sortTable(f_nm, n);
});
//sort table by saleprice
$("#saleprice").click(function () {
f_nm *= -1;
var n = $(this).prevAll().length;
sortTable(f_nm, n);
});
//sort table by lead time
$("#leadtime").click(function () {
f_nm *= -1;
var n = $(this).prevAll().length;
sortTable(f_nm, n);
});
//sort table by qty per unit
$("#qtu").click(function () {
f_nm *= -1;
var n = $(this).prevAll().length;
sortTable(f_nm, n);
});
//sort table by current stock
$("#currentstock").click(function () {
f_nm *= -1;
var n = $(this).prevAll().length;
sortTable(f_nm, n);
});
//sort table by record level
$("#recordlevel").click(function () {
f_nm *= -1;
var n = $(this).prevAll().length;
sortTable(f_nm, n);
});
//end of sort table
<tbody data-bind="foreach: ProductViewList">
<tr>
<td class="calign leftbordernone" style="width:50px">
<a data-bind="attr: { 'href': '@Url.Action("EditProduct", "Inventory")?id=' + Id}" title="Edit Product">
<img src="~/Images/edit.png" height="15" width="15" alt="" />
</a>
</td>
<td class="calign leftbordernone" style="width:50px">
<a data-bind="click: function () { DeleteProduct(Id); }" href="" title="Delete Product">
<img src="~/Images/delete.png" height="15" width="15" alt="" />
</a>
</td>
<td class=" lalign leftbordernone" style="width:90px" data-bind="text: ProductCode"></td>
<td class=" lalign" data-bind="text: ProductName"></td>
<td class=" lalign" style="width:70px" data-bind="text: CategoryName"></td>
<td class=" lalign" style="text-align:center;width:40px">
<input type="checkbox" disabled="disabled" class="chkbox" data-bind="checked:IsActive" />
</td>
<td class=" lalign" style="text-align:right" data-bind="text: formatPrice(SalesPrice)"></td>
<td class=" lalign" style="text-align:right" data-bind="text: QtyperUnit"></td>
<td class=" lalign" style="text-align:right" data-bind="text: LeadTime"></td>
<td class=" lalign" style="text-align:right" data-bind="text: CurrentStock"></td>
<td class=" lalign" style="text-align:right" data-bind="text: ReorderLevel"></td>
<td class=" lalign rightbordernone" style="text-align:center">
<input type="checkbox" disabled="disabled" class="chkbox" data-bind="checked: Reserved" />
</td>
</tr>
</tbody>
</table>
最佳答案
I want to sort table according checkboxes
为此,您需要比较列内 input
的 checked
属性。
在您的 rows.sort
方法中使用如下比较器:
$rows.sort(function(a, b) {
var value1= $(a).find('td').eq(idx).find("input")[0].checked,
value2 = $(b).find('td').eq(idx).find("input")[0].checked;
return (value1 > value2);
}
其中idx
是被单击的标题列的索引。
这是一个完整的工作演示,可对多列进行排序(代码注释中的说明)...
片段:
var $buttons = $('.sort'), $tab = $("#tab");
$buttons.click(function(e) {
var self = this,
$rows = $tab.find("tbody > tr"),
idx = $buttons.index(this); // index of the header which is clicked
$rows.sort(function(a, b) {
var $obj1 = $(a).find('td').eq(idx), // which cell column based on index
$obj2 = $(b).find('td').eq(idx),
value1, value2;
if ($obj1.text().length > 0) { // if the cell contains text
value1 = $obj1.text().toUpperCase(); // use the text value
value2 = $obj2.text().toUpperCase();
} else { // if the cell does not contain text
value1 = $obj1.find("input")[0].checked; // use the checked property..
value2 = $obj2.find("input")[0].checked // .. of the input
}
// check if ascending or not
if ($(self).hasClass('asc')) return (value1 > value2);
else return (value1 < value2);
});
$(this).toggleClass('asc'); // toggle class for next ascending-descending sort
// perform physical reordering
$.each($rows, function(index, row){
$tab.append(row);
});
});
table, th, td { border: 1px solid #ddd; border-collapse: collapse; }
th, td { padding: 4px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab">
<thead>
<tr>
<th><a href="#" class="sort asc">IsReserved</a></th>
<th><a href="#" class="sort asc">Caption</a></th>
<th><a href="#" class="sort asc">Other</a></th>
</tr>
</thead>
<tr><td><input type="checkbox" /></td><td>One</td><td>1</td></tr>
<tr><td><input type="checkbox" checked /></td><td>Two</td><td>2</td></tr>
<tr><td><input type="checkbox" /></td><td>Three</td><td>3</td></tr>
<tr><td><input type="checkbox" checked /></td><td>Four</td><td>4</td></tr>
<tbody>
</tbody>
</table>
关于javascript - 根据表格列中的复选框列表对 html 表格进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32564074/