BootStrap Table對(duì)前臺(tái)頁面表格的支持實(shí)例講解
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、頁面的編寫方式（建議）
<div class="table"> <table id="publish_model"></table> </div>
3、具體的數(shù)據(jù)加載和處理都在js里面完成，具體的實(shí)現(xiàn)過程不用自己去寫，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;
}
這里說明幾個(gè)問題：
1）這里加入這部分（ bootstrapTable("destroy") ）的目的是頁面存在刷新效果需要重新加載
2）相對(duì)應(yīng)的設(shè)置參考官方文檔：http://bootstrap-table.wenzhixin.net.cn/documentation/
3）后面簡(jiǎn)單說一下具體的效果設(shè)置：在具體的單元格數(shù)據(jù)中可以使用formatter()方法來實(shí)現(xiàn)，其中存在3個(gè)值v,r,i分別是值，行數(shù)據(jù)，角標(biāo)。具體的效果可以參考著bootstrap的方式來實(shí)現(xiàn)通過return的方式來給頁面呈現(xiàn)不一樣的效果，當(dāng)然也可以設(shè)置直接設(shè)置效果通過cellStyle方法也是可以的！
4）傳參：這個(gè)根據(jù)個(gè)人的一個(gè)實(shí)現(xiàn)功能來做，不管有沒有數(shù)據(jù)，后臺(tái)傳過去的不是null而是""。limit和offset是做分頁處理需要傳給后臺(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();
}
}
說明：
1）數(shù)據(jù)返回的形式：
Map<String, Object> map = new HashMap<String,Object>();
map.put("total", "分頁時(shí)采用的數(shù)據(jù)總條數(shù)");//這里可以單獨(dú)寫一個(gè)sql來實(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í)候通過json的方式放回，這里不建議springmvc自動(dòng)返回，建議通過PrintWriter的方式寫出到前臺(tái)，不然會(huì)出現(xiàn)json方面的錯(cuò)誤。
5、展示效果
提示：搜索功能需要自己做，傳入的參數(shù)也是通過上面的傳入
6.問題：因?yàn)榭紤]到接送的傳輸問題，在bootstrap-table里面存在post請(qǐng)求的問題，這也是我一直沒有解決的問題！
1）因?yàn)閎ootstrap-table對(duì)post請(qǐng)求進(jìn)行了封裝，在使用post請(qǐng)求的時(shí)候取不到數(shù)據(jù)（我也在研究這個(gè)問題，希望高人指點(diǎn)）
2）后臺(tái)數(shù)據(jù)封裝的字段名問題，必須要一樣才可以，不用別名返回的是字段名1234。。這個(gè)是因?yàn)閔ibernate造成的，其他框架略過
- 教大家輕松制作Bootstrap漂亮表格（table）
- Bootstrap Table表格一直加載(load)不了數(shù)據(jù)的快速解決方法
- JS表格組件BootstrapTable行內(nèi)編輯解決方案x-editable
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- 值得分享的輕量級(jí)Bootstrap Table表格插件
- JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
- JS組件Bootstrap Table表格多行拖拽效果實(shí)現(xiàn)代碼
- JS組件Bootstrap Table表格行拖拽效果實(shí)現(xiàn)代碼
相關(guān)文章
JS字節(jié)數(shù)組轉(zhuǎn)數(shù)字及數(shù)字轉(zhuǎn)字節(jié)數(shù)組的方法
本文將深入解析長整數(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)建及常見功能的實(shí)現(xiàn)
本文主要對(duì)節(jié)點(diǎn)的創(chuàng)建及常見功能的實(shí)現(xiàn)方法進(jìn)行介紹，希望會(huì)對(duì)大家學(xué)習(xí)javascript有所幫助，下面就跟小編一起來看下吧2016-12-12
javascript學(xué)習(xí)筆記--數(shù)字格式類型
很多人也許只知道 123，123.456，0xff 之類的數(shù)字格式。 其實(shí) js 格式還有很多數(shù)字格式類型，比如 1., .1 這樣的，也有 .1e2 這樣的。2014-05-05
這篇文章主要為大家詳細(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指向,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03JSONPath使用指南和實(shí)用技巧（掌握J(rèn)SON數(shù)據(jù)提?。?/a>
這篇文章主要給大家介紹了關(guān)于JSONPath使用指南和實(shí)用技巧的相關(guān)資料,JsonPath,類似于XPath在XML中的作用,其提供了對(duì)格式Json數(shù)據(jù)的解析能力,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
為了提高網(wǎng)站的加載速度，有一個(gè)很重要的手段就是在用戶瀏覽過程中的上游網(wǎng)站做一個(gè)文件的預(yù)加載。2010-04-04
JS+CSS實(shí)現(xiàn)仿支付寶菜單選中效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿支付寶菜單選中效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)設(shè)置頁面css樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
談?wù)別ncodeURI和encodeURIComponent以及escape的區(qū)別與應(yīng)用
encodeURI和encodeURIComponent以及escape，這三個(gè)都是用來編碼的，本篇文章給大家介紹encodeURI和encodeURIComponent以及escape的區(qū)別與應(yīng)用，感興趣的朋友一起學(xué)習(xí)吧2015-11-11