Question

我尝试使用bootstrap表可编辑。在我的jsp页面中，我有：

<div class="row mystyle" >
  <div class="col-md-10">
   <table id="mytable" class="table table-hover" id="table-pagination"
                       data-url="data.json" 
                       data-toggle="table"
                       data-pagination="true"
                       data-show-pagination-switch="true"
                       data-sort-order="desc" 
                       data-show-export="true" 
                       data-search="true" 
                       data-show-toggle="true"  
                       data-show-refresh="true" 
                       data-show-columns="true"
                       data-page-list="[10, 25, 50, 100, ALL]">

      <thead>
        <tr>
         <th data-field="id" data-align="center">id</th>
         <th data-field="type" data-align="center">type</th>
         <th data-field="quantity" data-align="right" data-sortable="true">cost</th> 
        </tr>
      </thead>
  </table>
</div>

我的桌子很棒。现在我要添加editable method。我添加了<script src="assets/js/bootstrap-table-editable.js"></script>，然后又如何？我不清楚（我是新手......），我如何继续......

Answer 1

您需要添加bootstrap-editable.js文件，因为我们的扩展程序基于x-editable，例如：source。

还有其他一些例子可以帮到你： demo1， demo2， demo3，和docs。

Answer 2

通过使用jquery选择您的表来调用editable：

var options = {};
$("#mytable").editable(options);

有关完整规格和选项列表，请查看here

Answer 3

对于感兴趣的任何人，这是一个具有单元格编辑功能的Reactstrap表。参见https://github.com/msb1/reactstrap-functional-table

添加editable到bootstrap表

3 个答案: