bootstrap table插件的使用

$('#table').bootstrapTable({
url: 'data1.json',
toolbar: '#btn-action',                //工具按鈕用哪個容器
striped:true, //設置爲 true 會有隔行變色效果
pagination:true, //設置爲 true 會在表格底部顯示分頁條
paginationLoop:false, //設置爲 true 啓用分頁條無限循環的功能。無效果
pageSize:10, //如果設置了分頁,頁面數據條數
search:true,  //是否啓用搜索框
// showToggle:true, //是否顯示 切換試圖(table/card)按鈕
showPaginationSwitch:false, //是否顯示 數據條數選擇框。無效果
// checkboxHeader:true, //設置false 將在列頭隱藏check-all checkbox .
uniqueId:"id",
// searchText:"搜索", //初始化搜索文字
selectItemName:"id",
// showHeader:true, //是否顯示列頭
// showFooter:false,//是否顯示列腳
showRefresh:true, //是否顯示 刷新按鈕
showColumns:true,  //是否顯示 內容列下拉框
// sortable: true,      //是否啓用排序
    sortOrder: "asc",     //排序方式
    sortName:"id",   //需要排序的字段
// clickToSelect:false,//設置true 將在點擊行時,自動選擇rediobox 和 checkbox
columns: [{
field: 'id',
title: 'ID',
formatter: function(val) {
return val + 1;
}
}, {
field: 'id',
title: '名稱',
formatter:function(val, row) {
return "<a href='#' οnclick=\"test\(" + val + "," + row.name + "\)\">" + row.name + "</a>";
}
}, {
field: 'price',
title: '價格'
}, ]
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章