大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇文章给大家分享的是有关bootstrap-table 表格行内编辑实现方法,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联建站 - 光华机房服务器托管,四川服务器租用,成都服务器租用,四川网通托管,绵阳服务器托管,德阳服务器托管,遂宁服务器托管,绵阳服务器托管,四川云主机,成都云主机,西南云主机,光华机房服务器托管,西南服务器托管,四川/成都大带宽,大带宽服务器,四川老牌IDC服务商
这篇文章向大家介绍一下如何使用bootstrap table插件实现表格的行内编辑功能。
先放一张效果图:
应用场景
之前的项目也是采用bootstrap table,添加和修改数据都是通过模态框来编辑的,后来有了点击行来编辑和新增的需求,于是乎试试……
html
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方法更新单元格数据。
引入
json
[ { "id": 1, "name": "Item 1", "price": "¥1" }, { "id": 2, "name": "Item 2", "price": "¥2" }, { "id": 3, "name": "Item 3", "price": "¥3" } ]
以上就是bootstrap-table 表格行内编辑实现方法,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。