Динамически упорядочить столбцы в таблице

Question

То, что я пытаюсь сделать, это то, что у меня есть стол, сделанный из divs. Всего 8 столбцов. первые восемь столбцов в div показывают заголовок, а остальные столбцы показывают содержимое

<div id="student-table">
<div id="student-table-header">
<div class="student-table-col-header">{label.header1}</div>
<div class="student-table-col-header">{label.header2}</div>
<div class="student-table-col-header">{label.header3}</div>
<div class="student-table-col-header">{label.header4}</div>
</div>
<div id="student-table-body">
<div rv-each-studentlist="studentlist">
<div class="student-table-col-body">{studentlist.name}</div>
<div class="student-table-col-body">{studentlist.age}</div>
<div class="student-table-col-body">{studentlist.subject}</div>
<div class="student-table-col-body">{studentlist.mark}</div>
</div>
</div>
</div>

Поэтому мне нужно предоставить конфигурацию из серверной части, это конкретный заказ. И я хочу расположить колонку в порядке конфигурации. Так что я должен сделать для этого. Есть ли свинец? Должен ли я использовать шаблоны?

Answer 1

Понятия не имею, какую структуру конфигурации вы используете. Допустим, если вы можете иметь простую структуру JSON, как показано ниже, то все будет довольно легко

{
 "tableHeader": [ 
                  { "headerValue": "Name", "headerKey": "name" },
                  { "headerValue": "Age", "headerKey": "age" },
                  { "headerValue": "Subject", "headerKey": "subject" },
                  { "headerValue": "Mark", "headerKey": "mark" }
                ],
 "tableBody":   [
                  { "name": "manu", "age": 22, "subject": "maths", "mark": 125 },
                  { "name": "john", "age": 25, "subject": "maths", "mark": 111 },
                  { "name": "arun", "age": 28, "subject": "maths", "mark": 222 }
                  :
                  :
                  :
                ]
}

Таблица будет генерироваться с порядком столбца, указанным в массиве tableHeader, например, если у вас есть Name, Age, Subject, Mark как порядок, то столбец таблицы и детали тела будут сгенерированы в этом порядке.

В HTML используйте форматер заклепки для форматирования деталей, как показано ниже

<div id="student-table">
    <div id="student-table-header">
        <div class="student-table-col-header" rv-each-headers="studentDetails.tableHeader">
            <p>{ headers.headerValue }</p>
        </div>
    </div>
    <div class="student-table-body" rv-each-students="studentDetails.tableBody">
        <div class="student-table-col-body" rv-each-header="studentDetails.tableHeader">
             <span>{ students | formatDetails header.headerKey }</span>
        </div>
    </div>
</div>

Функция Foramtter будет

rivets.formatters.formatDetails = function (studentDetails, headerKey) {
   return studentDetails[headerKey];
};

Работающий JSFiddle - изменить порядок заголовка tableHeader и проверить