1. 程式人生 > >BootStrap table動態增刪改表格內資料

BootStrap table動態增刪改表格內資料

API:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

簡單使用:

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動態刪改表格資料

API:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/簡單使用:1、在當前表格的最後新增資料var _data = { "name" : name,        ...//some datas"des

bootstrap-table實現兩個表格之間資料的傳遞,表格新增行刪除行功能

bootstrap table是一個非常不錯的,基於bootstrap的外掛,它擴充套件和豐富了bootstrap表格的操作,如格式化表格,表格選擇器,表格工具欄,分頁等等。 其實可以參考上述的例項進行擴充套件開發,比如兩個表格之間進行資料的傳遞,如下圖所示: 左邊表

Boostrap-table.js+bootstrap-editable.js刪改查完整案例

該完整案例是典型的部門管理,通過ajax發出增刪改查請求: html程式碼: <section class="panel"> <header class="panel-headin

bootstrap table動態載入資料

點選選擇按鈕,彈出模態框,加載出關鍵詞列表 TABLE樣式: <div class="modal fade " id="ClickModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" a

BootStrap】--具有刪改查功能的表格Demo

            var strAppend = '<tr style="background: rgb(255, 255, 255) none repeat scroll 0% 0%;"><td ><input type="checkbox" value="" edita

js遍歷獲取表格資料方法

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

[轉]bootstrap table 動態列數

原文地址:https://my.oschina.net/u/2356355/blog/1595563 據說bootstrap table非常好用,從入門教程中瞭解到它的以下主要功能: 由於固定表頭意味著固定的列,然而我需要做動態列數的表格啊。 大致思路:bootstrap table在載入表格時,表

Python - 字典--刪改查/建方法大全

字典 是另一種可變容器模型,且可儲存任意型別物件。 字典的每個鍵值 key=>value 對用冒號 : 分割,每個鍵值對之間用逗號 , 分割,整個字典包括在花括號 {} 中; 鍵一般是唯一的,如果重複最後的一個鍵值對會替換前面的,值不需要唯一; 值可以取

利用模態框彈出,jQuery實現table刪改查。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/ja

quartz定時器的使用,定時任務的動態刪改

目錄 一、簡介: 二、使用: 三、測試: 一、簡介: Java的定時任務通常使用以下方式: 使用JDK自帶的Timer 使用quartz框架 這裡主要是使用quartz來實現。Quartz是一款效能強大的定時任務排程器。開發人員可以使用Qua

20181022mysql操作一:建立庫,表的刪改查,資料刪改

1、建立資料庫 create database python charset=utf8; 2、使用資料庫 use python; 3、建立表結構 create table student(     id int primary key auto_increment

利用Ajax對客戶端頁面的動態刪改

前兩天在做一個網站的後臺,我做成員管理一塊,發現我負責的這一塊有很大的發揮空間,在web2.0時代客戶的體驗已經被提為最重要的議程,因此網頁的流暢度將是網頁能夠給人帶來快捷體驗的一個有效途徑,利用Ajax實現對資料的增刪改查,效果很好.... 在客戶端指令碼在winload時

Flask第四天-MongoDB介紹、刪改查、資料型別、比較符、查詢關鍵字、修改器、排序選取跳過

db                檢視當前資料庫 show dbs        查詢所有資料庫(在物理磁碟上的) u

Java Web 中 JSP刪改查mySQL資料

先在workbench中新建一個schema 比如叫 javatemp 再右鍵shcema裡面的table新建一個叫new_table的table 然後設定一下table裡面有什麼 如圖 右鍵new_table 顯示前100行 可以先往裡面手動新增

bootstrap-table 動態合併行和列方法

用法:$("#table2").bootstrapTable({ url: "http://...", columns: [], on

Repeater刪改查(嵌checkbox)版本

基礎知識比較重要為了鞏固以前所學習的,在此篇部落格中主要描述了下以前repeater中常用的一些增刪改查,更主要的是為了利用Jquery完成全選批量刪除的功能,程式碼十分簡單也沒使用儲存過程,歡迎提出您的見解和意見謝謝~此文只為分享學習~ 前臺Default.aspx &l

bootstrap-table(五)表格內容過多時顯示一行

內容過多時: 巨醜! 所以我想改成顯示一行 table { table-layout: fixed; } .txt { overflow: hidden;

mybatis 標籤動態刪改

mybatis 《foreach》 有的時候在專案中需要查詢某個列表時,可能會在程式碼中進行巢狀迴圈再取值,其實mybatis提供了這麼一個標籤,可以在SQL中進行迴圈(是不是很酸爽) 先來了解一下foreach這個標籤有哪些元素: item 表示集合

asp.netWeb開發中ztree實現無極限刪改查連線資料同步資料庫操作

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Dat

用js快速動態生成bootstrap table表格資料

var $table = $('#table');//繫結表格id $(function () { buildTable($table, 24, 24); //設定所要載入的表格列數和行數,此處為24行24列 }); function buildTable(