Solved

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

Posted on 2014-09-04
3
316 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
ID: 40304875
and "test" come from?...
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40304888
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
ID: 40304903
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

919 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

16 Experts available now in Live!

Get 1:1 Help Now