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

Question

我使用 bootstrap 3 和 bootstrap-table, i tried to use x-editable 插件使单元格可编辑。当我使用 'popup' 模式并想要编辑一个单元格时，该单元格旁边会显示另一个空单元格。不知道是不是bug

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>

JS

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();

Answer 1

您将不得不使用此 bootstrap-table-editable 扩展名：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/

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

x-editable plugin compatibility with bootstrap 3 and bootstrap-table

jquery

twitter-bootstrap

x-editable

twitter-bootstrap-3

bootstrap-table