Вход

Просмотр полной версии : Jquery UI Sortable, автоматическая сортировка объектов по нажатию кнопки.

Professor
10.11.2010, 21:15
Необходимо при нажатии на кнопку отсортировать все объекты по имени(допустим имя будет храниться в каком либо атрибуте вложенного в LI объекта).
Но нужного метода не нашел. Возможно ли это реализовать методами данного плагина?

Или хотя бы как программно(в смысле не двигая мышкой) менять положения блоков <li> в объекте <ul>? Принимаются советы и без использования Jquery.

Заранее спасибо.
ksa
11.11.2010, 09:48
Принимаются советы и без использования Jquery.
Тогда т.с. для затравки... :)

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function fnSwap(){
oList.children(0).swapNode(oList.children(1));
}
</script>
</head>
<body>
<UL ID = oList>
<LI>List Item 1
<LI>List Item 2
<LI>List Item 3
<LI>List Item 4
</UL>
<INPUT TYPE = 'button' VALUE = "Swap List" onclick = "fnSwap()">
</body>
</html>
ksa
11.11.2010, 09:55
млин... ИЕ онли...
ksa
11.11.2010, 10:55
Вот так...

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function Sort() {
var o=document.getElementById('oList')
var ol=o.getElementsByTagName('li')
var i
var move
do {
move=false
for (i=0; i<ol.length-1; i++) {
if (ol[i].innerHTML>ol[i+1].innerHTML) {
o.appendChild(ol[i])
move=true
}
}
} while (move)
}
</script>
</head>
<body>
<UL ID = 'oList'>
<LI>List Item 2</LI>
<LI>List Item 4</LI>
<LI>List Item 1</LI>
<LI>List Item 3</LI>
</UL>
<INPUT TYPE = 'button' VALUE = "Sort List" onclick = "Sort()">
</body>
</html>
рони
11.11.2010, 12:02
ещё вариант...сортировка вынесена в отдельную функцию, поэтому условия сортировки можно легко менять, в данном случае корректно отсортирует List Item больше 9
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function Sort() {
var f = document.getElementById("oList"),
b = f.getElementsByTagName("li"),
a, c = [];
for (a = 0; a < b.length; a++) c[a] = b[a];
c.sort(function (d, e) {
d = +d.innerHTML.replace(/.*?(\d+).*?/, "$1");
e = +e.innerHTML.replace(/.*?(\d+).*?/, "$1");
return d - e
});
for (a = 0; a < b.length; a++) f.appendChild(c[a])
};
</script>
</head>
<body>
<UL ID = 'oList'>
<LI>List Item 2</LI>
<LI>List Item 33</LI>
<LI>List Item 1</LI>
<LI>List Item 4</LI>
</UL>
<INPUT TYPE = 'button' VALUE = "Sort List" onclick = "Sort()">
</body>
</html>
Professor
11.11.2010, 16:17
Спасибо большое за варианты!
Воспользовавшись ими и еще 1 темой с этого форума получилось нечто такое.

$("#rrr").toggle(function(){
//здесь хранятся объекты
var trs = new Array();
//Здесь хранится список названий объектов
var seq = new Array();
var i = 0;
$("ul#sortable li").each(function() {
seq[i]=$("ul#sortable li:eq(" + i + ") .name").html();
trs[seq[i]] = $("ul#sortable li:eq(" + i + ")");
i ++;
});

//сортируем список названий объектов
seq.sort()

var o=seq.length;
for (a = -1; a < seq.length; a++){
var tr=trs[seq[o]]
if (typeof(tr) != 'undefined') {
tr.insertAfter($("ul#sortable li:eq(" + a + ")"));
}
o--;
}

return false;
},
function(){
var trs = new Array();
var seq = new Array();
var i = 0;
$("ul#sortable li").each(function() {
seq[i]=$("ul#sortable li:eq(" + i + ") .name").html();
trs[seq[i]] = $("ul#sortable li:eq(" + i + ")");
i ++;
});

seq.sort()
var o=0;
for (a = -1; a < seq.length-1; a++){
var tr=trs[seq[0]]
if (typeof(tr) != 'undefined') {
tr.insertAfter($("ul#sortable li:eq(" + a + ")"));
}
o++
}

return false;

});


И того должна получиться сортировка по возрастанию и убыванию.
Но почему то исчезает самый маленький элемент.
Я думаю что он просто не вставляется здесь tr.insertAfter($("ul#sortable li:eq(" + a + ")"));

Но как я не мучался, ничего не получается. Может вы подскажете что я не так делаю?