x-editable 插件与 bootstrap 3 和 bootstrap-table 的兼容性答案

【问题标题】：x-editable plugin compatibility with bootstrap 3 and bootstrap-tablex-editable 插件与 bootstrap 3 和 bootstrap-table 的兼容性
【发布时间】：2015-08-27 10:21:29
【问题描述】：

我使用 bootstrap 3 和 bootstrap-table，我尝试使用 x-editable 插件使单元格可编辑。当我使用“弹出”模式并想要编辑一个单元格时，该单元格旁边会显示另一个空单元格。我不确定它是否是一个错误。

jsfiddle

HTML

<table class="table table-striped table-bordered table-hover"  cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
<thead>
<tr>
    <th data-field="name" data-halign="center" data-align="left" data-sortable="true">Name</th>
    <th data-field="stargazers_count" data-halign="center" data-align="left" data-sortable="true">Stars</th>
    <th data-field="forks_count" data-halign="center" data-align="left" data-sortable="true">Forks</th>
    <th data-field="description" data-halign="center" data-align="left" data-sortable="true">Description</th>
</tr>
</thead>

var data = [{name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"},
           {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"},
           {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"}]

$('table').bootstrapTable({
    data: data
});

$('table tbody tr td').editable();

【问题讨论】：

标签： jquery twitter-bootstrap twitter-bootstrap-3 x-editable bootstrap-table

【解决方案1】：

您必须使用此引导表可编辑扩展：https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable

这是一个工作示例：http://issues.wenzhixin.net.cn/bootstrap-table/

编辑：

看到这个JSFiddle

三件事：

将 bootstrap-table-editable 扩展添加到脚本中
将属性data-editable="true"添加到每一列
删除 JavaScript 代码：$('table tbody tr td').editable();，因为它不需要

查看此页面是否有其他扩展：http://bootstrap-table.wenzhixin.net.cn/extensions/

【讨论】：

看看我的jsfiddle，我用这个扩展需要x-editable插件。