本節主要介紹Bootstrap的後台資料綁定、特殊列處理及列的排序功能，程式碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
本節主要介紹Bootstrap的後台資料綁定、特殊列處理及列的排序功能
1.資料綁定
一般做程式設計，很少是使用json檔案直接綁定資料。基本上我們都是使用程式語言進行資料獲取，並做資料綁定。
放置一個Table控制項
<table id="table" ></table>
呼叫javascript的程式碼
<script >
$('#table').bootstrapTable({
url: 'tablejson.jsp', //数据绑定，后台的数据从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.特殊列處理
在實際應用中，我們需要增加我們的特殊列，例如是操作列，看下列的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的程式碼修改為
作者最新文章
-
2023-03-15 16:54:01
-
2023-03-15 12:26:02
-
2023-03-14 18:58:01
-
2023-03-14 11:30:01
-
1970-01-01 08:00:00
-
2023-03-16 15:20:01
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
最新問題
Bootstrap Vue 複選框 <b-table> <b-form-checkbox>
我正在嘗試將b-form-checkbox與b-table一起使用。嘗試檢索選定的模組ID。 <b-tableid="module-table":item...
來自於 2024-03-31 18:36:11
0
1
389
