BootStrap Table 后臺數(shù)據(jù)綁定、特殊列處理、排序功能
更新時間：2017年05月27日 09:49:45 作者：meetweb
本節(jié)主要介紹Bootstrap的后臺數(shù)據(jù)綁定、特殊列處理及列的排序功能，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
本節(jié)主要介紹Bootstrap的后臺數(shù)據(jù)綁定、特殊列處理及列的排序功能
1.數(shù)據(jù)綁定
一般做程序設(shè)計，很少是使用json文件直接綁定數(shù)據(jù)。基本上我們都是使用編程語言進(jìn)行數(shù)據(jù)獲取，并做數(shù)據(jù)綁定。
放置一個Table控件
<table id="table" ></table>
調(diào)用javascript的代碼
<script >
$('#table').bootstrapTable({
url: 'tablejson.jsp', //數(shù)據(jù)綁定，后臺的數(shù)據(jù)從jsp代碼
search:true,
uniqueId:"Id",
pageSize:"5",
pageNumber:"1",
sidePagination:"client",
pagination:true,
height:'400',
columns: [
{
field: 'Id',
title: '中文'
}, {
field: 'Name',
title: 'Name'
}
, {
field: 'Desc',
title: 'Desc'
}
],
});
2.特殊列處理
在實際應(yīng)用中，我們需要增加我們的特殊列，例如是操作列，看下列的js代碼 增加了一個特殊列
{
field: '#',
title: 'control',formatter:function(value,row,index){
var del='<a href="Delete!delete.action?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >刪除</a>';
var updt='<a href="supdate.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >修改</a>';
var add='<a href="Include.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >增加</a>'
return del+" "+updt+" "+add;
}
}
js的代碼修改為
<script >
$('#table').bootstrapTable({
url: 'tablejson.jsp', //數(shù)據(jù)綁定，后臺的數(shù)據(jù)從jsp代碼
search:true,
uniqueId:"Id",
pageSize:"5",
pageNumber:"1",
sidePagination:"client",
pagination:true,
height:'400',
columns: [
{
field: 'Id',
title: '中文'
}, {
field: 'Name',
title: 'Name'
}
, {
field: 'Desc',
title: 'Desc'
}
,
{
field: '#',
title: 'control',formatter:function(value,row,index){
var del='<a href="Delete!delete.action?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >刪除</a>';
var updt='<a href="supdate.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >修改</a>';
var add='<a href="Include.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >增加</a>'
return del+" "+updt+" "+add;
}
}
], });
3.列的排序，排序主要是在列中增加了一個屬性
{
field: 'Name',
title: 'Name',<br><em id="__mceDel">sortable:true</em>
}
以上所述是小編給大家介紹的BootStrap Table 后臺數(shù)據(jù)綁定、特殊列處理、排序功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
js實現(xiàn)百度聯(lián)盟中一款不錯的圖片切換效果完整實例
這篇文章主要介紹了js實現(xiàn)百度聯(lián)盟中一款不錯的圖片切換效果的方法,以完整實例形式分析了javascript操作圖片切換的技巧,需要的朋友可以參考下2015-03-03
微信內(nèi)置瀏覽器屏蔽了下載鏈接，如果用戶是用微信內(nèi)置瀏覽器打開的，則提示用戶換一個瀏覽器打開頁面，那么該如何判斷用戶是否是用微信瀏覽器呢2014-06-06
JavaScript 保護(hù)變量不被隨意修改的實現(xiàn)代碼
本文通過實例代碼給大家分享JavaScript 保護(hù)變量不被隨意修改的實現(xiàn)方法，需要的朋友參考下吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)字體背景跑馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了Javascript中的基本類型和引用類型的相關(guān)資料,包括基本類型和引用類型的概念及區(qū)別，數(shù)據(jù)類型檢測給大家詳細(xì)介紹了js基本類型和引用類型，非常不錯，需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)懸浮跟隨框緩動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
微信小程序向Java后臺傳輸參數(shù)的方法實現(xiàn)
這篇文章主要介紹了微信小程序向Java后臺傳輸參數(shù)的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
在實際應(yīng)用中，常常需要為拖拽的元素限定范圍。而通過限定范圍，再增加一些輔助的措施，就可以實現(xiàn)磁性吸附的效果。本文將詳細(xì)介紹javascript的磁性吸附，有需要的朋友可以參考借鑒。2016-12-12
JavaScript?中URL?查詢字符串(query?string)的序列與反序列化的方法
在 JavaScript 中，可以使用?URLSearchParams?對象來處理 URL 中的查詢字符串，這篇文章主要介紹了JavaScript?中URL查詢字符串(query?string)的序列與反序列化,需要的朋友可以參考下2023-01-01
Electron是一個用于構(gòu)建跨平臺桌面應(yīng)用程序的框架,它結(jié)合了Node.js和Chromium,本文主要介紹了如何使用Electron實現(xiàn)截圖功能,感興趣的可以了解一下2024-12-12