热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

BootStraptable动态增删改表格内数据

简单使用:1、在当前表格的最后新增数据2、在当前表格的首行新增数据3、根据id删除行4、删除所有数据6、更新指定的列数据7、重新加载数据(分页的时候要注
 1 1:添加一个【操作】列
 2 
 3  
 4 
 5 {
 6     title: "操作",
 7     align: ‘center‘,
 8     valign: ‘middle‘,
 9     width: 160, // 定义列的宽度,单位为像素px
10     formatter: function (value, row, index) {   //传入数据
11         return ‘<button class="btn btn-primary btn-sm" onclick="del(\‘‘ + row.id + ‘\‘)">删除button>‘;
12     }
13 }
14 2:创建删除方法
15 
16     function del(id) {
17         //yzh
18 //    debugger;
19         var index = $(‘#table‘).bootstrapTable(‘getData‘).length;
20         $(‘#table‘).bootstrapTable(‘remove‘, {
21             field: "id",   //此处的 “id”对应的是字段名
22             values: [parseInt(id)]
23         });
24     }

简单使用:

1、在当前表格的最后新增数据

1 var _data = {
2 "name" : name,
3         ...//some datas
4 "desc" : desc    }
5 $("#table_Id").bootstrapTable(‘append‘, _data);//_data----->新增的数据

2、在当前表格的首行新增数据

1 var _data = {
2 "name" : name,
3         ...//some datas
4 "desc" : desc
5     }
6 $("#table_Id").bootstrapTable(‘prepend‘, _data);//_data----->新增的数据

3、根据id删除行

1 var ids = [];//定义一个数组
2 ids.push(id);//将要删除的id存入数组
3 $("#table_Id").bootstrapTable(‘remove‘, {field: ‘id‘, values: ids});//field:根据field的值来判断要删除的行 values:删除行所对应的值


4、删除所有数据

$("#table_Id").bootstrapTable(‘removeAll‘);
5、更新指定行的数据

var _data = {
"name" : name,   
        ...//some datas
"desc" : desc
    }
$(‘#table_Id‘).bootstrapTable(‘updateRow‘, {index: index, row: _data});//index---->更新行的索引。row---->要更新的数据

6、更新指定的列数据

var rows = {
index : index, //更新列所在行的索引
field : "status", //要更新列的field
value : "正常" //要更新列的数据
}//更新表格数据 
$(‘#table_Id‘).bootstrapTable("updateCell",rows);

7、重新加载数据(分页的时候要注意参数的传递)

var opt = {
url: "abc.htm", //重新请求的链接
silent: true,
..... //可以加一些请求的参数
};
//重新加载数据
$("#table_Id").bootstrapTable(‘refresh‘,opt);

BootStrap table动态增删改表格内数据


推荐阅读
  • Manacher算法详解:寻找最长回文子串
    本文将详细介绍Manacher算法,该算法用于高效地找到字符串中的最长回文子串。通过在字符间插入特殊符号,Manacher算法能够同时处理奇数和偶数长度的回文子串问题。 ... [详细]
  • Python多线程详解与示例
    本文介绍了Python中的多线程编程,包括僵尸进程和孤儿进程的概念,并提供了具体的代码示例。同时,详细解释了0号进程和1号进程在系统中的作用。 ... [详细]
  • 包含phppdoerrorcode的词条 ... [详细]
  • 本文介绍了如何在 ASP.NET 中设置 Excel 单元格格式为文本,获取多个单元格区域并作为表头,以及进行单元格合并、赋值、格式设置等操作。 ... [详细]
  • LDAP服务器配置与管理
    本文介绍如何通过安装和配置SSSD服务来统一管理用户账户信息,并实现其他系统的登录调用。通过图形化交互界面配置LDAP服务器,确保用户账户信息的集中管理和安全访问。 ... [详细]
  • 蒜头君的倒水问题(矩阵快速幂优化)
    蒜头君将两杯热水分别倒入两个杯子中,每杯水的初始量分别为a毫升和b毫升。为了使水冷却,蒜头君采用了一种特殊的方式,即每次将第一杯中的x%的水倒入第二杯,同时将第二杯中的y%的水倒入第一杯。这种操作会重复进行k次,最终求出两杯水中各自的水量。 ... [详细]
  • 经过一年的思考,我发现自己对开发的兴趣并不浓厚,而对算法研究则更加热衷。本文将探讨开发与算法之间的本质差异,并分享我的未来学习计划。 ... [详细]
  • 本文介绍了Java编程语言的基础知识,包括其历史背景、主要特性以及如何安装和配置JDK。此外,还详细讲解了如何编写和运行第一个Java程序,并简要介绍了Eclipse集成开发环境的安装和使用。 ... [详细]
  • Bootstrap 缩略图展示示例
    本文将展示如何使用 Bootstrap 实现缩略图效果,并提供详细的代码示例。 ... [详细]
  • 本文介绍了一种支付平台异步风控系统的架构模型,旨在为开发类似系统的工程师提供参考。 ... [详细]
  • 使用 Git Rebase -i 合并多个提交
    在开发过程中,频繁的小改动往往会生成多个提交记录。为了保持代码仓库的整洁,我们可以使用 git rebase -i 命令将多个提交合并成一个。 ... [详细]
  • malloc 是 C 语言中的一个标准库函数,全称为 memory allocation,即动态内存分配。它用于在程序运行时申请一块指定大小的连续内存区域,并返回该区域的起始地址。当无法预先确定内存的具体位置时,可以通过 malloc 动态分配内存。 ... [详细]
  • 本文介绍了多种开源数据库及其核心数据结构和算法,包括MySQL的B+树、MVCC和WAL,MongoDB的tokuDB和cola,boltDB的追加仅树和mmap,levelDB的LSM树,以及内存缓存中的一致性哈希。 ... [详细]
  • A*算法在AI路径规划中的应用
    路径规划算法用于在地图上找到从起点到终点的最佳路径,特别是在存在障碍物的情况下。A*算法是一种高效且广泛使用的路径规划算法,适用于静态和动态环境。 ... [详细]
  • 本文详细介绍了如何在PHP中记录和管理行为日志,包括ThinkPHP框架中的日志记录方法、日志的用途、实现原理以及相关配置。 ... [详细]
author-avatar
技术交流
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有