在 table 中动态排列列

Question

我想做的是，我有一个由 div 制成的 table。共 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 }
                  :
                  :
                  :
                ]
}

table 将按照 table 标题数组中指定的列顺序生成，假设您有 Name, Age, Subject, Mark 作为顺序，那么 table 列和body 将按顺序生成详细信息。

在 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];
};

Working JSFiddle - 更改 table 标题 json 顺序和测试

在 table 中动态排列列

Dynamically arrange columns in a table

html

backbone-views

rivets.js