Solved

Build linking table from html multi-level ordered list <ol>

Posted on 2014-09-04
3
312 Views
Last Modified: 2014-09-07
I have an Ordered List in a webpage that I allow users to drag <li> to re-order. The list is a multi-level similar to below, but can have may more levels.
<ol>
    <li id="1">test
        <ol>
            <li id="5">test</li>
            <li id="6">test</li>
            <li id="4">test
                <ol>
                    <li id="3">test</li>
                    <li id="2">test</li>
                    <li id="7">test</li>
                </ol>
            </li>
        </ol>
    </li>
    <li id="9">test</li>
</ol>

I ultimately need to create a table on server side in sql that looks like this (based on above list). Serial column is ID of the li. Parentid is serial of what level it is in and sort is the order in the level.

serial      parentid         sort
1              null                  0
5             1                  0
6             1                  1
4             1                  2
3             4                  0
2             4                  1
7             4                  2
9             null                  1

The list is multi-level ( could be more than 3 levels) and the text in the <li> is not important, only the ID's and which parent it is associated with. Not sure if it is easier to cycle thru on client side to build an array or just pass the whole list back to server side and parse thru it on the server. Getting the ID's (serial) is not an issue, it is getting which parent to link it to has been the challenge.
0
Comment
Question by:Cubbybulin
  • 2
3 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
and "test" come from?...
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
Use : select serial, parent, sort from table order by parent, sort, serial
So it sorted.
and the following : http://jsfiddle.net/uh91xayz/

var results = [
 [1,null,0],
 [5,1,0],
 [6,1,1],
 [4,1,2],
 [3,4,0],
 [2,4,1],
 [7,4,2],
 [9,null,1]
];

for(var i=0;i<results.length;i++) {
    var serial_column = results[i][0];
    var parent_column = results[i][1];
    var   sort_column = results[i][2];
    var   text_column = "test, serial is" + serial_column;
    var parent = $("ol:first");
    if(parent_column) {
        parent = $("#"+parent_column+" ol");
        if(parent.length==0) {
            $("#"+parent_column).append("<ol/>");
            parent = $("#"+parent_column+" ol");
        }
    }
    parent.append("<li data-order='" + sort_column + "' id='" + serial_column + "'>" + text_column + "</li>");
}

Open in new window

0
 

Author Comment

by:Cubbybulin
Comment Utility
The <ol> originally comes from the database. The list is created from the linking table that I showed previously. The "test" is from a different table that is associated to the linking table but irrelevant at this point. The issue is that I allow users to drag and drop list items to reorganize the list. I don't have an issue building the html <ol> from the table. What I need to do is the reverse. After a user modifies the structure I need to parse thru the <ol> list and recreate the linking table (I will erase what was originally there each time and recreate). So I need to build the array somehow in java and send back to server side to repopulate the linking table based on new structure. Hope that makes sense.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now