python数组在html中的物理表示

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

数据库

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网络应用程序上的板块，根据它们在世界上的物理位置（索引）

用户界面显示

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

德扬戈

views.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)

index.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>

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

*更新以响应iamkhush

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

g394e  d23e9  f98d9  w2340
fl120  f990d  e19f9  t20f9

---

它正在重复你的列表中的八个项目，但是不考虑列表中的空白“单元格”。您需要在发送给客户端的数据中包含这些空白单元格，或者更新javascript以在适当的位置插入空白的

。第一种方法如下所示：

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 %}

{%x在***范围内（1,16）****%}模板中不允许
{%if plate.x%}
{{plate}
{%else%}

{%endif%}
{%endfor%}

---

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

如果在数据库的loc_索引字段中添加默认值会怎么样？而且，当loc_索引为空时会发生什么也不清楚。你也能展示一下吗？我和数据库有只读关系，我只能做后期处理。

  {% 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 %}