Question

我想做的是，我有一张由div组成的桌子。共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];
};

Working JSFiddle - 更改tableHeader json顺序并测试

动态排列表中的列

1 个答案: