UI使用性 - 重新排序和合並列

Question

我正在寫我的哥哥有點基於Web的工具誰需要一個CSV文件合併列。我知道這樣的事情肯定存在於某個地方，但其中很大一部分是一個有趣的小練習。

不管怎麼說，我試圖找出呈現在那裏，他重新排序列，並選擇哪些列得到合併了UI的部分最好/最巧妙的方法。

的jQuery UI的「選擇」的互動提供了我所需要的約85％ - 列的簡單重新排序 - 但我有一點粗略的時間與合併。我想要做的是讓「合併」列成爲單個項目下的嵌套列表。

例如：

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

將成爲：

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

這被證明是更痛一點比我預期的，所以我想知道如果任何人有一個什麼想法更好的方式來呈現整個用戶界面。我在jQuery的還算舒服，所以獎勵積分，如果它可以在jQuery中進行：d

@dylanfm：這不是表格數據 - 它只是一個名單之列名，但沒有實際數據。此外，我使用的具體HTML元素幾乎不是我所要求的核心。我很喜歡你想法的簡單性，但問題是有幾個打不同的列，所以每列列每個列不幸的是不會出問題。

@strager：這幾乎是正是我一直試圖做的，它只是使UI響應的方式我想的詳情已給我的問題。現在我會給你答案，我想這是回到鹽礦對我來說。

Answer 1

基本步驟：

1. 抓鬥列的列表被合併作爲<李>的陣列。
   • 如果您合併兩個已經合併的列（或其中一個柱已經合併），請提取組中的每一列。在你的結構，你會想使「列1」有自己的<李>沒有孩子<UL>。
   • 您可能想要克隆這些，因爲您將刪除（6）中的原始節點。
2. 創建一個新的<ul>節點，添加適當的「合併」className。
3. 將你收集的所有<li>收集在（1）中，除了第一個，並將它們作爲孩子插入<ul>。
4. 插入<ul>作爲您在（1）中收集的第一個<li>的最後一個孩子。
5. 將<li>（父（4））作爲列列表的子元素（$（'＃columns'））插入。
6. 刪除您要合併的原始列。

Answer 2

我會說使用表格數據表貼，無序列表似乎並不適合內容之多。