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 webapp上的牌照。

UI显示

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

django的

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>

additional.css

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

使用这个html代码，这些板只是按原样填充，而不会跳过'loc_index'为空的元素。我想一种方法可能是找到所有缺少的loc_index值并填充一个空字符串，但是有更优雅的bootstrap / html方式吗？

*更新以回应iamkhush

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

g394e  d23e9  f98d9  w2340
fl120  f990d  e19f9  t20f9

Answer 1

它会遍历您的牌照列表中的八个项目，但不会考虑列表中的空白“单元格”。您需要在要发送给客户端的数据中包含这些空白单元格，或者更新您的javascript以在适当的位置插入空白<li> </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循环，这是禁忌。

  {% 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中并没有以合理的方式支持它。第一个解决方案是最简单的。

html中python数组的物理表示

1 个答案: