Question

我想创建一个报告，用户不仅可以选择他想要的字段，还可以选择此字段的布局。所有数据都来自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    |
  ___________________________________________________________

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

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这样的内容，因为有多个报告，因此让用户在每次报告时更改一个字段是不切实际的。

你会如何解决这个问题？

Answer 1

jQuery addClass始终有效

SASS：

.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

如何让用户选择布局？

1 个答案: