BootStrap table动态增删改表格内数据
1:添加一个【操作】列 {
title: "操作",
align: 'center',
valign: 'middle',
width: 160, // 定义列的宽度,单位为像素px
formatter: function (value, row, index) { //传入数据
return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.id + '\')">删除</button>';
}
}
2:创建删除方法 function del(id) {
//yzh
// debugger;
var index = $('#table').bootstrapTable('getData').length;
$('#table').bootstrapTable('remove', {
field: "id", //此处的 “id”对应的是字段名
values: [parseInt(id)]
});
}
简单使用:
1、在当前表格的最后新增数据
var _data = {
"name" : name,
...//some datas
"desc" : desc }
$("#table_Id").bootstrapTable('append', _data);//_data----->新增的数据
2、在当前表格的首行新增数据
var _data = {
"name" : name,
...//some datas
"desc" : desc
}
$("#table_Id").bootstrapTable('prepend', _data);//_data----->新增的数据
3、根据id删除行
var ids = [];//定义一个数组
ids.push(id);//将要删除的id存入数组
$("#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动态增删改表格内数据的更多相关文章
- JavaScript动态增删改表格数据
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jquery表格动态增删改及取数据绑定数据完整方案
一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...
- 【BootStrap】--具有增删改查功能的表格Demo
[BootStrap]--具有增删改查功能的表格Demo 目录(?)[+] 前言 版本一 样式 代码 版本二 样式 代码 版本三 样式 代码 总结 前言 bootstrap的表格样式,有类似EasyU ...
- MYSQL - database 以及 table 的增删改查
MYSQL - database 以及 table 的增删改查 MySQL的相关概念介绍 MySQL 为关系型数据库(Relational Database Management System), 这 ...
- [转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
- Mysql数据库和表的增删改查以及数据备份&恢复
数据库 查看所有数据库 show databases; 使用数据库 use 数据库名; 查看当前使用的数据库 select database(); 创建数据库 create database 数据库名 ...
- Zookeeper 客户端API调用示例(基本使用,增删改查znode数据,监听znode,其它案例,其它网络参考资料)
9.1 基本使用 org.apache.zookeeper.Zookeeper是客户端入口主类,负责建立与server的会话 它提供以下几类主要方法 : 功能 描述 create 在本地目录树中创建 ...
- SpringMVC框架下数据的增删改查,数据类型转换,数据格式化,数据校验,错误输入的消息回显
在eclipse中javaEE环境下: 这儿并没有连接数据库,而是将数据存放在map集合中: 将各种架包导入lib下... web.xml文件配置为 <?xml version="1. ...
- django:bootstrap table加载django返回的数据
bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置 这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...
随机推荐
- jmeter 获取登录token
1.在登录的请求下新建正则表达式,获取token 2.正则表达式的写法 注意:apply to 默认是选择第二个,但是有获取不到token的情况就选第一个 "accessToken" ...
- vue 项目搭建步骤
环境搭建步骤: 打开git ,运行 npm install --global vue-cli 这是安装vue的命令行 vue init webpack vue-demo 这是vue基于webpack的 ...
- 对于"单链表逆置和递归"的问题的理解.
一. 相关知识要点: 学习或了解基础数据结构和C语言, 对基础链表知识或相关知识有概况性认识. 例如: 本题目结构为: #define elem_type int typedef struct _si ...
- Java面试3
反射的定义: 反射是java语言的一个特性,它允程序在运行时(注意不是编译的时候)来进行自我检查并且对内部的成员进行操作.例如它允许一个java的类获取它所有的成员变量和方法并且显示出来. 反射机制的 ...
- QT 读写配置文件 .ini
高端大气上档次!码住 读取配置文件: //根据目录寻找配置文件 QSettings* setting = new QSettings("configs/config.ini", Q ...
- gtest 参数化
前言: 在测试用例中,我们时常需要传给被测函数不同的值,gtest为我们提供了简便的方法,可以使我们能够灵活的进行参数化测试. 步骤: 1.创建一个类,继承testing::TestWithParam ...
- JAVA创建和销毁对象
类静态方法取代构造方法创建对象 类静态方法有名称,可以通过名称说明返回的是什么类型的实例 可以控制是否需要新开辟内存空间 返回值是可以控制的 实体类属性非常多的时候使用build模式创建对象 单例实体 ...
- 台式机安装Linux操作系统无法识别网卡
在公司一台台式机上安装centos7系统,发现安装好之后,发现没有自动生成eth0网卡. 查看网卡相关信息: lspci|grep Eth 获取到网卡型号后,可以去官网下载对应的安装包进行编译安装即可 ...
- servlete基础
1. 使用servlet需要继承HttpServlet Servlet 生命周期 Servlet 生命周期可被定义为从创建直到毁灭的整个过程.以下是 Servlet 遵循的过程: Servlet 通 ...
- python selenium-webdriver 常用浏览器的操作 (十)
浏览器常用的一些方法和属性其实很简单一些方法,但是却在实际测试过程中经常使用. 浏览器中加载url 方法:get(url) 实例:driver.get("http//:www.baidu.c ...