UI Useability - Reordering and merging columns

Question

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>
</ul>

would become:

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

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.

Answer 1

I'd say to stick with using tables for tabular data, unordered lists don't seem to suit the content as much.

Answer 2

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.