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

Assembly INVOKE A procedure

assembly masm

I am trying to invoke a simple procedure in assembly, but I cannot get it to work properly.

Gradle build: does someone tried alternative build script with alternative setting.gradle?

build command-line-arguments gradle

I am using gradle 1.4, and renamed a build.gradle to buildExpr.gradle and settings.gradle to settingExpr.gradle, both files are in the project root, and I am using following command to run gradle b...

TableView doesn't allow scrolling if it contains only a few rows

ios scroll tableview

In my navigation controller, I have a TableView with a searchbar at the top. I want this searchbar hidden unless the user drags the table down (as in how it works in the Music app). But if my tabl...