将可编辑添加到引导表

Posted 2023-05-08

【中文标题】将可编辑添加到引导表

【英文标题】：Add editable to bootstrap table

【发布时间】：2016-01-22 02:25:56

【问题描述】：

我尝试使用可编辑的引导表。在我的 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> 然后如何？我不清楚（我是新手..），我如何继续..

【参考方案1】：

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

还有其他例子可能对您有所帮助： demo1, demo2, demo3, 和docs。

【参考方案2】：

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

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

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

【讨论】：

好的..我必须添加什么才能得到这个issues.wenzhixin.net.cn/bootstrap-table/#extensions/…的结果@

我用data-url="data.json" 加载数据我如何添加所有的类？

【参考方案3】：

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