BootStrap Table 后臺(tái)數(shù)據(jù)綁定、特殊列處理、排序功能
本節(jié)主要介紹Bootstrap的后臺(tái)數(shù)據(jù)綁定、特殊列處理及列的排序功能
1.數(shù)據(jù)綁定
一般做程序設(shè)計(jì),很少是使用json文件直接綁定數(shù)據(jù)?;旧衔覀兌际鞘褂镁幊陶Z(yǔ)言進(jìn)行數(shù)據(jù)獲取,并做數(shù)據(jù)綁定。
放置一個(gè)Table控件
<table id="table" ></table>
調(diào)用javascript的代碼
<script >
$('#table').bootstrapTable({
url: 'tablejson.jsp', //數(shù)據(jù)綁定,后臺(tái)的數(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.特殊列處理
在實(shí)際應(yīng)用中,我們需要增加我們的特殊列,例如是操作列,看下列的js代碼 增加了一個(gè)特殊列
{
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ù)綁定,后臺(tái)的數(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.列的排序,排序主要是在列中增加了一個(gè)屬性
{
field: 'Name',
title: 'Name',<br><em id="__mceDel">sortable:true</em>
}
以上所述是小編給大家介紹的BootStrap Table 后臺(tái)數(shù)據(jù)綁定、特殊列處理、排序功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
js剪切板應(yīng)用clipboardData實(shí)例解析
這篇文章主要為大家詳細(xì)介紹了js剪切板應(yīng)用clipboardData實(shí)例,并分享了四種實(shí)現(xiàn)方法,感興趣的小伙伴們可以參考一下2016-05-05
用Javascript同時(shí)提交多個(gè)Web表單的方法
使用Javascript同時(shí)提交多個(gè)Web表單的方法2009-12-12
js防抖具體實(shí)現(xiàn)以及詳細(xì)原理步驟說明(附實(shí)例)
節(jié)流和防抖這里兩個(gè)詞可能對(duì)一些初入JavaScript的同學(xué)比較陌生,下面這篇文章主要給大家介紹了關(guān)于js防抖具體實(shí)現(xiàn)以及詳細(xì)原理步驟的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
關(guān)于layui導(dǎo)航欄不展示下拉列表的解決方法
今天小編就為大家分享一篇關(guān)于layui導(dǎo)航欄不展示下拉列表的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09
JS HTML5實(shí)現(xiàn)拖拽移動(dòng)列表效果
這篇文章主要為大家詳細(xì)介紹了JS HTML5實(shí)現(xiàn)拖拽移動(dòng)列表效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07

