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

このブートストラップ テーブル編集可能な拡張機能を使用する必要があります: 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 に答える