使用动态数组的带有Mustache的动态表 [英] Dynamic tables with Mustache using dynamic arrays

问题描述

我想知道当前针对以下问题的解决方案是否有更优雅的解决方案

I am wondering if there is a more graceful solution to my current solution for the following problem

问题:在满足以下条件的情况下，使用Mustache从动态数组生成动态表:

Problem: Generate dynamic tables from a dynamic array with Mustache given that:

1. 总列数未知
2. 只有一两个列名是已知的，必须有条件地呈现
3. 可能无法使用辅助功能
4. 仅在数组中提供数据.不是模型类

具有可变列数的典型数据集，其中ID是始终知道的唯一已知列:

Typical data-set with variable column count where ID is the only column know to always be provided:

[id*]   [Col-1]    [Col-2]    [Col-3]   ...(more)
 1      'Foo'      'Bar'      'Baz'    ...(more)
 2      'Foo'      'Bar'      'Baz'    ...(more)
 3      'Foo'      'Bar'      'Baz'    ...(more)
 ...
(more)

当前解决方案:将变量键名与常量键名混合使用 在下面的示例中，变量键基于从数据源动态提供的各种列名("id"，"name"，"legal_name"，"email"，"signon_email"，"editable")和常量关键名称是字段"

Current Solution: Mix variating key names with constant key name In this example below, the variating keys are based on the various column names provided dynamically from the datasource which are ("id"; "name"; "legal_name"; "email"; "signon_email"; "editable") and the constant key name is "field"

样本数组:

array (size=6)
  0 => 
    array (size=2)
      'id' => string '10' (length=2)
      'field' => string 'id' (length=2)
  1 => 
    array (size=2)
      'value' => string 'J. Doe' (length=8)
      'field' => string 'name' (length=8)
  2 => 
    array (size=2)
      'value' => string 'Jane Doe' (length=8)
      'field' => string 'legal_name' (length=8)
  3 => 
    array (size=2)
      'value' => string '[e-mail]' (length=12)
      'field' => string 'email' (length=12)


array (size=6)
  0 => 
    array (size=2)
      'id' => string '11' (length=2)
      'field' => string 'id' (length=2)
  1 => 
    array (size=2)
      'value' => string 'Jon Doe' (length=8)
      'field' => string 'name' (length=8)
  2 => 
    array (size=2)
      'value' => string 'John Doe' (length=8)
      'field' => string 'legal_name' (length=8)
  3 => 
    array (size=2)
      'value' => string '[e-mail]' (length=12)
      'field' => string 'email' (length=12)

模板:

{{#rows}}
    <tr>{{#fields}}
            <td>{{#id}}<a href="foo/{{id}}">{{id}}</a>{{/id}}
                {{^id}}{{field}}: {{value} {{/id}}
            </td>
        {{/fields}}
    </tr>
{{/rows}}

结果:

<tr>
        <td><a href="foo/10">10</a></td>
        <td>name: J Doe</td>
        <td>legal_name: Jane Doe</td>
        <td>email: [e-mail]</td>
</tr>
<tr>
        <td><a href="foo/11">11</a></td>
        <td>name: Jon Doe</td>
        <td>legal_name: John Doe</td>
        <td>email: [e-mail]</td>
</tr>

由于数据集非常小，因此不必考虑数据的冗余性.最重要的是，我们需要一种语言无关的解决方案(没有lambda).

Redundancy of data is not a concern since the data-sets are really small. Most importantly we want a language neutral solution (no lambdas).

推荐答案

许多人可以在Mustache中找到有关动态行的问题. 因此，我将发布解决方案.也许对某人有用.

Many people can found this question about dynamic row in Mustache. So, I'll post my solution. Maybe useful to somebody.

模板一(表)

<script type="text/template" id="template-table">
     <table class="table table-responsive">
        {{{dynamicRow}}}
     </table>
</script>

第二个(表格的行)

<script type="text/template" id="template-table-row">
    <tr>
    <td>{{disciplina}}</td>
    <td>{{nota}}</td>
    </tr>
</script>

有一个Ajax响应解决方案(jQuery):

There's a Ajax response solution (jQuery):

var row = [], $item_row = {};

//iterator for rows
$.each(response.notas, function(){
    $item_row.disciplina = this.disciplina;
    $item_row.nota = this.nota;

    var $template = $("#template-table-row").html();
    row.push(Mustache.render($template, $item_row));
});

//var row contain all rows, so add it to table
var item = {
    dynamicRow: row
}
var $template = $("#template-table").html();
var output = Mustache.render($template, item);

alert("Finish. Result is on Console");
console.log(output);

希望这会有所帮助.

这篇关于使用动态数组的带有Mustache的动态表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！