jquery - ordenadas - numeracion en html

Cómo obtener la estructura ul de HTML

Question

Estoy haciendo una página de configuración, que divide un árbol de categorías en 3 columnas para una fácil navegación como:

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

Estoy usando jsp, jquery y struts2. Lo que intento hacer es configurar el orden en que se muestran las categorías / subcategorías. Ahora muestro la estructura de esa manera, y puedo arrastrarlos de una columna a otra, ordenar las categorías de una columna y ordenar las subcategorías, usando jquery y modificando directamente el HTML, pero no me doy cuenta de cómo obtener el datos de la estructura modificada para persistir sobre mi base de datos.

Answer 1

Recientemente tuve que hacer algo similar en un proyecto personal mío, pero nunca terminé usando la función para la que estaba escribiendo, pero aquí está el código que utilicé:

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 });
}

Básicamente, el usuario usaría la interfaz de usuario para arrastrar y colocar a su gusto para crear la estructura que desea. Luego, hacen clic en un botón que ejecuta este método.

La consulta $ (''ul # reasignado'') es el elemento (en mi código) que contenía la nueva estructura, y luego realicé algunas consultas adicionales, de nuevo, basadas en mi estructura DOM, para extraer los valores que necesitaba del DOM y generar una cadena XML, que luego se publicó en el servidor.

Estoy seguro de que esto no es exactamente lo que necesita, pero espero que esté lo suficientemente cerca como para que pueda modificarlo para lo que necesita.

Answer 2

Supongo que la estructura se modifica arrastrando y soltando. Puedes hacer una llamada ajax cada vez que ocurra un cambio en la estructura y actualizar los datos en la tabla CategorySucategories que tienes. No sé su estructura de DB, así que hice una suposición sobre eso también.