這篇文章要跟大家介紹如何使用bootstrap table外掛實作表格的行內編輯功能。
推薦教學:Bootstrap框架
#先放一張效果圖:
應用情境
#之前的專案也是採用bootstrap table,新增和修改資料都是透過模態方塊編輯的,後來有了點選行來編輯和新增的需求,所以乎試試…
#html
<div class="table-box" style="margin: 20px;"> <div id="toolbar"> <button id="button" class="btn btn-default">insertRow</button> <button id="getTableData" class="btn btn-default">getTableData</button> </div> <table id="table"></table> </div>
script
$(function() { let $table = $('#table'); let $button = $('#button'); let $getTableData = $('#getTableData'); $button.click(function() { $table.bootstrapTable('insertRow', { index: 0, row: { id: '', name: '', price: '' } }); }); $table.bootstrapTable({ url: 'data2.json', toolbar: '#toolbar', clickEdit: true, showToggle: true, pagination: true, //显示分页条 showColumns: true, showPaginationSwitch: true, //显示切换分页按钮 showRefresh: true, //显示刷新按钮 //clickToSelect: true, //点击row选中radio或CheckBox columns: [{ checkbox: true }, { field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }, ], /** * @param {点击列的 field 名称} field * @param {点击列的 value 值} value * @param {点击列的整行数据} row * @param {td 元素} $element */ onClickCell: function(field, value, row, $element) { $element.attr('contenteditable', true); $element.blur(function() { let index = $element.parent().data('index'); let tdValue = $element.html(); saveData(index, field, tdValue); }) } }); $getTableData.click(function() { alert(JSON.stringify($table.bootstrapTable('getData'))); }); function saveData(index, field, value) { $table.bootstrapTable('updateCell', { index: index, //行索引 field: field, //列名 value: value //cell值 }) } });
#實作原理
透過bootstrap table自帶的onClickCell 方法,點擊td 新增contenteditable 屬性(ps: 讓元素可編輯),於是td 元素具有了類似於文字方塊的focus 和blur 事件,使用者點擊td 取得焦點,編輯完內容失去焦點後,呼叫updateCell方法更新單元格資料。
引入
<link rel="stylesheet" type="text/css" href="js/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="js/bootstrap-table/1.12.1/bootstrap-table.min.css" /> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap-table/1.12.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
#json
[ { "id": 1, "name": "Item 1", "price": "¥1" }, { "id": 2, "name": "Item 2", "price": "¥2" }, { "id": 3, "name": "Item 3", "price": "¥3" } ]
以上是bootstrap-table 表格行內編輯實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!