bootstrap的editTable实现方法

最新推荐文章于 2024-08-10 09:09:11 发布

那些年的代码

最新推荐文章于 2024-08-10 09:09:11 发布

阅读量44

点赞数

文章标签： bootstrap 前端 html css javascript

本文链接：https://blog.csdn.net/weixin_44018338/article/details/133104267

版权

本文详细介绍如何利用Bootstrap、jQuery及Bootstrap Table插件创建一个具备编辑功能的响应式表格。从下载源码到引用相关文件，再到具体初始化代码，文章提供了实现可编辑表格的完整步骤。同时，文中还涉及了如何通过AJAX进行数据保存的工作。

摘要由CSDN通过智能技术生成

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

<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link href="/Content/bootstrap-table/bootstrap-table.min.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>
<script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
<script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>

table初始化时的代码：

{
field: 'userName',
title: '姓名',
sortable: true,
align: 'center',
  editable: {
  type:"text",
  onblur: "submit",
  showbuttons: false,
  validate:function (v) {
if (!v) return '姓名不能为空';
  }
}
},

onEditableSave: function (field, row, oldValue, $el) {

$.ajax({
//在bootstrap table中编辑完成后调用的方法

//可以进行数据的保存工作
}

具体的业务代码就不一一列举了。

如有问题，可以留言一起讨论。