?
Solved

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

Posted on 2014-09-04
3
Medium Priority
?
330 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40304875
and "test" come from?...
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

800 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