用js创建的可编辑的bootstrap表格。

发布网友发布时间：2022-04-23 08:52

我来回答

共2个回答

懂视网时间：2022-04-07 15:11

这篇文章向大家介绍一下如何使用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" }
]

热心网友时间：2022-04-07 12:19

之前介绍bootstrapTable组件的时候有提到它的行内编辑功能，只不过为了展示功能，将此一笔带过了，罪过罪过！最近项目里面还是打算将行内编辑用起来，于是再次研究了下x-editable组件，遇到过一些坑，再此做个采坑记录吧！想要了解bootstrapTable的朋友可以移步JS组件系列——表格组件神器：bootstrap table。
一、x-editable组件介绍
x-editable组件是一个用于创建可编辑弹出框的插件，它支持三种风格的样式：bootstrap、Jquery UI、Jquery。大致效果如下图：

根据博主一贯的风格，这里肯定是选用第一种喽。首先还是给出开源地址吧。
x-editable开源地址：https://github.com/vitalets/x-editable
x-editable文档地址：http://vitalets.github.io/x-editable/docs.html
x-editable在线Demo：http://vitalets.github.io/x-editable/demo-bs3.html
1、x-editable初体验

首先下载基于bootstrap的源码到本地。引用相关文件。

<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>

页面元素

复制代码代码如下:
<a href="#" id="username" data-type="text" data-title="用户名">用户名</a>

js初始化

$(function () {
$('#username').editable();
});