如何根据表格的类并排对齐表格

Question

我正在从数据库中获取行 ID。如果 rowid 相同，那么我想将它们显示在同一行中。否则我想在不同的行中显示它们。我正在使用剑道 ui 列表视图控件。列表视图项应根据 rowid 对齐。

我的记录将来自数据库，例如

 id   name     rowid
  1   first      1
  2   second     1
  3   third      2
  4   fourth     2
  5   fifth      3
  6   sixth      4
  7   seven      5
  8   eight      5

那么输出将是这样的形式

  first          second
  third          fourth
  fifth
  sixth
  seven           eight

Answer 1

首先，您必须确保数据库中的记录是ordered by rowid。

那么你的列表视图模板应该是这样的：

<div style="width: 400px;">
    <script type="text/x-kendo-tmpl" id="template">
        <div style="float: left;height: 100px; width:#=getColWidth(rowid,data)#px;">
            #=name#
        </div>
    </script>
</div>

<script>
function getColWidth(currentRowID,data)
{
    var dataLen = data.length, 
        numberOfColumn=0, 
        columnWidth,
        rowWidth = 400; /**suppose that your Row take 400 pixel in View*/

    for(var i = 0; i < dataLen; i++)
    {
        if(data.rowid == currentRowID)
        {
            numberOfColumn++;
        }
    }
    columnWidth = Math.round(rowWidth/numberOfColumn);
    return columnWidth;
}
</script>