Solved

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

Posted on 2014-09-04
3
321 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

810 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