0

我使用 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>

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

1 回答 1

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/

于 2015-08-27T12:25:51.823 回答