Bootstrap-Table10分鐘入門，怎么學和

Bootstrap-Table10分鐘入門，怎么學和用？（二）

ootstrap-Table文檔

接上一篇。上回簡單介紹了BootstrapTable的常用函數(shù)，這回主要介紹屬性設置。

<link href="*.css"><!--CSS 引用bootstrap.min.css和bootstrap-table.min.css-->
  <script src="*.js"><!--JS包引用， jquery.min.js，bootstrap.min.js，bootstrap-table.min.js-->

<table id="ID"></table>   <!--html代碼-->

$("#ID").bootstrapTable({鍵:值,鍵:值,鍵:值,鍵:值……}）//bootstrapTable函數(shù)

以上簡寫成“骨架”。分三步用，

1.引用，

注意點：js的引用順序，js包里面可以理解為從上到下的程序集，BootstrapTable以Jquery為基礎的，所以一定以Jquery引用為先，接著是bootsrtap.js,最后是Bootstrap-Table.js。

2.HTML標簽

注意點：一般寫在Table標簽里，數(shù)據(jù)放到哪個Table呢，這里用的Jquery獲取DOM id為ID的對象。當然也可以使用類選擇器，最好是唯一，建議用id選擇器標識。

3.使用函數(shù)

這里舉例的是其中一個最最常用的bootstrapTable({...})，以Ajax形式取數(shù)據(jù)的函數(shù)。

屬性Url:"路徑"。路徑。

可以是本地JSON文件，
可以是預定義的JSON數(shù)據(jù)，
也可以是路由到后端（后臺）取數(shù)據(jù)的方法，

例如通過服務器路由到達MVC中的Controller里的GetData(string id)

屬性queryParams，可選參數(shù)，如剛才所說GetData方法中的id

queryParams：function(){return id:"123"}//這里是一個function

也可以直接寫{id:"123"}

屬性columns:定是各列數(shù)據(jù)。是JSON格式[{},{},{}……]

定義每一列以這樣的形式{鍵:值}，

常用的有：

{field:"后臺返回JSON數(shù)據(jù)或?qū)ο蟮膶傩悦?#34;,

title:"顯示在表格上的列名",

}

以上定義列中還會有一些可選屬性formatter、editable，如editable需要另外引入相應的js文件。

Bootstrap-table的入門分享到這里，認為遠遠不止這些，動手才是入門的正式開始，一起加油吧！

建議看看文檔例子。

謝謝閱讀。下回繼續(xù)分享Bootstrap File Input上傳插件。

fileinput上傳插件

舉例工作中開發(fā)物流分車程序的代碼，代碼定義兩列“序號”、"車號"

ootstrap Table 封裝了一套完善的數(shù)據(jù)表格組件，把下面的代碼復制一下估計你需要的基本功能都有了，沒有的再看看手冊看著我給的實例也能很快的熟悉了。

客戶端

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Bootstrap-Table</title>
 <link rel="stylesheet" />
 <link rel="stylesheet" href="assets/bootstrap-table.css"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
 <div>
 <div>
 <div class="col-*-12">
 
 <div id="toolbar">
 <div class="btn btn-primary" data-toggle="modal" data-target="#addModal">添加記錄</div>
 </div>
 
 <table id="mytab" class="table table-hover"></table>
 
 <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
 ×
 </button>
 <h4 class="modal-title" id="myModalLabel">添加記錄</h4>
 </div>
 <div class="modal-body">
 <form role="form" action="javascript：void(0)">
 <div class="form-group">
 <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
 </div>
 <div class="form-group">
 <input type="text" class="form-control" id="age" placeholder="請輸入年齡">
 </div>
 </form>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
 <button type="button" class="btn btn-primary" id="addRecord">提交</button>
 </div>
 </div>
 </div>
 </div>
 
 </div>
 </div>
 </div>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 <script src="assets/bootstrap-table.js"></script>
 <script src="assets/bootstrap-table-zh-CN.js"></script>
 <script type="text/javascript">
 $(function() {
 //根據(jù)窗口調(diào)整表格高度
 $(window).resize(function() {
 $('#mytab').bootstrapTable('resetView', {
 height: tableHeight()
 })
 })
 
 $('#mytab').bootstrapTable({
 url: "index.php",//數(shù)據(jù)源
 dataField: "rows",//服務端返回數(shù)據(jù)鍵值 就是說記錄放的鍵值是rows，分頁時使用總記錄數(shù)的鍵值為total
 height: tableHeight(),//高度調(diào)整
 search: true,//是否搜索
 pagination: true,//是否分頁
 pageSize: 20,//單頁記錄數(shù)
 pageList: [5, 10, 20, 50],//分頁步進值
 sidePagination: "server",//服務端分頁
 contentType: "application/x-www-form-urlencoded",//請求數(shù)據(jù)內(nèi)容格式 默認是 application/json 自己根據(jù)格式自行服務端處理
 dataType: "json",//期待返回數(shù)據(jù)類型
 method: "post",//請求方式
 searchAlign: "left",//查詢框?qū)R方式
 queryParamsType: "limit",//查詢參數(shù)組織方式
 queryParams: function getParams(params) {
 //params obj
 params.other="otherInfo";
 return params;
 },
 searchOnEnterKey: false,//回車搜索
 showRefresh: true,//刷新按鈕
 showColumns: true,//列選擇按鈕
 buttonsAlign: "left",//按鈕對齊方式
 toolbar: "#toolbar",//指定工具欄
 toolbarAlign: "right",//工具欄對齊方式
 columns: [
 {
 title: "全選",
 field: "select",
 checkbox: true,
 width: 20,//寬度
 align: "center",//水平
 valign: "middle"http://垂直
 },
 {
 title: "ID",//標題
 field: "id",//鍵名
 sortable: true,//是否可排序
 order: "desc"http://默認排序方式
 },
 {
 field: "name",
 title: "NAME",
 sortable: true,
 titleTooltip: "this is name"
 },
 {
 field: "age",
 title: "AGE",
 sortable: true,
 },
 {
 field: "info",
 title: "INFO[using-formatter]",
 formatter: 'infoFormatter',//對本列數(shù)據(jù)做格式化
 }
 ],
 onClickRow: function(row, $element) {
 //$element是當前tr的jquery對象
 $element.css("background-color", "green");
 },//單擊row事件
 locale: "zh-CN"http://中文支持,
 detailView: false, //是否顯示詳情折疊
 detailFormatter： function(index, row, element) {
 var html='';
 $.each(row, function(key, val){
 html +="<p>" + key + ":" + val + "</p>"
 });
 return html;
 }
 });
 
 $("#addRecord").click(function(){
 alert("name:" + $("#name").val() + " age:" +$("#age").val());
 });
 })
 
 function tableHeight() {
 return $(window).height() - 50;
 }
 /**
 * 列的格式化函數(shù) 在數(shù)據(jù)從服務端返回裝載前進行處理
 * @param {[type]} value [description]
 * @param {[type]} row [description]
 * @param {[type]} index [description]
 * @return {[type]} [description]
 */
 function infoFormatter(value, row, index)
 {
 return "id:" + row.id + " name:" + row.name + " age:" + row.age;
 }
 </script>
</body>
</html>

服務端：

<?php
/**
 * 服務端模擬數(shù)據(jù)
 */
 
//前端期望數(shù)據(jù)為json
header("Content-Type:application/json;charset=utf-8");
//post 請求 請求內(nèi)容類型為 application/x-www-form-urlencoded 如果是 application/json 則需要另行處理 $_POST 數(shù)組不會被填充
 
//為了保持模擬的數(shù)據(jù)
session_start();
 
if ($_SESSION['emulate_data']) {
 //已生成
} else {
 $list=[];
 //第一次會模擬個數(shù)據(jù)
 for($i=1; $i < 50; $i ++) {
 $list[]=[
 "id"=> $i,
 "name"=> substr(str_shuffle(implode('', range('a', 'z'))), 0, 5),
 "age"=> mt_rand(10, 30)
 ];
 }
 $_SESSION['emulate_data']=$list;
}
 
$list_temp=[];
//檢索
if (isset($_POST['search']) && !empty($_POST['search'])) {
 foreach ($_SESSION['emulate_data'] as $key=> $row) {
 if (strpos($row['name'], $_POST['search']) !==false
 || strpos($row['age'], $_POST['search']) !==false) {
 $list_temp[]=$_SESSION['emulate_data'][$key];
 }
 }
} else {
 $list_temp=$_SESSION['emulate_data'];
}
//排序
if (isset($_POST['sort'])) {
 $temp=[];
 foreach ($list_temp as $row) {
 $temp[]=$row[$_POST['sort']];
 }
 //php的多維排序
 array_multisort($temp,
 $_POST['sort']=='name' ? SORT_STRING : SORT_NUMERIC,
 $_POST['order']=='asc' ? SORT_ASC : SORT_DESC,
 $list_temp
 );
}
 
//分頁時需要獲取記錄總數(shù)，鍵值為 total
$result["total"]=count($list_temp);
//根據(jù)傳遞過來的分頁偏移量和分頁量截取模擬分頁 rows 可以根據(jù)前端的 dataField 來設置
$result["rows"]=array_slice($list_temp, $_POST['offset'], $_POST['limit']);
 
echo json_encode($result);

如上的json數(shù)據(jù)（當然我前臺設置的期望數(shù)據(jù)類型是json，php 直接encode一個 ["total"=>200, "rows"=>[[],[],][,][,]]的數(shù)組就完事了，方便）

2、且其請求后端是傳遞的內(nèi)容格式默認為 application/json 我自己習慣用方便的 x-www-form-urlencoded

如果大家還想深入學習，可以私信小明，為大家提供一套前端的學習資料：

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持。

求：bootstrap-table 實現(xiàn)在點擊行第二次的時候還是選中狀態(tài)，原因是因為項目中在表格最后面加了一列按鈕操作行數(shù)據(jù)，點擊按鈕會彈出新頁面，新頁面是將行數(shù)據(jù)以其他形式展示出來。如下圖點擊“請求詳情”在彈出的新頁面獲取到行數(shù)據(jù)。

可以通過設置如下屬性來實現(xiàn)點擊行的時候選中行

clickToSelect:true,
singleSelect:true,

但是如果點擊一個按鈕兩次，第二次行就變成非選中狀態(tài)，在彈出的新頁面也無法獲取到選中行的數(shù)據(jù)。。。

一個方法可以將行數(shù)據(jù)在頁面跳轉(zhuǎn)的時候附在url后面直接傳遞過去，但傳遞長度有限，不適合本次想要實現(xiàn)的效果。另一種可以只傳行id過去，在新的頁面重ajax請求去請求數(shù)據(jù)，但其實數(shù)據(jù)都一樣，在請求一遍要消耗性能，這里只想說在另一個頁面通過 xxTable.bootstrapTable('getSelections')來獲取選擇行的數(shù)據(jù)，并在頁面直接作填充展示。

程序員的固執(zhí)有時候就是這么樸實無華。。。。

一開始通過查看html頁面發(fā)現(xiàn)行選中是通過在行上添加selected的class屬性，于是一頓操作實現(xiàn)了通過代碼動態(tài)添加selected。

但是bootstrap-table好像不認帳，通過添加class屬性來實現(xiàn)行選中的效果，行雖然是選中效果，但當你要用xxTable.bootstrapTable('getSelections')來獲取選擇行的數(shù)據(jù)的時候，根據(jù)就拿不到數(shù)據(jù)。。。。

后來求助度娘，看到如下寫法

onClickCell:function(field, value, row, $element){
  if(field==“checkbox”){
  	$element.children().click();
  }
}

然后就有了。。。。

onClickCell:function(field,value,row,$element){
  if(field=="operCommand"){
      if($element.parent().hasClass("selected")){
          $element.parent().children(':first').children(':first').click()
      }
  }
},

達到了重復點擊按鈕的時候行可以是一直選中狀態(tài)。

請不要罵我。

在線咨詢

上一篇：幾句代碼寫個飛快的下載軟件，輕快版 aria2 支持
下一篇：POI操作EXCEL

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

Bootstrap-Table10分鐘入門，怎么學和

您的項目需求