使用jQuery按字母顺序对列表中的列进行排序
本文关键字:排序 列表 jQuery 顺序 使用 | 更新日期: 2023-09-27 18:29:10
这里我有一个无序列表,显示两列code
和name
。我使用javascript对列表进行排序。但它正在对整个列表进行排序。我需要根据代码和名称对列表进行排序,这意味着将有两个按钮,一个按钮用于根据代码对列表排序,另一个按钮则用于根据名称对列表排序。这是我的代码
function sortUnorderedList(ul, sortDescending) {
if(typeof ul == "string")
ul = document.getElementById(ul);
// Get the list items and setup an array for sorting
var lis = ul.getElementsByTagName("LI");
var vals = [];
// Populate the array
for(var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i].innerHTML);
// Sort it
vals.sort();
// Sometimes you gotta DESC
if(sortDescending)
vals.reverse();
// Change the list on the page
for(var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i];
}
和
window.onload = function () {
var desc = false;
document.getElementById("stCodeDSC").onclick = function () {
sortUnorderedList("list3", desc);
desc = !desc;
return false;
}
}
和
<div id="l1" style="width: 100%; height: 171px; overflow: auto; ">
<asp:ListView ID="ListView1" runat="server" ViewStateMode="Disabled">
<LayoutTemplate>
<ul id="list3" class="conn" style="width: 90%; height: 171px;">
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate>
<li class="add" onclick="hilite()" id ="l3" >
<table style="width: 100%;">
<tr style="width: 100%;">
<td class="border2" style="width: 50%;">
<%# Eval("code") %>
</td>
<td class="border2" style="width: 50%;">
<%# Eval("Name") %>
</td>
</tr>
</table>
</li>
</ItemTemplate>
</asp:ListView>
</div>
有什么建议吗?
编辑:
function sortUnorderedList(ul, sortDescending, sortClass) {
if (typeof ul == "string") {
ul = document.getElementById(ul);
}
var lis = ul.getElementsByTagName("LI");
var vals = [];
for (var i = 0, l = lis.length; i < l; i++) {
vals.push({
sortFieldVal: lis[i].getElementsByClassName(sortClass)[0].innerText,
val: lis[i].innerHTML
});
}
vals.sort(function (a, b) {
var nameA = a.sortFieldVal.toLowerCase(), nameB = b.sortFieldVal.toLowerCase()
if (nameA < nameB) //sort string ascending
return -1
if (nameA > nameB)
return 1
return 0 //default return value (no sorting)
});
if (sortDescending) vals.reverse();
for (var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i].val;
}
window.onload = function () {
var desc = false;
document.getElementById("stCodeDSC").onclick = function () {
sortUnorderedList("list3", desc, "code");
desc = !desc;
return false;
}
document.getElementById("stNameDSC").onclick = function () {
sortUnorderedList("list3", desc, "name");
desc = !desc;
return false;
}
}
和
<img src="../Images/Sort_down.png" width="8" height="18" id="stCodeDSC">
<img src="../Images/sort_up.png" width="8" height="18" id="stNameDSC">
嘿,你可能需要在提到的HTML中有一些清晰度,也许这就是你想要的:demohttp://jsfiddle.net/jKSsW/
这是在Jquery中。请让我知道,如果你标记的问题错了,我会删除我的帖子!
希望有帮助,加油!