bootstrapTable获取当前行id属性并使用获取id来给表格添加修改和删除操作

最新推荐文章于 2024-04-12 02:43:15 发布

城予予予予

最新推荐文章于 2024-04-12 02:43:15 发布

阅读量3.5k

点赞数

文章标签： javascript bootstrap jquery

本文链接：https://blog.csdn.net/m0_52298903/article/details/124047638

版权

本文介绍了如何在使用bootstrapTable展示表格时，获取当前行的id属性，以便实现修改和删除功能。关键在于使用formatter函数，通过row参数获取行数据，结合jsp的contextPath获取绝对路径，构建更新和删除操作的链接。

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

bootstrapTable获取当前行id属性并使用

利用bootstrapTable来显示表格时，在遇到需要在最后一行加入修改、删除这种额外操作时，需要获取当前行的id属性，并将id值赋给修改、删除超链接，用来在后台针对该id对应的数据进行操作。

关键代码

<script>
        $('#table').bootstrapTable({
     
            url:"${pageContext.request.contextPath}/getData.do",
            pagination:true,//分页
            search:true,
            columns

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

城予予予予

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
bootstrapTable获取当前行id属性并使用获取id来给表格添加修改和删除操作

bootstrapTable获取当前行id属性并使用利用bootstrapTable来显示表格时，在遇到需要在最后一行加入修改、删除这种额外操作时，需要获取当前行的id属性，并将id值赋给修改、删除超链接，用来在后台针对该id对应的数据进行操作。关键代码<script> $('#table').bootstrapTable({ url:"${pageContext.request.contextPath}/getData.do",
复制链接

扫一扫

bootstrap table 根据id唯一标识查询表格并修改更新查询到的行

qq_34774455的博客

05-28

2184

首先介绍如何根据唯一标识查询对应的行数据： //配置table $("#table-list-webhoo").bootstrapTable({ ..............//省略一部分配置参数 uniqueId : 'goodsId', //这个参数必须得配置，设置唯一标识的对应字段，对应下面columns配置的字段名称 columns : [{ title : 'Id', field : 'goodsId', visible:f

bootstrap table分页模板和获取表中的ID方法

08-31

在JavaScript中，你可以通过`getData`方法获取表格的所有行数据，然后遍历这些数据以获取特定ID。假设每行都有一个名为`id`的字段，你可以这样做： ```javascript var data = $('#table').bootstrapTable('getData'...

参与评论您还未登录，请先登录后发表或查看评论

Bootstrap 获取Table页面上显示的所有列名

weixin_40934096的博客

08-30

3202

Bootstrap 获取Table页面上显示的所有列名 function columns(){ var dropdownMemu = $("div[class='fixed-table-toolbar']"); // BootstrapTable的那个标签id var MemuLi = $("#CommodityTable").children('div').eq(1).ch...

bootstrap-table的formatter列参数

最新发布

2401_84240369的博客

04-12

2508

有toolbar：的样式无toolbar：的样式（2）sidePagination："client"或 “server”：分页方式：client客户端分页，server服务端分页（*）**client客户端分页：**如果是客户端分页的话，每次请求数据时请求的是全部数据，传递的请求参数中没有pageSize和PageNumber这两个属性；server服务端分页：如果是r服务端分页的话，每次请求数据时请求的是全部数据，传递的请求参数中必须有pageSize和PageNumber这两个属性；

bootstrap-table动态列，动态formatter

javaStudyeye的博客

12-22

1335

bootstrap-table 动态列，动态值样式

bootstrapTable组件formatter、responseHandler函数

weixin_42537012的博客

02-25

1524

bootstrapTable组件formatter、responseHandler函数

BootStrap给table表格的每一行添加一个按钮事件

08-29

下面我们将详细介绍如何使用Bootstrap为表格的每一行添加一个按钮事件。添加按钮事件的步骤 1. 在列属性中加入事件首先，我们需要在表格的列属性中加入事件。在以下代码中，我们添加了一个 operate 字段，并在...

bootstrap table单元格新增行并编辑

08-30

例如，我们可以使用 jQuery 库来获取表格元素，然后使用 append() 方法来添加新的行。 ```javascript $("#para_table tbody").append("<tr><td></td><td></td></tr>"); ``` Bootstrap Table 单元格编辑在 ...

bootstrap table 数据表格行内修改的实现代码

01-19

js中设置列的属性 editable : { type : 'text',//数据显示在文本框内 emptytext : --,//数据为空时显示 validate : function(value) { if ($.trim(value) == ''...$('#id').bootstrapTable('resetView'); row = dataWa

Bootstrap table表格初始化表格数据的方法

10-18

Bootstrap Table 是一个流行的...总的来说，Bootstrap Table 提供了丰富的功能和高度的定制性，使得在网页上创建交互式表格变得简单易行。通过理解和应用上述配置选项，你可以根据项目需求灵活地初始化和管理表格数据。

BootStrap table删除指定行的注意事项(笔记整理)

08-31

在前端开发中遇到这样的问题，对于table指定行的数据进行删除，花了好长时间才解决，今天小编抽时间给大家介绍BootStrap table删除指定行的注意事项，需要的朋友参考下吧

table动态增加删除行列

08-11

使用javascript实现table动态增加删除行列。

bootstrap table 获取选中的id

weixin_44742789的博客

02-28

3511

var rows = $('#bootstrap-table').bootstrapTable('getSelections') if(rows){ row = rows[0] id = row.id }

bootstrapTable获取数据条数(获取总条数) 获取当前行(行号) 获取全部数据(本页) 获取某行数据获取选中行数据

tanzongbiao的专栏

05-12

1万+

//bootstrapTable获取数据条数(获取总条数) var totalNum = $('#tb_TableStudent').bootstrapTable('getOptions').totalRows; alert(totalNum); //bootstrapTable获取当前行(行号) $('#tb_Table').on("click-row.bs.table",function(e, row, $element) { var index = $element.data('i..

bootstraptable ( bootstrap 中的表格)

zhang_zan

12-04

1341

使用 bootstraptable创建表格一、初始化 1、HTML编写引人css和js <link rel="stylesheet" href="{% static 'plugins/bootstrap-table/dist/bootstrap-table.min.css' %}"> <script src="{% static 'plugins/bootstrap-table/dist/bootstrap-table.min.js' %}"></script> &l

获取bootstrapTable整行数据

qq_30908729的博客

02-18

1802

获取bootstrapTable一整行数据解决方法： 1.先添加uniqueId:"id"设置id为唯一字段 pagination: true, sortable: true, //是否启用排序 sortOrder: "asc", //排序方式 sidePagination: "server", pageNumber: 1, page...

python测试开发django-126.bootstrap-table表格内操作按钮(修改/删除) 功能实现

qq_27371025的博客

09-14

2395

前言在 table 表格每一项后面添加操作按钮：修改/删除希望实现效果： 1、点表格后面的修改按钮，能修改对应行的数据 2、点表格后面的删除按钮，删除对应的行操作栏先定义操作栏按钮 // 作者-上海悠悠 QQ交流群:717225969 // blog地址 https://www.cnblogs.com/yoyoketang/ <script> var url = '/teacher/info'; var columns = [ {

Bootstrap网格系统参数解析

weixin_42075274的博客

06-01

418

在使用网格系统时有许多参数我们需要弄清楚，下面是我自己结合所学整理的，第一次写博客，写的不好还请见谅。要知道Bootstrap网格系统，我们首先要知道Bootstrap的使用。然后我们要知道在Bootstrap网格系统中，将一个页面或者板块分为12列，而我们最大可以获得12列。 row：表名在该div里使用网格 col-xs-*：表示在超小型设备上使用（手机）。特点：一直水平。 col-sm-*:表示在小型设备上使用（平板电脑）。特点：以折叠开始，断点以上是水平的，其中*范围是从1到1...

bootstrap表格行编辑状态_详解bootstrap table双击可编辑、添加、删除行

05-31

好的，关于 Bootstrap 表格的行编辑状态，我可以给您进行详细介绍。首先，Bootstrap Table 是一个基于 Bootstrap 的扩展，可以让表格更加美观、功能更加丰富。其中，双击可编辑、添加、删除行的功能可以通过插件实现。具体实现步骤如下： 1. 引入必要的文件 ``` <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.css"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/extensions/editable/bootstrap-table-editable.min.js"></script> ``` 2. 准备表格数据 ``` var data = [ {id: 1, name: '张三', age: 20}, {id: 2, name: '李四', age: 25}, {id: 3, name: '王五', age: 30} ]; ``` 3. 定义表格 ``` <table id="table" data-editable="true"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">姓名</th> <th data-field="age">年龄</th> <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">操作</th> </tr> </thead> </table> ``` 其中，`data-editable="true"` 表示表格可编辑。 4. 初始化表格 ``` $(function () { $('#table').bootstrapTable({ data: data }); }); ``` 5. 定义操作列的格式化函数 ``` function operateFormatter(value, row, index) { return [ '<a class="edit" href="javascript:void(0)" title="编辑">', '<i class="glyphicon glyphicon-edit"></i>', '</a> ', '<a class="remove" href="javascript:void(0)" title="删除">', '<i class="glyphicon glyphicon-remove"></i>', '</a>' ].join(''); } ``` 6. 定义操作列的事件处理函数 ``` window.operateEvents = { 'click .edit': function (e, value, row, index) { // 编辑事件 $('#table').bootstrapTable('beginEditRow', index); }, 'click .remove': function (e, value, row, index) { // 删除事件 $('#table').bootstrapTable('remove', { field: 'id', values: [row.id] }); } }; ``` 7. 定义保存按钮的事件处理函数 ``` $('#save').click(function () { // 保存事件 $('#table').bootstrapTable('endAllEdit'); }); ``` 以上就是实现 Bootstrap 表格行编辑状态的详细步骤。需要注意的是，具体实现可能会因为版本的不同而有所差异，以上代码仅供参考。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交