[Bootstrap]bootstrapTable.js使用教學(二)

承接第一篇,這篇主要說明bootstrapTable.js常用到的方法。

//載入資料
$table.bootstrapTable('load', getRandomData());

//改變Table高度
$table.bootstrapTable('resetView', { height:450 });

//從最前面加資料
$table.bootstrapTable('prepend', getRandomData());

//從最後面加資料
$table.bootstrapTable('append', getRandomData());

//移動到最後面
$table.bootstrapTable('scrollTo', 'bottom');

//移動到top100px處
$table.bootstrapTable('scrollTo', 100);
   
//重新整理畫面
$table.bootstrapTable('resetView');

//取得所有資料
console.table($table.bootstrapTable('getData'));

//直接跳到第5頁
$table.bootstrapTable('selectPage', 5);


//回到前一頁(自行實作換頁按鈕)
$table.bootstrapTable('prevPage');

//到下一頁(自行時做換頁按鈕)
$table.bootstrapTable('nextPage');


//顯示/隱藏欄位
$table.bootstrapTable('hideColumn', 'name');
$table.bootstrapTable('showColumn', 'name');

//顯示/隱藏Loading
$table.bootstrapTable('showLoading');
$table.bootstrapTable('hideLoading');

//顯示/隱藏Row
$table.bootstrapTable('showRow', {index: 1});
$table.bootstrapTable('hideRow', {index: 1});

//表格與名片式呈現切換
$table.bootstrapTable('toggleView');

//增加資料
$table.bootstrapTable('insertRow', {
  index: 10,
  row: {
    id: 'newId',
    name: 'newItem',
    mailAddress: '$1000'
  }
});

//修改資料-方法1
$table.bootstrapTable('updateRow', {
  index: 1,
  row: {
    id: 'id001',
    name: 'updateName',
    mailAddress: '$6666'
  }
});

//修改資料-方法2
$table.bootstrapTable('updateByUniqueId', {
  id: 'id001',
  row: {
    name: 'updateName',
    mailAddress: '$$6666'
  }
});