- 首页
- 其他开发
- 使用 PrototypeJS 对 Div 进行排序
使用 PrototypeJS 对 Div 进行排序
[英] Sorting Div's With PrototypeJS
本文介绍了使用 PrototypeJS 对 Div 进行排序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找使用 PrototypeJS 对 div 进行排序的帮助.这是我目前所拥有的:
document.observe('dom:loaded',function(){$$('.sortcol').invoke('observe', 'click', function() {如果 (this.hasClassName('desc')) {var desc = false;this.removeClassName('desc');} 别的 {var desc = true;this.addClassName('desc');}var colname = this.className;var contentid = this.up(2).id;sortColumn(contentid,colname,desc);});});函数 sortColumn(contentid,colname,desc) {$$('#'+contentid).select('.'+colname).sort(function(a,b){如果(降序){返回 (a.text.toLowerCase() >= b.text.toLowerCase() ) ?-1:1；} 别的 {返回 (a.text.toLowerCase()
示例数据:
<div class="userListHeader"><div class="userListHeaderCell col1">名字</div><div class="userListHeaderCell col2">姓氏</div>
<div id="contentbox_People"><div class="userListRow"><div class="userListCell col1">John</div><div class="userListCell col2">Smith</div>
<div class="userListRow"><div class="userListCell col1">Bob</div><div class="userListCell col2">Ray</div>
<div class="userListRow"><div class="userListCell col1">Fred</div><div class="userListCell col2">Jones</div>
基本上任何带有sortcol"类的东西，当它被点击时，我希望它按点击的列名(类)排序.第一个问题是当有多个类时，我需要能够正确获取类名.这些类都像 col1、col2 等.我如何找到正确的类?
第二件事是改变 sortColumn 以便将列数据保持在一起(每行由另一个 div 包装)并输出结果，替换当前数据.
这需要在prototypejs中完成，我无法将代码更改为表格.
在此先感谢您的帮助.
解决方案
对于你问题的第一部分，如果列名是它自己的属性，如 rel 或 会容易得多="http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes" rel="nofollow">data-*，但你说你不能改变 HTML.可以使用正则表达式挑选出最可能的类...
var colname = this.className.match(/\bcol\d+\b/).first()
但是如果我们假设每一行都有相同顺序的相同列，那么这是不必要的.如果使用表格，这将是一个更安全的假设.
var colnumber = this.up().childElements().indexOf(this);
问题的第二部分很简单，只需对行而不是单元格进行排序.
你的草稿 sortColumn 函数实际上并没有改变元素 - select 返回一个元素引用数组，而不是它们的容器——所以你需要对结果数组做一些事情.幸运的是，元素的任何 append 或 insert 操作都会使其首先从其父元素中删除，因此只需再次附加它们，它们就会采用正确的顺序.不需要替换，我见过奇怪地将元素转换为 HTML、连接然后重新插入它的库！?！
以下已经过测试.
document.observe('dom:loaded',function() {$$('.userListHeaderCell').invoke('observe', 'click', function() {this.toggleClassName('desc');var colnumber = this.up().childElements().indexOf(this);var content = this.up(2);//直接使用元素而不是它的 IDsortColumn(content, colnumber, this.hasClassName('desc'));});});功能 sortColumn(内容，colnumber，desc){content.select('.userListRow').sort(function(a,b){var atext = a.down(colnumber).innerHTML.stripTags().toLowerCase();var btext = b.down(colnumber).innerHTML.stripTags().toLowerCase();返回 atext.localeCompare(btext) * (desc ? -1 : 1);}).each(Element.prototype.appendChild, content);}
I am looking for some help in sorting div's with PrototypeJS. Here is what I have so far:
document.observe('dom:loaded',function(){
$$('.sortcol').invoke('observe', 'click', function() {
if (this.hasClassName('desc')) {
var desc = false;
this.removeClassName('desc');
} else {
var desc = true;
this.addClassName('desc');
}
var colname = this.className;
var contentid = this.up(2).id;
sortColumn(contentid,colname,desc);
});
});
function sortColumn(contentid,colname,desc) {
$$('#'+contentid).select('.'+colname).sort(function(a,b){
if (desc) {
return (a.text.toLowerCase() >= b.text.toLowerCase() ) ? -1 : 1;
} else {
return (a.text.toLowerCase() < b.text.toLowerCase() ) ? -1 : 1;
}
});
}
Example data:
<div id="contentbox_Users" class="userList">
<div class="userListHeader">
<div class="userListHeaderCell col1">First Name</div>
<div class="userListHeaderCell col2">Last Name</div>
</div>
<div id="contentbox_People">
<div class="userListRow">
<div class="userListCell col1">John</div>
<div class="userListCell col2">Smith</div>
</div>
<div class="userListRow">
<div class="userListCell col1">Bob</div>
<div class="userListCell col2">Ray</div>
</div>
<div class="userListRow">
<div class="userListCell col1">Fred</div>
<div class="userListCell col2">Jones</div>
</div>
</div>
</div>
Basically anything with a class "sortcol", when it is clicked, I want it to sort by the column name clicked (class). The first issue is I need to be able to get the class name correctly when there is multiple classes. The classes are all like col1, col2, etc. How would I find the correct class?
The second thing is changing sortColumn so that it keeps column data together (each row is wrapped by another div) and output the result, replacing the current data.
This needs to be done in prototypejs and I can't change the code to tables.
Thanks in advance for the help.
解决方案
For the first part of your question it would be much easier if the column name was it's own attribute like rel or data-*, but you say you cannot change the HTML. It is possible to pick out the likeliest class with regex...
var colname = this.className.match(/\bcol\d+\b/).first()
But this is unnecessary if we assume every row has the same columns in the same order. This would be a safer assumption if a table were used.
var colnumber = this.up().childElements().indexOf(this);
The second part of your question is easy, just sort the rows instead of the cells.
Your draft sortColumn function doesn't actually change the elements - select returns an array of element references, not their container - so you need to do something with the resulting array. Luckily any append or insert action of an element causes it to be removed from it's parent first, so simply append them once more and they'll assume the correct order. No replacing is needed, I've seen libraries that bizarrely convert the elements to HTML, concatenate that then reinsert it!?!
The following has been tested.
document.observe('dom:loaded',function() {
$$('.userListHeaderCell').invoke('observe', 'click', function() {
this.toggleClassName('desc');
var colnumber = this.up().childElements().indexOf(this);
var content = this.up(2); // use the element directly instead of it's ID
sortColumn(content, colnumber, this.hasClassName('desc'));
});
});
function sortColumn(content, colnumber, desc) {
content.select('.userListRow').sort(function(a,b){
var atext = a.down(colnumber).innerHTML.stripTags().toLowerCase();
var btext = b.down(colnumber).innerHTML.stripTags().toLowerCase();
return atext.localeCompare(btext) * (desc ? -1 : 1);
}).each(Element.prototype.appendChild, content);
}
这篇关于使用 PrototypeJS 对 Div 进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
