[英]Using jQuery or javascript to render json into multi-column table
[英]Sort multi-column list alphabetically/by date without using a table in HTML/javascript/jQuery as Dropbox has done
我想在不使用表的情況下對多列列表進行排序。 我知道單列列表的解決方案,但我似乎找不到一個在多個UI /列上排序,同時保持列表/行項目在一起。
最后,我想做一些類似於Dropbox為顯示文件所做的事情。 是的,Dropbox不使用可排序表。 這是一個列表,而不是tr與一堆div而不是td的。
我不想使用表格,因為表格會讓我為造型目的而瘋狂。 另外,我不想使用插件(如tablesorter.js),因為javascript有一個內置的sort()函數,所以它不能是那么多行代碼。
無論如何,這是一個很好的單列演示,取自另一個SO問題,以及原始的SO參考 。
基本上我想做小提琴里的東西但是能夠按名字排序,例如地址,這里是一個小提琴,建立在這個第一個小提琴上,你可以看到我想去哪里用這個http:// jsfiddle .net / trpeters1 / De8Ku / 955 / 。 正如您將注意到的,這個小提琴無法根據我想要找到解決方案的地址進行排序。
更新非常感謝eterps(見下文),現在小提琴可以按多列排序。 我現在想接下來包括按日期排序。 這是一個小提琴,試圖嘗試,但不是很有效。 你會注意到我試圖將innerHTML轉換為Date()對象,但這並沒有解決這個問題。 http://jsfiddle.net/trpeters1/De8Ku/983/
在這個小提琴中,有人可以幫助解釋為什么日期的排序仍然只是字母/數字而不是日期?
使用您在jsFiddle示例中提供的代碼,您可以向span標記添加一些標識信息,以將文本區分為列。 然后,您可以使用該信息進行排序。 我更改了jsFiddle示例以使用排序函數來查看指定的列。 我確信有更優雅的方法可以做到這一點,但它應該讓你開始。
http://jsfiddle.net/De8Ku/976/
這是代碼,以防jsFiddle不工作或有人想編輯這個答案:
HTML:
<input type="button" id="test" value="sort by names"/>
<input type="button" id="test1" value="sort by address"/>
<ul id="list">
<li ><span class="name">peter</span><span class="address"> 812 jones st.</span></li>
<li><span class="name">zack</span><span class="address"> 512 jones st.</span></li>
<li><span class="name">alex</span><span class="address"> 712 jones st.</span></li>
<li><span class="name">sue</span><span class="address"> 112 jones st.</span></li>
<li><span class="name">jenny</span><span class="address"> 912 jones st.</span></li>
</ul>
JS:
function sortUnorderedList(ul, sortDescending, sortClass) {
if (typeof ul == "string") {
ul = document.getElementById(ul);
}
var lis = ul.getElementsByTagName("LI");
var vals = [];
// Instead of filling an array with list items,
// create an array of objects that contain the list item itself,
// and the value from the sort-by column
for (var i = 0, l = lis.length; i < l; i++) {
vals.push({
sortFieldVal: lis[i].getElementsByClassName(sortClass)[0].innerText,
val: lis[i].innerHTML
});
}
// Use a sort function to compare string values of sortFieldVal for each item
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("test").onclick = function() {
sortUnorderedList("list", desc, "name");
desc = !desc;
return false;
}
document.getElementById("test1").onclick = function() {
sortUnorderedList("list", desc, "address");
desc = !desc;
return false;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.