?
Solved

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

Posted on 2014-09-04
3
Medium Priority
?
333 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 83

Expert Comment

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

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
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 embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

612 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