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

 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);

原文地址:https://www.cnblogs.com/SmallStrange/p/10643357.html

时间: 2024-10-12 06:45:50

BootStrap table动态增删改表格内数据的相关文章

JavaScript动态增删改表格数据

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style type="tex

jquery表格动态增删改及取数据绑定数据完整方案

一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方案 那就是用GridView 那个庞大的服务器控件,我一真就不怎么喜欢用服务器控件,于是极力说服PM用js来处理,并成功争取到了,先说下如果用GridView来处理的缺点, 1 生成的html代码会比较冗余, 2 每一个操作都会伴随页面回发, 3 每个操作都会刷新页面,这样的用户体验极差,就算用up

最简单直接碎片操作,动态增删改(2)

接续文章1的主activity,新增两个按钮一个是删除,一个是恢复然后添加事件,代码如下: @SuppressLint("Recycle") @Override public void onClick(View v) { // TODO Auto-generated method stub FragmentTransaction trx = getSupportFragmentManager() .beginTransaction(); switch (v.getId()) { cas

SpringMVC框架下数据的增删改查,数据类型转换,数据格式化,数据校验,错误输入的消息回显

在eclipse中javaEE环境下: 这儿并没有连接数据库,而是将数据存放在map集合中: 将各种架包导入lib下... web.xml文件配置为 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/

增删改查的数据访问

一.查看数据 自然要用到造连接了,连接到数据库,然后写sql语句,执行sql语句,昨天学到的数据访问的过程 输出一张表的,用到的就是表的标签了,首先是输出一行的的内容,也就是表中的字段名的一行.例如: 1 2 3 4 5 6 7 8 9 <table width="100%" height="100%" border="1px" cellpadding="0" cellspacing="0">

java:Oracle(table的增删改查,data的增删改查)

1.oracle命名规范:和Java的命名规范很像 1.严格区分大小写 2.所有的sql语句都要以';'结尾 3.所有的sql 都要使用空格区分:sqlplus空格/空格as空格sysdba回车 4.无论是表名还是列名都必须以字母开头 java中的class必须要以大写字母开头,遵循驼峰命名方式 5.不能使用ORACLE的保留字 6.不能与用户定义的其它对象重名 7.数字,$#_,字母(只能包含A-Z,a-z,0-9,_,$,#)字母加上_ emp表中有一列叫emp_no(员工的编号) 2.连接

CoreData的增删改查和数据迁移示例

作为管理器,最基本的功能就是增删改查了. 1.插入 AppDelegate *app = [[UIApplication sharedApplication] delegate]; NSManagedObjectContext *context = [app managedObjectContext]; NSManagedObject *newManagedObject = [NSEntityDescription insertNewObjectForEntityForName:@"entity

bootstrap table简洁扁平的表格

使用方法 1.在html页面的head标签中引入Bootstrap库(假如你的项目还没使用)和bootstrap-table.css. <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> 2.在head标签或者在body标签闭合前(比较推荐)引入jQuery

django:bootstrap table加载django返回的数据

{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>项目列表</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></scrip