python数组在htm中的物理表示

Question

我有一个物理的二维小部件数组，这些小部件按照以下格式在数据库中编目：

数据库

id | plate | loc_index
-------------------
0  | g394e |  4
1  | d23e9 |  16
2  | f98d9 |  8
3  | w2340 |  3
4  | fl120 |  7
5  | f990d |  1
6  | e19f9 |  13
7  | t20f9 |  10

我想代表的django网络应用程序上的板块，根据他们的物理位置（指数）在世界上

UI显示

Plate representation
col1      col2      col3      col4      
f990d                         e19f9 
                    t20f9
w2340     fl120 
g394e     f98d9               d23e9 

django公司

视图.py

def index(request):
  plates = [(0, 'g394e', 4), 
    (1, 'd23e9', 16),
    (2, 'f98d9', 8),
    (3, 'w2340', 3),
    (4, 'fl120', 7),
    (5, 'f990d', 1),
    (6, 'e19f9', 13),
    (7, 't20f9', 10)]
  context = { 'plates': plates }
  return render(request, 'index.html', context)

索引.html

<script>
    $( function() {
    $( "#selectable" ).selectable();
  } );
</script>

<ul class="ul-col-4" id="selectable">
  {% for plate in plates %}
    <li class="ui-widget-content">{{ plate }}</li>
  {% endfor %}
</ul>

附加.css

.ul-col-4 {
    columns: 4;
    -webkit-columns: 4; /* Chrome, Safari, Opera */
    -moz-columns: 4; /* Firefox */
    list-style-type: none; /* no bullets */
}

有了这个html代码，板块就可以按原样填充，而不会跳过“loc\ u index”为空的元素。我想一种方法可能是找到所有丢失的loc\u索引值并填充一个空字符串，但是有没有更优雅的bootstrap/html方法呢

*根据iamkhush更新

当索引为空时，html视图如下所示：

g394e  d23e9  f98d9  w2340
fl120  f990d  e19f9  t20f9

Answer 1

它正在重复你的列表中的八个项目，但是不考虑列表中的空白“单元格”。您需要在发送给客户机的数据中包含这些空白单元格，或者更新javascript以在适当的位置插入空白<li>&nbsp;</li>。第一种方法如下所示：

plates = [(0, 'g394e', 4), 
    (1, 'd23e9', 16),
    (2, 'f98d9', 8),
    (3, 'w2340', 3),
    (4, 'fl120', 7),
    (5, 'f990d', 1),
    (6, 'e19f9', 13),
    (7, 't20f9', 10),
    (8, '', 2),
    (9, '', 4),
    etc, etc....]

第二种方法比较困难，因为它需要Django模板中的数字for循环，这是一个no-no

  {% for x in ***range (1,16)*** %} #Not allowed in templates
    {% if plate.x %}
      <li class="ui-widget-content">{{ plate }}</li>
    {% else %}
      <li class="ui-widget-content">&nbsp;</li>
    {% endif %}
  {% endfor %}

您必须找出解决Django模板语言中这个缺点的方法。这个解决方案在imho中是“更干净”的，但在Django中它并没有得到合理的支持。第一个解决方案是最简单的