jquery tabledit

jQuery-Tabledit v1.2.7

與 Bootstrap 相容的 HTML 表格內嵌編輯器。 Tabledit 使用 Ajax 儲存新行以及編輯和刪除行。

插件與其他插件一起使用：

• 資料表插件

您可以插入不同類型的標籤

更多範例 7，請參閱 https://bluesatkv.github.io/jquery-tabledit/#examples7

您可以向表中新增行

更多範例 9，請參閱 https://bluesatkv.github.io/jquery-tabledit/#examples9-10

基本用法

1. 在 jQuery 函式庫之後加入 jQuery tabledit 外掛。

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.tabledit.js"></script>

2. 使用資料建立 Bootstrap 表

 <table class="table table-hover" id="my-table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
    </tbody>
</table>

3. 在現有表上呼叫外掛程式並指定您喜歡的可編輯列。

 $('#my-table').Tabledit({

    columns: {
      identifier: [0, 'id'],                    
      editable: [[1, 'col1'], [2, 'col1'], [3, 'col3'], [4, 'col4']]
    }

});

範例

TD 中的唯讀值

您可以在可編輯數組中設定此值，如果您希望只讀，則將該列保留在「可編輯」數組之外，例如：第 3 列不可編輯。

 $('#my-table').Tabledit({

    columns: {
      identifier: [0, 'id'],                    
      editable: [[1, 'col1'], [2, 'col1'], [4, 'col4']]
    }

});

文件

BluesatKV 提供的完整文檔，位於 https://bluesatkv.github.io/jquery-tabledit/#documentation

變更日誌

請參閱 https://github.com/BluesatKV/jquery-tabledit/blob/master/CHANGELOG.md 上的 CHANGELOG