Организация многомерного списка заказов

Question

Организация многомерного списка заказов

0

У меня есть ul → ul... list и вы хотите его организовать. Это немного странный дизайн, но тот, который подходит:

<ul id="files">
    <li class="folder">
        <span>folder 5</span>
        <ul>
            <li class="folder">
                <span>folder</span>
                <ul>
                    <li class="folder">
                        <span>folder</span>
                        <ul>
                            <li class="file">file1.js</li>
                            <li class="file">file2.js</li>
                        </ul>
                    </li>
                </ul>
                <li class="file">file.js</li>
            </li>
            <li class="folder">
                <span>folde1r</span>
                <ul>
                    <li class="file">file3.js</li>
                    <li class="file">file4.js</li>
                </ul>
            </li>
            <li class="folder">
                <span>folde2</span>
                <ul>
                    <li class="file">file3.js</li>
                    <li class="file">file4.js</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="///file file.js">file5.js</li>
    <li class="///file file.js">file2.js</li>
    <li class="///file file.js">file1.js</li>
</ul>

Поэтому сначала были организованы папки, а затем файлы с папками, обычный список файлов (az). Я смотрел на крошечный вид http://tinysort.sjeiti.com/ - но это только полезно для одного ul>li list.

$('#files li span').tsort();

jsFiddle: http://jsfiddle.net/CezarisLT/8bK3f/

Может ли кто-нибудь помочь?

Kivylius 08 май 2014, в 22:03

Источник

0

Не является ли $('li').tsort(); дает вам правильные результаты? jsfiddle.net/wMBkL
sroes 12 май 2014, в 14:03
0

@sroes Sroes Я понятия не имею, как это работает, но это работает, спасибо. Опубликуйте это как ответ и объясните, как и плохо я даю вам +50. Например, как узнать, как переместить папки вверх?
Kivylius 12 май 2014, в 14:07
0

Не полагайтесь на DOM для этого, это медленно и неэффективно. Выполните свою логику в js, используя надлежащие объекты / массивы, затем отрендерируйте все только один раз. Используйте либо Backbone.js, Angular.js, Ember.js ... но не jQuery.
moonwave99 12 май 2014, в 14:19
0

Смотри мой ответ. Выше работает, потому что в вашем HTML, папки уже находятся над файлами (на ул). В своем ответе я также объяснил, как всегда форсировать папки над файлами.
sroes 12 май 2014, в 14:19

Показать ещё 2 комментария

Теги:

javascript

jquery

html5

jquery-ui

organization

1 ответ

Ещё вопросы

Не является ли $('li').tsort(); дает вам правильные результаты? jsfiddle.net/wMBkL
@sroes Sroes Я понятия не имею, как это работает, но это работает, спасибо. Опубликуйте это как ответ и объясните, как и плохо я даю вам +50. Например, как узнать, как переместить папки вверх?
Не полагайтесь на DOM для этого, это медленно и неэффективно. Выполните свою логику в js, используя надлежащие объекты / массивы, затем отрендерируйте все только один раз. Используйте либо Backbone.js, Angular.js, Ember.js ... но не jQuery.
Смотри мой ответ. Выше работает, потому что в вашем HTML, папки уже находятся над файлами (на ул). В своем ответе я также объяснил, как всегда форсировать папки над файлами.

sroes · Accepted Answer · 2014-05-12T11-43-00.000Z

$('#files li span') не соответствует всем элементам в списке. Вместо этого попробуйте следующее:

$('#files li').tsort();

http://jsfiddle.net/WRqaE/

Если вам также необходимо отсортировать папки, вы можете предоставить настраиваемую функцию сортировки, чтобы всегда класть папки над файлами:

$('#files li').tsort('', {
    sortFunction: function(a, b) {
        if (a.e.hasClass('folder') && !b.e.hasClass('folder')) {
            return -1;
        } else if (!a.e.hasClass('folder') && b.e.hasClass('folder')) {
            return 1;
        }
        return a.s === b.s ? 0 : (a.s > b.s ? 1 : -1);
    }
});

http://jsfiddle.net/pC24j/