Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.11.2010, 21:15
Новичок на форуме
Отправить личное сообщение для Professor Посмотреть профиль Найти все сообщения от Professor
 
Регистрация: 10.11.2010
Сообщений: 3

Jquery UI Sortable, автоматическая сортировка объектов по нажатию кнопки.
Необходимо при нажатии на кнопку отсортировать все объекты по имени(допустим имя будет храниться в каком либо атрибуте вложенного в LI объекта).
Но нужного метода не нашел. Возможно ли это реализовать методами данного плагина?

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

Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 11.11.2010, 09:48
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от Professor
Принимаются советы и без использования 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>
Ответить с цитированием
  #3 (permalink)  
Старый 11.11.2010, 09:55
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

млин... ИЕ онли...
Ответить с цитированием
  #4 (permalink)  
Старый 11.11.2010, 10:55
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Вот так...

<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 11.11.2010, 12:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

ещё вариант...сортировка вынесена в отдельную функцию, поэтому условия сортировки можно легко менять, в данном случае корректно отсортирует 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>
Ответить с цитированием
  #6 (permalink)  
Старый 11.11.2010, 16:17
Новичок на форуме
Отправить личное сообщение для Professor Посмотреть профиль Найти все сообщения от Professor
 
Регистрация: 10.11.2010
Сообщений: 3

Спасибо большое за варианты!
Воспользовавшись ими и еще 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 + ")"));

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery ui sortable + draggable giGnet jQuery 1 08.03.2011 19:37
Редирект по нажатию кнопки с передачей параметров. i.m.not.the.one Элементы интерфейса 11 26.08.2010 09:41