0

我在大部分情况下使用来自可动态网站的默认代码来制作风格化列表。我真的很喜欢它，因为我在所有领域都得到了搜索。这是html代码和javascript代码：

   <ul id="ul-example" class="row-fluid no-bullets">
       <?php foreach ($dms as $k => $v): ?>

       <li class="span12" data-color="gray" id="manage_vehicle_id_<?= $v['id'];?>">                                      
                                  <div class="thumbnail">

                                        <div class="thumbnail-image">
                                            <center>
                                          <img src="<?= $v['image']; ?>" width="220" height="180" />
                                          </center>
                                        </div>

                                    <div class="caption">       
                                      <center>
                                        <h5><?= $v['year'] . ' ' . $v['make'] . ' ' . $v['model'] . ' ' . $v['trim'];?></h5>
                                      </center>
                                      <hr>
                                      <center>
                                        <p><b>Vin:</b> <?= $v['vin']; ?></p>
                                        <p><b>Stock #:</b> <?= $v['stock'];?></p>
                                      </center>
                                      <hr>
                                      <p>
                                        <center>
                                            <button class="btn btn-primary" onclick="getVehicleDetailsByid('<?= $v['id']; ?>');"><i class="fa fa-edit"></i>&nbsp;Edit</button>
                                            <button class="btn btn-danger" onclick="openDeleteVehicleByIdModal('<?= $v['id']; ?>', '<?= $v['vin']; ?>', '<?= $v['stock'];?>');"><i class="fa fa-minus"></i>&nbsp;Delete</button>
                                        </center>
                                      </p>
                                    </div>
                                  </div>
                                </li>

                                <?php endforeach; ?>
                            </ul>


    function ulWriter(rowIndex, record, columns, cellWriter) {
  var cssClass = "span12", li;
  if (rowIndex % 3 === 0) { cssClass += ' first'; }
  li = '<li class="' + cssClass + '" id="'+record.id+'" data-row-index="'+rowIndex+'"><div class="thumbnail"><div class="thumbnail-image">' + record.thumbnail + '</div><div class="caption">' + record.caption + '</div></div></li>';
  return li;
}

// Function that creates our records from the DOM when the page is loaded
function ulReader(index, li, record) {
  var $li = $(li),
  $caption = $li.find('.caption');
  record.thumbnail = $li.find('.thumbnail-image').html();
  record.caption = $caption.html();
  record.label = $caption.find('h5').text();
  record.description = $caption.find('p').text();
  record.color = $li.data('color');
  record.id = $li.attr('id');
  record.index = $li.attr('data-row-index');
}

$( '#ul-example' ).dynatable({
    table: {
        bodyRowSelector: 'li'
    },
    writers: {
        _rowWriter: ulWriter
      },
      readers: {
        _rowReader: ulReader
      },
    features: {
        paginate: false,
        sort: true,
        search: true,
        recordCount: true,
        perPageSelect: false
      },
      inputs: {
          searchTarget: '#manage_vehicle_search',
          recordCountTarget: '#manage_vehicle_recordCount'
      }
});

正如您在 html 中看到的，我有一个删除记录的删除按钮。我可以手动删除它。但是它实际上并没有被删除。当发生搜索查询时，该项目仍在列表中。我删除它：

$( '#manage_vehicle_id_'+id ).remove();
var dynatable = $('#ul-example').data('dynatable');
        dynatable.domColumns.removeFromArray(index);
        dynatable.dom.update();

我在这里收到一个错误，例如 column.length 为空。我可以看到 dynatable 中的 this.remove 方法正在引发错误。

如何从列表中删除此项目并更新可动态化 dom 并获得正确的计数？

谢谢

4

1 回答 1

1

我通过使用 dynatable.process() 而不是删除/更新解决了这个问题。不确定这是否是正确的解决方案，但它对我有用。

$( '#manage_vehicle_id_'+id ).remove();
var dynatable = $('#ul-example').data('dynatable');
dynatable.process();
于 2015-03-24T12:01:23.697 回答