Bootstrap Table使用整理（三），bootstraptable

Bootstrap Table使用整理（三），bootstraptable

相關閱讀：

Bootstrap Table使用整理(一) http://www.bkjia.com/article/115789.htm 

Bootstrap Table使用整理(二)  http://www.bkjia.com/article/115791.htm

Bootstrap Table使用整理（四）之工具列 http://www.bkjia.com/article/115798.htm

Bootstrap Table使用整理(五)之分頁組合查詢 http://www.bkjia.com/article/115785.htm 

一、儲存格內容格式化

/* * data-formatter 擴充處理儲存格內容 */ $('#table1').bootstrapTable({  columns: [   {    field: 'sno', title: '編號', formatter: function (value, row, index) {     //return index + 1;     return '<span class="badge">'+(index+1)+'</span>';    }   },   {    field: 'sno', title: '學生編號', formatter: function (value) {     return '<a href="#" rel="external nofollow" >'+ value + '</a>';    }   },   { field: 'sname', title: '學生姓名' },   {    field: 'ssex', title: '性別', formatter: function (value) {     return '<i class="glyphicon glyphicon-star"></i>' + value;    }   },   { field: 'sbirthday', title: '生日' },   { field: 'class', title: '課程編號' },  ],  url:'@Url.Action("GetStudent","DataOne")' }); <table id="table1"   data-classes="table table-hover table-condensed"></table> 

二、列顯示控制，CardView面板顯示

/* * data-show-columns 設定是否開啟顯示列,預設為false * data-switchable 設定是否參與顯示隱藏 * data-visible 設定預設是否顯示 * data-height 設定table表格固定高度 * data-card-view 設定table 的顯示方式是否是card view */ var $table= $('#table1').bootstrapTable({  columns: [   { field: 'sno', title: '學生編號', switchable: false },   { field: 'sname', title: '學生姓名' },   { field: 'ssex', title: '性別' },   { field: 'sbirthday', title: '生日' },   { field: 'class', title: '課程編號', visible:false },  ],  url:'@Url.Action("GetStudent","DataOne")' }); <table id="table1"   data-classes="table table-hover"   data-show-columns="true"   data-height="300"   data-card-view="true"></table> 

三、單選處理 -radio

/* * data-click-to-select 設定行點擊是否選中 * data-select-item-name 設定選中項的值 * data-radio 設定列是否顯示為radio單選框 * click-row.bs.table 綁定行點擊事件 * getData 擷取指定索引的行資料對象 */ var $table= $('#table1').bootstrapTable({  columns: [   { field: 'sno', title: '學生編號' ,radio:true},   { field: 'sname', title: '學生姓名' },   { field: 'ssex', title: '性別' },   { field: 'sbirthday', title: '生日' },   { field: 'class', title: '課程編號' },  ],  url:'@Url.Action("GetStudent","DataOne")' }); $table.on('click-row.bs.table', function (e, row, $element) {  $('.success').removeClass('success');  $($element).addClass('success'); }); $('#btn1').click(function () {  //擷取選中行索引  var index = $table.find('tr.success').data('index');  //擷取選中行資料對象  var result = $table.bootstrapTable('getData')[index];  console.info(result);  alert(result.sname); }); <button class="btn btn-primary" id="btn1">擷取表格選中結果</button> <table id="table1"   data-classes="table table-hover"   data-show-columns="true"   data-click-to-select="true"   data-select-item-name="sno"></table> 

四、多選處理-checkbox

/* * data-click-to-select 設定行點擊是否選中 * data-checkbox 設定列為多選框，特別說明：設定為checkbox的列不能綁定欄位，否則全為選中狀態 * formatter 中返回對象的diabled屬性控制是否禁用多選框，checked屬性控制當前是否被選中 */ var $table= $('#table1').bootstrapTable({  columns: [   {    fileid: 'state', checkbox: true, formatter: function (value, row, index) {     if (index === 2) {      return {       disabled: true,       checked:true      }     }     if (index === 0) {      return {       disabled: true,       checked: true      }     }     console.info(value);     return value;    }   },   {    field: 'sno', title: '學生編號'   },   { field: 'sname', title: '學生姓名' },   { field: 'ssex', title: '性別' },   { field: 'sbirthday', title: '生日' },   { field: 'class', title: '課程編號' },  ],  url:'@Url.Action("GetStudent","DataOne")' }); $table.on('click-row.bs.table', function (e, row, $element) {  $('.success').removeClass('success');  $($element).addClass('success'); }); $('#btn1').click(function () {  //擷取選中結果行,返回數組  //返回結果中包括多選框欄位 state=true  var result = $table.bootstrapTable('getSelections');  console.info(result);  var ids = [];  for (var i = 0; i < result.length; i++) {   var item = result[i];   ids.push(item.sno);  }  alert(ids); }); <button class="btn btn-primary" id="btn1">擷取表格選中結果</button> <table id="table1"   data-classes="table table-hover"   data-show-columns="true"   data-click-to-select="true"   ></table> 

五、多選框單選模式

<button class="btn btn-primary" id="btn1">擷取表格選中結果</button> <table id="table1"   data-classes="table table-hover"   data-show-columns="true"   data-click-to-select="true"   data-single-select="true"   >  <thead>   <tr>    <th data-field="state" data-checkbox="true" data-formatter="checkHandle">選擇框</th>    <th data-field="sno" >編號</th>    <th data-field="sname">姓名</th>    <th data-field="ssex">性別</th>    <th data-field="sbirthday">生日</th>    <th data-field="class">課程編號</th>   </tr>  </thead> </table> /** data-click-to-select 設定行點擊是否選中 * data-checkbox 設定列為多選框 * data-formatter 中返回對象的diabled屬性控制是否禁用多選框，checked屬性控制當前是否被選中 * data-single-select 指定單選模式,即使使用多選框也是單選模式 */ var $table= $('#table1').bootstrapTable({  url:'@Url.Action("GetStudent","DataOne")' }); $table.on('click-row.bs.table', function (e, row, $element) {  $('.success').removeClass('success');  $($element).addClass('success'); }); $('#btn1').click(function () {  //擷取選中結果行,返回數組  //返回結果中包括多選框欄位 state=true  var result = $table.bootstrapTable('getSelections');  console.info(result);  var ids = [];  for (var i = 0; i < result.length; i++) {   var item = result[i];   ids.push(item.sno);  }  alert(ids); }); function checkHandle(value, row, index) {  if (index === 2) {   return {    disabled: true   };  }  if (index === 0) {   return {    disabled: true,    checked: true   }  }  return value; } 

以上所述是小編給大家介紹的Bootstrap Table使用整理（三），希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！