Как разрешить пользователю выбирать макет?

Я хочу создать отчет, в котором пользователь может выбрать не только те поля, которые он хочет, но и расположение этих полей. Все данные поступают из 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-Сортируемый, потому что есть более одного сообщения, так что это не было бы непрактично, чтобы позволить изменить пароль пользователя одно поле в то время для каждого отчета ,

Как вы подходите к этой проблеме?

источник

2016-08-10 Sebastian Chavez

Вы можете не только использовать UI-сортировку, чтобы позволить пользователю изменить поле , затем используйте этот новый заказ для рендеринга е отчеты? – Whothehellisthat

Как бы это сделать, вот как я добавляю данные в заголовок: https://jsfiddle.net/p2tdc2bt/ –

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

ЯШ:

$(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

источник

2016-08-11 05:03:53

Как разрешить пользователю выбирать макет?

ответ

Смежные вопросы