2. 程式人生 > >Boostrap-table 選中行獲取行資料

Boostrap-table 選中行獲取行資料

阿新 • • 發佈：2019-01-10

轉自：

https://www.jb51.net/article/89573.htm

 

bootstrap-table使用總結

bootstrap-table是在bootstrap-table的基礎上寫出來的，專門用於顯示資料的表格外掛。而bootstrap是來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，具有簡便靈活，快速前端開發的優勢。對與bootstrap在此就不在敘述。本文將著重講解自己在專案中使用到bootstrap-table的一些理解和如何學習它。

       首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之間的關係。bootstrap很多部分程式碼涉及到了jquery的，也就是說 bootstrap是依賴jquery的，而我們要使用的bootstrap-table則是在bootstrap基礎上創造出來的，所以在使用

bootstrap-table之前必須引用 jquery 和bootstrap的相關js，css檔案。

       接著說，bootstrap-table的特點:與jquery-ui，jqgrid等表格顯示外掛而言，bootstrap-table扁平化，輕量級,對於一些輕量級的資料顯示，他是綽綽有餘，而對父子表等的支援也很好，最主要的是可以與bootstrap的其他標籤無縫組合。

     好了，簡介的話就說到這，直接上程式碼和效果圖之後，再做進一步的討論。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

 <title>bootstrap-table</

title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <meta name="description" content="" />

 <meta name="keywords" content="" />

  

 <script type="text/javascript" src="./js/jquery-2.2.1.js"></script>

 <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>

 <script type="text/javascript" src="./bootstrap-table/bootstrap-table-all.js"></script>

 <script type="text/javascript" src="./bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

 <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css" >

 <link rel="stylesheet" type="text/css" href="./bootstrap-table/bootstrap-table.min.css" >

 

</head>

 

<script language="javascript">

</script>

 

<body>

 <div class="col-md-offset-3 col-md-6">

 <div class="panel panel-default">

 <div class="panel-heading">

 <h3 class="panel-title text-center">已新增教師賬號</h3>

 </div>

 <div class="panel-body">

 <div id="toolbar" class="btn-group">

 <button id="btn_edit" type="button" class="btn btn-default" >

 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改

 </button>

 <button id="btn_delete" type="button" class="btn btn-default">

 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除

 </button>

 </div>

 <table id="teacher_table" data-toggle="table" data-url="./data.php" data-method="post"

 data-query-params="queryParams"

 data-toolbar="#toolbar"

 data-pagination="true"

 data-search="true"

 data-show-refresh="true"

 data-show-toggle="true"

 data-show-columns="true"

 data-page-size="5">

 <thead>

 <tr>

 <th data-field="name">使用者賬號</th>

 <th data-field="pwd">使用者密碼</th>

 <th data-field="t_name">教師姓名</th>

 </tr>

 </thead>

 </table>

 </div>

 </div>

 </div>

</body>

效果圖：

好接下來我們 分步驟剖析一下上面的程式碼的含義。

 1.首先我們需要去下載相應的 jquery bootstrap  bootstrap-table的包，這些網上都有教程，在此不再敘述如何下載。

       由上面<head>標籤中引用js和css檔名可知我們必須引進這幾個檔案。

注意bootstrap，下載編譯過的壓縮包中只有三個資料夾 css ，fonts， js

       1. jquery-2.2.1.js  ----  最新的jquery檔案

       2. bootstrap.min.js --- 最新的bootstrap/js中bootstrap.min.js 壓縮檔案

       3.bootstrap.min.css ---最新的bootstrap/css中bootstrap.min.css 壓縮檔案

       4.bootstrap-table-all.js ---最新bootstrap-table下的js檔案

       5.bootstrap-table-zh-CN.js ----最新bootstrap-table/locale下的中文初始檔案

       6.bootstrap-table.min.css ---最新的bootstrap-table下css壓縮檔案

這六個必須配置，其中bootstrap-table-zh-CN.js是支援中文的js檔案，只有載入了這個檔案我們的一些表格顯示資訊才會被設定成中文。

 我們來實驗一下 將bootstrap-table-zh-CN.js去掉後的顯示效果。

  當然我們還可以把顯示資訊設定成其他語言，只要將bootstrap-table-zh-CN.js換成其他語言的js檔案即可。bootstrap-table包中都有支援。

   我們還可以看看這個檔案中的原始碼，我們看一下，就知道這個檔案幹了什麼了。 

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

/**

 * Bootstrap Table Chinese translation

 * Author: Zhixin Wen<[email protected]>

 */

(function ($) {

 'use strict';

 

 $.fn.bootstrapTable.locales['zh-CN'] = {

 formatLoadingMessage: function () {

 return '正在努力地載入資料中，請稍候……';

 },

 formatRecordsPerPage: function (pageNumber) {

 return '每頁顯示 ' + pageNumber + ' 條記錄';

 },

 formatShowingRows: function (pageFrom, pageTo, totalRows) {

 return '顯示第 ' + pageFrom + ' 到第 ' + pageTo + ' 條記錄，總共 ' + totalRows + ' 條記錄';

 },

 formatSearch: function () {

 return '搜尋';

 },

 formatNoMatches: function () {

 return '沒有找到匹配的記錄';

 },

 formatPaginationSwitch: function () {

 return '隱藏/顯示分頁';

 },

 formatRefresh: function () {

 return '重新整理';

 },

 formatToggle: function () {

 return '切換';

 },

 formatColumns: function () {

 return '列';

 }

 };

 

 $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);

 

})(jQuery);

 粗略一看就知道，引用該js檔案後，在載入時，便祈禱了初始化的效果。將一些顯示資訊的內容轉為相應的中內容。

 2.接著我們來說相關的html程式碼，實際上與bootstrap-table有關的html程式碼只有這一部分

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<table id="teacher_table" data-toggle="table" data-url="./data.php" data-method="post"

 data-query-params="queryParams"

 data-toolbar="#toolbar"

 data-pagination="true"

 data-search="true"

 data-show-refresh="true"

 data-show-toggle="true"

 data-show-columns="true"

 data-page-size="5">

 <thead>

 <tr>

 <th data-field="name">使用者賬號</th>

 <th data-field="pwd">使用者密碼</th>

 <th data-field="t_name">教師姓名</th>

 </tr>

 </thead>

 </table>

對，就只有一個table標籤，再加上一大堆了  引數，而表格的展現形式就是通過這些在引數 來實現的。要知道有哪些樣式和功能，光靠我列舉肯定是九牛一毛，授人以魚不如授人以漁，我告訴大家去哪查詢這些類.class的含義。 我們可到bootstrap-table的專業網站上去查詢 這有一個我用的連結，點選開啟連結如果無效的可以 直接輸入http://bootstrap-table.wenzhixin.net.cn/documentation  

當然還可以在example中看一些例子

我們如何檢視 相應的引數的含義呢？ 看到上面這張圖，最右邊的是一些選項，可以選這可以設定的表格屬性，行屬性，以及可繫結的事件。

 點選表格屬性 Table options  顯示如下圖，首先看到標題Name用於js建立表格是使用，而Attribute是html建立表格使用的，

舉幾個例子在我們上面的程式碼中有這麼幾個 引數他們的意思是：

   data-url：索取資料的url。
  data-method：請求方式。
  data-height：設定表格的高
  data-query-params="queryParams" ：設定
  data-toolbar="#toolbar"  ：設定裝按鈕的容器為id為toolbar的。
  data-pagination="true"  ：設定是否顯示頁碼數
  data-search="true"       ：設定search框
  data-show-refresh="true" ：設定重新整理按鈕
  data-show-toggle="true"  ：設定資料顯示格式

這下你該明白怎麼樣查看了吧！  

注意其中下面段程式碼是核心，<tr>表示一行 <th>一個格，data-field="name"表示一行中一個格子中的資料名  你可以把 data-field理解成id，因為後臺傳送過來的資料就是根據data-field的來區分，那個資料傳送給誰的。

?

1

2

3

4

5

6

7

<thead>

 <tr>

 <th data-field="name">使用者賬號</th>

 <th data-field="pwd">使用者密碼</th>

 <th data-field="t_name">教師姓名</th>

 </tr>

</thead>

 對於不想用html靜態生成，也可以使用js動態生成。給一個程式碼demo，要設定相關的引數只需要採用 上面講的 Name:options 即可。例如在html中設定資料請求的目的檔案 data-url："./data.php"  在js中只要宣告  url:"./data.php"

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20 

21

$('#table').bootstrapTable({

 columns: [{

 field: 'id',

 title: 'Item ID'

 }, {

 field: 'name',

 title: 'Item Name'

 }, {

 field: 'price',

 title: 'Item Price'

 }],

 data: [{

 id: 1,

 name: 'Item 1',

 price: '$1'

 }, {

 id: 2,

 name: 'Item 2',

 price: '$2'

 }]

});

3.這樣說，其他程式碼是幹什麼的，其中一部分程式碼是使用了 boostrap中的面板來設定格式，即將table鑲嵌在面板中。 所去掉面板的程式碼後bootstrap-table的效果是這樣的

僅僅是沒有了面板而已。

 4.傳送資料的格式，bootstrap-table 接收的資料形式預設為json格式的

在上面可以看到請求的後臺地址為:"./data.php",我們來看一下他的內容

?

1

2

3

4

5

6

7

8

<?php

 

 $results[0]=array("name"=>"aoze","pwd"=>"20132588","t_name"=>"張三");

 $results[1]=array("name"=>"lisi","pwd"=>"1234","t_name"=>"李四");

 $results[2]=array("name"=>"wangwu","pwd"=>"44455","t_name"=>"王五");

 echo json_encode($results);

 

?>

很簡單吧！ 當然這只是我手寫的一些測試資料，在專案中當然是從資料庫中查找出來的。

5.當然僅僅使顯示資料有時候還是不夠的，我們需要和table進行一些互動，比如進行一些刪除，修改的功能，這時就需要用到bootstrap-table 的一些事件了。在上面的案例中我在table的中鑲嵌了兩個button元件如圖

這個鑲嵌的實現辦法是在在table的屬性中 添加了這麼一行 data-toolbar="#toolbar"

其意思就是在工具欄的一行新增 id為toolbar的標籤。

 在本人做到這個專案中，要通過這兩個按鈕對table中點選選中的行進行相應的操作。

編寫相應的事件，首先為table繫結一個選中的觸發事件，然後通過getSelectRow函式獲得點選選中行的資料。

?

1

2

3

4

5

6

7

8

9

$('#teacher_table').on('click-row.bs.table', function (e, row, element)

{

 $('.success').removeClass('success');//去除之前選中的行的，選中樣式

 $(element).addClass('success');//添加當前選中的 success樣式用於區別

}); function getSelectedRow()

{

 var index = $('#teacher_table').find('tr.success').data('index');//獲得選中的行

 return $('#teacher_table').bootstrapTable('getData')[index];//返回選中行所有資料

}

相關推薦

Boostrap-table 選中行獲取行資料

轉自： https://www.jb51.net/article/89573.htm   bootstrap-table使用總結 bootstrap-table是在bootstrap-table的基礎上寫出來的，專門用於顯示資料的表格外掛。而bootstrap是來自 Twi

jquey點選table行 獲取行資料 賦值到其他控制元件

                      $("#tbody2 tr").each(function () {                         var actionDT = $(this).children().eq(0).text();         

通過後臺SQL獲取分頁資料，在使用VUE-Element-Table 表格選擇多行資料時，怎樣在

在專案中，分頁是由後臺SQL獲取。在table表格多選時，容易把選中的值傳給後臺，但是怎樣在返回上一頁時怎樣記住表格多選的資料？？ 當返回第二頁時，應該把第一條資料再選中，保持選擇狀態。 具體思路：在頁面不重新重新整理載入時，使用二維陣列儲存el-table表格多選結果。其中一維

BootstrapTable獲取選中行的行號

1、主要為了配合頁面按鈕狀態改變而不重新整理狀態 程式碼如下 var index= ""; 在bootstrapTable的js定義以下觸發事件   $('#historyTable').bootstrapTable({       //單擊行時         onCli

easyui 中datagrid獲取選中行的行號

用easyui時候有個刪除選中行的需求，於是得知道選中的行的行號，才能在介面上呼叫它的delete方法刪除選中行。 選中行可以用    var datas = $('#xxxx').datagrid('getSelections');獲得。這裡獲得的是所有選中行，在參照ap

C# DataGridView如何獲取選中行的某個資料

DataGridView的幾個基本操作：1、獲得某個（指定的）單元格的值：dataGridView1.Row[i].Cells[j].Value;2、獲得選中的總行數：dataGridView1.SelectedRows.Count;3、獲得當前選中行的索引：dataGri

jqGrid獲取選中行的部分資料

//tab_post:表格名稱 //nos：要獲取的欄位 //ids：獲得所有選中的id var ids = $('#tab_post').jqGrid('getGridParam', 'selarrrow'); var nos="";

js程式碼積累：獲得table選中行

前段時間在做一個OA系統，對於table的操作比較多，其中有一個場景就是選中某一行，點選修改刪除按鈕，需要獲得這一行資料的ID,使用的方法是通過樣式來進行篩選，程式碼如下： /** * 獲取選中ids * @returns {Array} */ function getSele

bootstrap table通過ajax獲取後臺資料展示在table

1. 背景 bootstrap table 預設向後臺傳送語法的dataType為 json，但是為了解決跨域問題我們需要將dataType改為jsonp，這時就需要修改bootstrap table獲取後臺資料的方式，採用$('#table').bootstrap

layui使用表格渲染獲取行資料

需求：使用前端框架layui生成表格，點選表格中一行資料中的按鈕，獲取到這行資料。 解決辦法： 在render中增加欄位： done: function (res, curr, count) { // $('.x-body').find('.lay

記錄手動處理form表單中對table表格中的行資料的收集

通過ajax傳送資料到controller來處理，這是大部分web應用都會遇到的問題。而對於form表單資料的收集，如果要傳送資料少的話，我們可以一個一個來收集，而如果有很多也就是說批量操作那麼我們可以通過 $("#FormId").serializeArray()；來自動

獲取table中CheckBox選中行的id

lec 每一個 選中行 function 選中 close var his sel 方式一 var selectList=‘‘; jQuery(".table tbody input[type=checkbox]:checked").map(function ()

獲取jqGrid中選中行的資料以及 jqGrid獲得所有行資料的方法

獲取jqGrid中選擇的行的資料以及 jqGrid獲得所有行資料的方法 獲取jqGrid中選擇的行的資料： 獲取選擇一行的id，如果你選擇多行，那下面的id是最後選擇的行的id：

獲取Table點選行行號和資料

元件：Y_XIAO_02 檢視：V_MAIN 視窗：W_MAIN Application:Y_XIAO_02 建立節點 建立節點。 建立UI控制元件 Table 繫結節點。 設定LinkToAction。 建立event。     ME

antd table 行點選事件以及高亮顯示選中行的背景顏色

需求如圖點選表格某一行選中,修改選中行的背景顏色 檢視antd的官方文件 https://ant.design/components/table-cn/ 會發現文件中給出了兩個屬性 rowClassName 和 onRow rowClassName: 表格行的類名,

動態給table增加複選框，獲取複選框選中的資料

PS→無奈：失敗只是暫時停止成功，假如我不能，我就一定要；假如我要，我就一定能！ html如下：  動態給以上table新增複選框，並且獲取選中資料的js如下： $(function(){ function initTableChec

EasyUI Datagrid 獲得選中行（CheckBox）的使用和獲取的資料不正常（資料缺失。。）的解決

checkOnSelect            當為True的時候，點每一行時CheckBox就會被選中；為False時，只能手動的點選CheckBox ；預設true;      select

jqgrid如何使用delRowData函式批量刪除 selarrrow獲取的多個選中行資料及注意事項

由於jqgrid沒有提供批量刪除行的函式，因此要實現批量刪除選中行資料，就只能： 先獲取選中行rowIds 遍歷選中行rowIds，逐個呼叫delRowData(string rowid)刪除行資料。 看上去挺簡單，但是這裡有個很大的坑，那就是jqgrid獲取選中

bootstrap table獲取選中行的值

var row=$.map($("#memberVideo").bootstrapTable('getSelections'),function(row){return row ; }); row

DataGridView如何獲取選中行資料並更新

前言：機房合作的時候有一個反饋的功能，使用者和操作員可以對網咖的情況提出一些反饋。管理員處理反饋資訊。這裡面需要做的就是用DataGridView控制元件，選中某一行，然後進行更新。然而可以選中某一行，但是更新不了，於是就查了好多部落格，大多都是關於如何選中某一行，但是沒有關於如何更新的