如何让用户选择布局？答案

【问题标题】：How to let the user select the layout?如何让用户选择布局？
【发布时间】：2016-08-10 22:01:56
【问题描述】：

我想创建一个报告，用户不仅可以选择他想要的字段，还可以选择这些字段的布局。所有数据都来自 CSV，并且有很多列。我想让用户选择他想在报告标题和正文上显示的列。例如，如果他选择 12 个字段放在标题上，3 列放在正文上：

___________________________________________________________
  Field1: Field1Data           Field7: Field7Data    
  Field2: Field2Data           Field8: Field8Data
  Field3: Field3Data           Field9: Field9Data
  Field4: Field4Data           Field10: Field10Data            HEADER
  Field5: Field5Data           Field11: Field11Data
  Field6: Field6Data           Field12: Field12Data
  ___________________________________________________________
  ___________________________________________________________
  | Column1 |   Column2  |   Column3  |
  |  Data   |    Data    |    Data    |
  |  Data   |    Data    |    Data    |
  |  Data   |    Data    |    Data    |                       BODY
  |  Data   |    Data    |    Data    |
  |  Data   |    Data    |    Data    |
  ___________________________________________________________

现在，我让用户在报表上选择他想要的数据，使用带有所有标题的选择选项，将他想要的列的索引推送到一个数组，然后用表格和标题创建一个对象数据，像这样：

var arrayHeaderData = [0,1,2,3,..]

var headerDataObject = {
  table1: { Name: John, Location: 'Unknown', Age: 24},
  table2: { Name: John, Location: 'Unknown', Age: 24},
  table3: { Name: John, Location: 'Unknown', Age: 24}
}

我有多个报告，这就是我将表的每个数据存储在一个对象中的原因。

有了这个，我可以将数据附加到每个表中，但是用户不能选择他想首先出现的数据，例如，假设他选择了 12 个字段并希望字段 3 在右侧，并且字段左边9个

___________________________________________________________
  Field1: Field1Data           Field7: Field7Data    
  Field2: Field2Data           Field8: Field8Data
  Field9: Field9Data           Field3: Field3Data  <--He chose to swap this two
  Field4: Field4Data           Field10: Field10Data            HEADER
  Field5: Field5Data           Field11: Field11Data
  Field6: Field6Data           Field12: Field12Data
  ___________________________________________________________

我不能使用 UI-Sortable 之类的东西，因为有多个报告，所以让用户为每个报告同时更改一个字段是不切实际的。

你会如何解决这个问题？

【问题讨论】：

你不能只使用 ui-sortable 让用户重新排列字段，然后使用新的排序来呈现报告吗？
我该怎么做，这是我将数据附加到标题的方法：jsfiddle.net/p2tdc2bt

标签： javascript jquery html arrays

【解决方案1】：

jQuery addClass 总是有效

萨斯：

.la1, .la2
    background: skyblue
    display: inline-block
    padding: 0.5em
    cursor: pointer

.content
    width: 70%
    background: #CCC
    color: #FFF
    height: 80%
    margin: 0 auto
    text-align: center
    font-size: 2em

    &.layer1
        text-align: left
        color: red
    &.layer2
        text-align: right
        background: #FAE98F

js:

$(function(){

    $(".la1").click(function(){
        $(".content").attr("class","content");
        $(".content").addClass("layer1");
    });


    $(".la2").click(function(){
        $(".content").attr("class","content");
        $(".content").addClass("layer2");
    });



});

http://jsbin.com/doxago/19/edit?output

【讨论】：