快捷導(dǎo)航

BootStrap Table對(duì)前臺(tái)頁(yè)面表格的支持實(shí)例講解

更新時(shí)間：2016年12月22日 09:34:39 作者：小寶不乖

bootstrap-table是在bootstrap的基礎(chǔ)上面做了一些封裝，所以在使用bootstrap-table之前要導(dǎo)入的js和css，下面通過(guò)本文給大家詳細(xì)介紹需要引入的文件，對(duì)bootstrap table 表格感興趣的朋友一起看看吧

1、bootstrap-table是在bootstrap的基礎(chǔ)上面做了一些封裝，所以在使用bootstrap-table之前要導(dǎo)入的js和css有

　　1）基本的還是jQuery

<script type="text/javascript" src="js/jquery.min.js?v=2.1.4"></script>

　　2）引入bootstrap

<script type="text/javascript" src="js/bootstrap.min.js?v=3.3.6"></script>
<link rel="stylesheet" href="css/bootstrap.min14ed.css?v=3.3.6">

　3）引入bootstrap-table

<script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css">

2、頁(yè)面的編寫方式（建議）

<div class="table">
 <table id="publish_model"></table>
 </div>

3、具體的數(shù)據(jù)加載和處理都在js里面完成，具體的實(shí)現(xiàn)過(guò)程不用自己去寫，bootstrap-table都寫好了

//這里是js的具體代碼的樣式處理
dynamicTable = $("#publish_model").bootstrapTable("destroy").bootstrapTable({
  url: "model/getPublishModel",           
  striped: true,           
  pagination: true, 
  singleSelect: true,
  clickToSelect: true, 
  pageNumber:1,      
  pageSize: 10,      
  pageList: [5, 10, 20], 
  sidePagination: "server",
  queryParamsType: "limit",
  queryParams: getPageMessage,
  minimunCountColumns: 2,
  height:$(window).height()*0.85,
  columns:[{
   field:"modelName",
   title:"模型名稱",
   align: "center",
  },{
   field:"modelDescription",
   title:"模型描述",
   align: "center"
  },{
   field:"executeType",
   title:"執(zhí)行類型",
   align: "center"
  },{
   field:"typeName",
   title:"模型類型",
   align: "center"
  },{
   field:"price",
   title:"價(jià)格",
   align: "center"
  },{
   field:"publishDate",
   title:"發(fā)布時(shí)間",
   align: "center",
   formatter: function(v){
     var date = new Date(v).format("yyyy-MM-dd hh:mm:ss");
     return "<span>"+date+"</span>";
   }
  },{
   field:"shortcutOperation",
   title:"快捷操作",
   align: "center",
   formatter: function(v,r,i){
    var str = "<div class='btn-group'>"+
       "<button id="+r.modelId+" class='btn btn-success btn-xs' onclick='applyReason(\""+r.modelId+"\")'>申請(qǐng)權(quán)限</button>"+
       "</div>"
    if(r.status=='00'){
     var str = "<div class='btn-group'>"+
        "<button class='btn btn-success btn-xs' style='background:#ccc;border-color:#ccc;' >已申請(qǐng)</button>"+
        "</div>"
    }
    return str;
   }
  }]
 });

//傳遞參數(shù)到后臺(tái)
function getPageMessage(params){
 var temp={
  limit: params.limit,
  offset: params.offset,
  modelName:$("#model_name").val(),
  typeId:$("#modelType").val()
 };
 return temp;
}

　這里說(shuō)明幾個(gè)問(wèn)題：

　　1）這里加入這部分（ bootstrapTable("destroy") ）的目的是頁(yè)面存在刷新效果需要重新加載

　　2）相對(duì)應(yīng)的設(shè)置參考官方文檔：http://bootstrap-table.wenzhixin.net.cn/documentation/

　　3）后面簡(jiǎn)單說(shuō)一下具體的效果設(shè)置：在具體的單元格數(shù)據(jù)中可以使用formatter()方法來(lái)實(shí)現(xiàn)，其中存在3個(gè)值v,r,i分別是值，行數(shù)據(jù)，角標(biāo)。具體的效果可以參考著bootstrap的方式來(lái)實(shí)現(xiàn)通過(guò)return的方式來(lái)給頁(yè)面呈現(xiàn)不一樣的效果，當(dāng)然也可以設(shè)置直接設(shè)置效果通過(guò)cellStyle方法也是可以的！

　　4）傳參：這個(gè)根據(jù)個(gè)人的一個(gè)實(shí)現(xiàn)功能來(lái)做，不管有沒(méi)有數(shù)據(jù)，后臺(tái)傳過(guò)去的不是null而是""。limit和offset是做分頁(yè)處理需要傳給后臺(tái)　

4、然后就是后臺(tái)的一個(gè)處理（很重要）

@RequestMapping("/getPublishModel")
 @ResponseBody
 public Map<String, Object> getModelPublishList(Integer limit,Integer offset,String modelName,String typeId,HttpServletResponse response) throws IOException{
  //設(shè)置相應(yīng)數(shù)據(jù)格式
  response.setContentType("application/json;charset=utf-8");
  try {
   // 獲取相應(yīng)數(shù)據(jù)
   Map<String, Object> modelList = modelManager
     .getModelPublishListData(limit, offset, modelName,typeId);
   return modelList;
  } catch (Exception e) {
   e.printStackTrace();
   throw e;
  } finally {
   HibernateSessionFactory.closeSession();
  }
 }

　　說(shuō)明：

　　1）數(shù)據(jù)返回的形式：

Map<String, Object> map = new HashMap<String,Object>();
map.put("total", "分頁(yè)時(shí)采用的數(shù)據(jù)總條數(shù)");//這里可以單獨(dú)寫一個(gè)sql來(lái)實(shí)現(xiàn)總條數(shù)
map.put("rows", "數(shù)據(jù)的list集合");//這里可以獲取相對(duì)應(yīng)的數(shù)據(jù)

注意：因?yàn)榍芭_(tái)和字段名字要對(duì)應(yīng)所以，list的泛型可以是對(duì)象的形式，也可以是Map<String, Object>的形式

List list = querySql.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();//這是我用hibernate執(zhí)行的map結(jié)果會(huì)自動(dòng)封裝成Map

sql里面一定要設(shè)置別名，比如：m.modelId AS modelId等

　　2）返回的時(shí)候通過(guò)json的方式放回，這里不建議springmvc自動(dòng)返回，建議通過(guò)PrintWriter的方式寫出到前臺(tái)，不然會(huì)出現(xiàn)json方面的錯(cuò)誤。

5、展示效果

提示：搜索功能需要自己做，傳入的參數(shù)也是通過(guò)上面的傳入

6.問(wèn)題：因?yàn)榭紤]到接送的傳輸問(wèn)題，在bootstrap-table里面存在post請(qǐng)求的問(wèn)題，這也是我一直沒(méi)有解決的問(wèn)題！

　　1）因?yàn)閎ootstrap-table對(duì)post請(qǐng)求進(jìn)行了封裝，在使用post請(qǐng)求的時(shí)候取不到數(shù)據(jù)（我也在研究這個(gè)問(wèn)題，希望高人指點(diǎn)）

　　2）后臺(tái)數(shù)據(jù)封裝的字段名問(wèn)題，必須要一樣才可以，不用別名返回的是字段名1234。。這個(gè)是因?yàn)閔ibernate造成的，其他框架略過(guò)

您可能感興趣的文章:

相關(guān)文章

JS字節(jié)數(shù)組轉(zhuǎn)數(shù)字及數(shù)字轉(zhuǎn)字節(jié)數(shù)組的方法
本文將深入解析長(zhǎng)整數(shù)與字節(jié)數(shù)組互轉(zhuǎn)的技術(shù)原理,提供ES6（現(xiàn)代瀏覽器/Node.js）與ES5（兼容舊環(huán)境）兩套實(shí)現(xiàn)方案,感興趣的朋友一起看看吧
2025-04-04
淺述節(jié)點(diǎn)的創(chuàng)建及常見(jiàn)功能的實(shí)現(xiàn)
本文主要對(duì)節(jié)點(diǎn)的創(chuàng)建及常見(jiàn)功能的實(shí)現(xiàn)方法進(jìn)行介紹，希望會(huì)對(duì)大家學(xué)習(xí)javascript有所幫助，下面就跟小編一起來(lái)看下吧
2016-12-12
javascript學(xué)習(xí)筆記--數(shù)字格式類型
很多人也許只知道 123，123.456，0xff 之類的數(shù)字格式。其實(shí) js 格式還有很多數(shù)字格式類型，比如 1., .1 這樣的，也有 .1e2 這樣的。
2014-05-05
js仿微信搶紅包功能
這篇文章主要為大家詳細(xì)介紹了js仿微信搶紅包功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
JavaScript實(shí)現(xiàn)多球運(yùn)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)多球運(yùn)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
JavaScript中call和apply的用法、區(qū)別及應(yīng)用場(chǎng)景
這篇文章主要介紹了JavaScript中的call和apply方法,它們都用于改變函數(shù)執(zhí)行時(shí)的this指向,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-03-03
這篇文章主要給大家介紹了關(guān)于JSONPath使用指南和實(shí)用技巧的相關(guān)資料,JsonPath,類似于XPath在XML中的作用,其提供了對(duì)格式Json數(shù)據(jù)的解析能力,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08