Bootstrap Table使用整理（三）

更新時(shí)間：2017年06月09日 10:14:34 作者：天馬3798

這篇文章主要介紹了Bootstrap Table使用整理（三）的相關(guān)資料,需要的朋友可以參考下

相關(guān)閱讀：

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

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

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

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

一、單元格內(nèi)容格式化

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

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

/* 
* data-show-columns 設(shè)置是否開啟顯示列,默認(rèn)為false 
* data-switchable 設(shè)置是否參與顯示隱藏 
* data-visible 設(shè)置默認(rèn)是否顯示 
* data-height 設(shè)置table表格固定高度 
* data-card-view 設(shè)置table 的顯示方式是否是card view 
*/ 
var $table= $('#table1').bootstrapTable({ 
 columns: [ 
  { field: 'sno', title: '學(xué)生編號(hào)', switchable: false }, 
  { field: 'sname', title: '學(xué)生姓名' }, 
  { field: 'ssex', title: '性別' }, 
  { field: 'sbirthday', title: '生日' }, 
  { field: 'class', title: '課程編號(hào)', 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 設(shè)置行點(diǎn)擊是否選中 
* data-select-item-name 設(shè)置選中項(xiàng)的值 
* data-radio 設(shè)置列是否顯示為radio單選框 
* click-row.bs.table 綁定行點(diǎn)擊事件 
* getData 獲取指定索引的行數(shù)據(jù)對(duì)象 
*/ 
var $table= $('#table1').bootstrapTable({ 
 columns: [ 
  { field: 'sno', title: '學(xué)生編號(hào)' ,radio:true}, 
  { field: 'sname', title: '學(xué)生姓名' }, 
  { field: 'ssex', title: '性別' }, 
  { field: 'sbirthday', title: '生日' }, 
  { field: 'class', title: '課程編號(hào)' }, 
 ], 
 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'); 
 //獲取選中行數(shù)據(jù)對(duì)象 
 var result = $table.bootstrapTable('getData')[index]; 
 console.info(result); 
 alert(result.sname); 
}); 
<button class="btn btn-primary" id="btn1">獲取表格選中結(jié)果</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 設(shè)置行點(diǎn)擊是否選中 
* data-checkbox 設(shè)置列為多選框，特別說(shuō)明：設(shè)置為checkbox的列不能綁定字段，否則全為選中狀態(tài) 
* formatter 中返回對(duì)象的diabled屬性控制是否禁用多選框，checked屬性控制當(dāng)前是否被選中 
*/ 
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: '學(xué)生編號(hào)' 
  }, 
  { field: 'sname', title: '學(xué)生姓名' }, 
  { field: 'ssex', title: '性別' }, 
  { field: 'sbirthday', title: '生日' }, 
  { field: 'class', title: '課程編號(hào)' }, 
 ], 
 url:'@Url.Action("GetStudent","DataOne")' 
}); 
$table.on('click-row.bs.table', function (e, row, $element) { 
 $('.success').removeClass('success'); 
 $($element).addClass('success'); 
}); 
$('#btn1').click(function () { 
 //獲取選中結(jié)果行,返回?cái)?shù)組 
 //返回結(jié)果中包括多選框字段 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">獲取表格選中結(jié)果</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">獲取表格選中結(jié)果</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" >編號(hào)</th> 
   <th data-field="sname">姓名</th> 
   <th data-field="ssex">性別</th> 
   <th data-field="sbirthday">生日</th> 
   <th data-field="class">課程編號(hào)</th> 
  </tr> 
 </thead> 
</table> 
/** data-click-to-select 設(shè)置行點(diǎn)擊是否選中 
* data-checkbox 設(shè)置列為多選框 
* data-formatter 中返回對(duì)象的diabled屬性控制是否禁用多選框，checked屬性控制當(dāng)前是否被選中 
* 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 () { 
 //獲取選中結(jié)果行,返回?cái)?shù)組 
 //返回結(jié)果中包括多選框字段 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; 
}