Javascript 添加可编辑到引导表

Add editable to bootstrap table

提问by yaylitzis

I try to use bootstrap table editable. In my jsp page I have:

我尝试使用可编辑的引导表。在我的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>            

and my table is shown great. Now I want to add the editable method. I added the <script src="assets/js/bootstrap-table-editable.js"></script>and then how ? It isn't clear to me (I am newbie..), how I continue..

我的桌子很好看。现在我想添加可编辑方法。我加了<script src="assets/js/bootstrap-table-editable.js"></script>然后怎么办？我不清楚（我是新手..），我如何继续..

回答by wenyi

You need add the bootstrap-editable.jsfile, because our extension is based on x-editablelike the example: source.

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

There are other examples maybe can help you: demo1, demo2, demo3, and the docs.

还有其他的例子也许可以帮助你： demo1的， DEMO2， demo3和文档。

回答by taxicala

call editableby selecting your table with jquery:

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

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

For the full specs and options list, check here

有关完整的规格和选项列表，请查看此处

回答by barnwaldo

For anyone interested, here is a Reactstrap table with cell-edit capabilities. See https://github.com/msb1/reactstrap-functional-table

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