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、頁面的編寫方式（建議）
<div class="table"> <table id="publish_model"></table> </div>
3、具體的數(shù)據(jù)加載和處理都在js里面完成，具體的實現(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:"價格",
align: "center"
},{
field:"publishDate",
title:"發(fā)布時間",
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+"\")'>申請權(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;' >已申請</button>"+
"</div>"
}
return str;
}
}]
});
//傳遞參數(shù)到后臺
function getPageMessage(params){
var temp={
limit: params.limit,
offset: params.offset,
modelName:$("#model_name").val(),
typeId:$("#modelType").val()
};
return temp;
}
這里說明幾個問題：
1）這里加入這部分（ bootstrapTable("destroy") ）的目的是頁面存在刷新效果需要重新加載
2）相對應(yīng)的設(shè)置參考官方文檔：http://bootstrap-table.wenzhixin.net.cn/documentation/
3）后面簡單說一下具體的效果設(shè)置：在具體的單元格數(shù)據(jù)中可以使用formatter()方法來實現(xiàn)，其中存在3個值v,r,i分別是值，行數(shù)據(jù)，角標(biāo)。具體的效果可以參考著bootstrap的方式來實現(xiàn)通過return的方式來給頁面呈現(xiàn)不一樣的效果，當(dāng)然也可以設(shè)置直接設(shè)置效果通過cellStyle方法也是可以的！
4）傳參：這個根據(jù)個人的一個實現(xiàn)功能來做，不管有沒有數(shù)據(jù)，后臺傳過去的不是null而是""。limit和offset是做分頁處理需要傳給后臺
4、然后就是后臺的一個處理（很重要）
@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ù)據(jù)總條數(shù)");//這里可以單獨寫一個sql來實現(xiàn)總條數(shù)
map.put("rows", "數(shù)據(jù)的list集合");//這里可以獲取相對應(yīng)的數(shù)據(jù)
注意：因為前臺和字段名字要對應(yīng)所以，list的泛型可以是對象的形式，也可以是Map<String, Object>的形式
List list = querySql.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();//這是我用hibernate執(zhí)行的map結(jié)果會自動封裝成Map
sql里面一定要設(shè)置別名，比如：m.modelId AS modelId等
2）返回的時候通過json的方式放回，這里不建議springmvc自動返回，建議通過PrintWriter的方式寫出到前臺，不然會出現(xiàn)json方面的錯誤。
5、展示效果
提示：搜索功能需要自己做，傳入的參數(shù)也是通過上面的傳入
6.問題：因為考慮到接送的傳輸問題，在bootstrap-table里面存在post請求的問題，這也是我一直沒有解決的問題！
1）因為bootstrap-table對post請求進行了封裝，在使用post請求的時候取不到數(shù)據(jù)（我也在研究這個問題，希望高人指點）
2）后臺數(shù)據(jù)封裝的字段名問題，必須要一樣才可以，不用別名返回的是字段名1234。。這個是因為hibernate造成的，其他框架略過
相關(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)境）兩套實現(xiàn)方案,感興趣的朋友一起看看吧2025-04-04
淺述節(jié)點的創(chuàng)建及常見功能的實現(xiàn)
本文主要對節(jié)點的創(chuàng)建及常見功能的實現(xiàn)方法進行介紹，希望會對大家學(xué)習(xí)javascript有所幫助，下面就跟小編一起來看下吧2016-12-12
javascript學(xué)習(xí)筆記--數(shù)字格式類型
很多人也許只知道 123，123.456，0xff 之類的數(shù)字格式。 其實 js 格式還有很多數(shù)字格式類型，比如 1., .1 這樣的，也有 .1e2 這樣的。2014-05-05
這篇文章主要為大家詳細(xì)介紹了js仿微信搶紅包功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)多球運動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript中call和apply的用法、區(qū)別及應(yīng)用場景
這篇文章主要介紹了JavaScript中的call和apply方法,它們都用于改變函數(shù)執(zhí)行時的this指向,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
談?wù)別ncodeURI和encodeURIComponent以及escape的區(qū)別與應(yīng)用