UI Useability - Reordering and merging columns

I'm writing a little web-based utility for my brother who needs to merge columns in a CSV file. I know things like this surely exist somewhere, but a large part of this is that is a fun little exercise.

Anyways, I'm trying to figure out the best/neatest way to present the part of the UI where he reorders the columns and chooses which columns get merged.

The jQuery UI "selectable" interaction provides about 85% of what I need - the simple reordering of the columns - but I'm having a bit of a rough time with the merging. What I'm trying to do is make it so that "merged" columns become a nested list under a single item.

For example:

<ul id="columns">
<li>Column 1</li>
<li>Column 2</li>

would become:

<ul id="columns">
<li>Column 1<ul class="merge"><li>Column 2</li></ul></li>

This is proving to be a bit more of a pain than I anticipated, so I was wondering if anyone had any ideas for a better way to present the overall UI. I'm fairly comfortable in jQuery, so bonus points if it can be done in jQuery :D

@dylanfm: This isn't tabular data - it's just a list of column names, but no actual data. Besides, the specific HTML element I use is hardly at the heart of what I'm asking.

@smo: I like the simplicity of your idea, but the problem is that there are several dozen different columns, so listing every column once per column would unfortunately be out of the question.

@strager: That's pretty much exactly what I've been trying to do, it's just that particulars of making UI respond the way I want have been giving me problems. I'll give you the answer for now, and I guess it's back to the salt mines for me.


Basic steps:

  1. Grab the list of columns to be merged as an array of <li>'s.
    • If you're merging two already-merged columns (or one of the colums is already merged), extract each column in the group. In your structure, you'd want to make "Column 1" have its own <li> without the child <ul>.
    • You'd probably want to clone these, as you'll be deleting the original nodes in (6).
  2. Create a new <ul> node, adding the proper "merged" className.
  3. Add all the <li>'s you gathered in (1), except the first one, and insert them as children to the <ul>.
  4. Insert the <ul> as the last child of the first <li> you gathered in (1).
  5. Insert the <li> (parent in (4)) as a child of the column list ($('#columns')).
  6. Delete the original columns which you were going to merge.

Need Your Help

Best way to separate data from DOM

javascript jquery model-view-controller architecture

I have this time tracking / task managment tool I'm working on called Task Ranger. Basically you make a tree of tasks and sub-tasks, click on whichever task you're currently working on, and your t...

WCF DataContractJsonSerializer and setting DateTime objects to UTC?

c# asp.net wcf datetime serialization

Is there a universal way to instruct the DataContractJsonSerializer to use UTC for dates? Otherwise, I have to add .ToUniversalTime() to all of my date instances. Is this possible? The reason is that

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.