Форумы портала PHP.SU :: Версия для печати :: Jquery сортировка дерева с подкатегориями

1. Rooner - 25 Июня, 2013 - 13:12:31 - перейти к сообщению

Помогите найти работающий пример сортировки дерева категорий на Jquery. Везде в интернете только простой вариант http://www[dot]wisdomweb[dot]ru/editor/w[dot][dot][dot]e=jquid_sortable
Но там можно только менять местами элементы, а мне еще нужна возможность делать из категорий подкатегории методом переноса. В cms Drupal так реализовано и довольно удобно.

2. caballero - 25 Июня, 2013 - 13:28:52 - перейти к сообщению

http://www[dot]jstree[dot]com/

3. Rooner - 25 Июня, 2013 - 13:50:13 - перейти к сообщению

caballero, нуууу, это не совсем то, хотелось бы видеть вместо папок и файлов, обычные div'ы, вот как здесь http://grasshopperpebbles[dot]com/im[dot][dot][dot]enu_expanded[dot]gif
(Добавление)
или вот http://ericlondon[dot]com/system/upl[dot][dot][dot]nal/menus-01[dot]jpg

4. IllusionMH - 25 Июня, 2013 - 14:13:48 - перейти к сообщению

Rooner, вы не поверите, но иконки можно задавать свои. Там куча настроек и все работает отлично. Просто в примерах сдлали "каталоги" и "файлы"

5. Rooner - 25 Июня, 2013 - 15:52:13 - перейти к сообщению

Я искал вот это http://mjsarfatti[dot]com/sandbox/nestedSortable/ тут сразу все как надо, осталось только разобраться...
IllusionMH, спс за вариант, но nestedSortable все же подойдет лучше
(Добавление)
IllusionMH, хотя... или лучше http://www[dot]jstree[dot]com/ использовать, надо прикинуть... Закатив глазки

6. IllusionMH - 25 Июня, 2013 - 16:10:49 - перейти к сообщению

Rooner, jstree содержит кучу настрое, так что можно легко запутаться, пока все это будет создаваться. если nestedSortable все делает как нужно, то почему бы и нет.
Проще всего - попробовать быстро накатать небольшой примерчик в двух вариантах и посмотреть, какой проще сделать и изменить Улыбка

7. Rooner - 26 Июня, 2013 - 11:51:36 - перейти к сообщению

К сожалению оказалось, что http://mjsarfatti[dot]com/sandbox/nestedSortable/ глючит с jquery 1.8.3+ и jquery-ui-1.10.3, причем на jquery 1.9+ плагин вообще не работает, ну и проект заброшен, так что буду использовать http://www[dot]jstree[dot]com/

8. Rooner - 26 Июня, 2013 - 15:18:49 - перейти к сообщению

Пытаюсь разобраться с jsTree, хочу сделать обычное дерево с обычными чекбоксами:

Нужно чтобы после каждого выделения чекбокса изменения сохранялись в БД. Пытался найти такой пример в инете, но не нашел, есть только примеры без чекбоксов.
Мб у вас есть такой пример, или знаете где его взять?

Пытаюсь написать обработчик нажатий по чекбоксам, но продвигается медленно...
(Добавление)
Как отметить чекбоксы при первой загрузке дерева? Однако

9. Rooner - 26 Июня, 2013 - 20:59:59 - перейти к сообщению

Написал решение своей задаче, но описывать все тонкости долго, напишу только как проще определить отмеченные галочкой, отмеченные квадратиком и не отмеченные checkbox'ы - определяются по классам:
квадрат jstree-undetermined
галка jstree-checked
пусто jstree-unchecked

Вот сам метод, который срабатывает по клику на любом чекбоксе, он отправляет данные скрипту, а тот пишет в базу

CODE (javascript):
скопировать код в буфер обмена

 
      .bind("change_state.jstree", function (e, d) {
 
        if ((d.args[0].tagName == "A" || d.args[0].tagName == "INS") && (d.inst.data.core.refreshing != true && d.inst.data.core.refreshing != "undefined")) {
          var checked = [];
          var quadro  = [];
          $('.jstree-checked').each(function(){
            var checkedID = $(this).attr('id').substr(5);
            checked[checked.length] = checkedID;
          });
          $('.jstree-undetermined').each(function(){
            var quadroID = $(this).attr('id').substr(5);
            quadro[quadro.length] = quadroID;
          });
          //alert(checked+"\n"+quadro);
 
          var id = d.rslt.attr("id");
          var status = $("#" + id + ".jstree-checked").length!=0;
          $.ajax({
            async : false,
            dataType: 'json',
            type: 'POST',
            url: "/modules/jstree/server.php",
            data : { doing:"change_status", checked: checked, quadro: quadro },
            success : function (r) {
              //alert(r.mes);
            }
          });
        }
      });
 