Как получить структуру ul из HTML

Question

Я создаю страницу конфигурации, которая разбивает дерево категорий на 3 столбца для удобного просмотра, например:

**Column 1**            **Column 2**             **Column3**  
   Category1               Category3                Category5
    *SubCategory1*         Category4                  *SubCategory5*
   Category2                 *SubCategory4*           *SubCategory6*
     *SubCategory2*        etc.
     *SubCategory3*  

Я использую jsp, jquery и struts2. Я пытаюсь настроить порядок отображения категорий / подкатегорий. Теперь я показываю такую ​​структуру и могу перетаскивать их из столбца в другой, сортировать категории столбца и сортировать подкатегории, используя jquery и изменяя непосредственно HTML, но я не понимаю, как получить данные измененной структуры, чтобы сохранить ее в моей БД.

Answer 1

Мне недавно пришлось сделать нечто подобное в моем личном проекте, но я никогда не заканчивал тем, что использовал функцию, для которой писал, но вот код, который я использовал:

function refactor() {
    var array = jQuery.makeArray($('ul#remapped > li:not(.target)'));
    var mappedArray = jQuery.map(array, function(i) {
        var merged = $(i).find('ul.merge > li:not(.target) > span');
        return {
            column: $(i).children('span').text(),
            merged: jQuery.map(jQuery.makeArray(merged), function(mi) { return { column: mi.innerText }; })
        };
    });

    var xml = '<columns>';
    jQuery.each(mappedArray, function(index, item) {
        xml += '\n\t<column>';
        xml += '\n\t\t<name>' + item.column + '</name>';
        if (item.merged.length > 0) {
            xml += '\n\t\t\t<merged>';
            jQuery.each(item.merged, function(mindex, mitem) {
                xml += '\n\t\t\t\t<name>' + mitem.column + '</name>';
            });
            xml += '\n\t\t\t</merged>';
        }
        xml += '\n\t</column>';
    });
    xml += '\n</columns>';

    $('div#result').load('/Tools/Csv/Refactor', { mapping: xml });
}

По сути, пользователь будет использовать пользовательский интерфейс для перетаскивания по своему усмотрению, чтобы создать желаемую структуру. Затем они нажимают кнопку, которая выполняет этот метод.

Запрос $ ('ul # remapped') - это элемент (в моем коде), который содержал новую структуру, а затем я сделал несколько дополнительных запросов, опять же, основываясь на моей структуре DOM, для извлечения значений, которые мне нужны DOM и сгенерировать строку XML, которая затем была отправлена ​​на сервер.

Я уверен, что это не точно , что вам нужно, но я надеюсь, что это достаточно близко, чтобы вы могли изменить его для того, что вам нужно.

Answer 2

Я предполагаю, что структура будет изменена путем перетаскивания. Вы можете совершать ajax-вызов каждый раз, когда происходит изменение структуры, и обновлять данные в имеющейся таблице CategorySucategories. Я не знаю вашу структуру БД, поэтому я тоже сделал предположение об этом.