欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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使用整理(五)之分頁組合查詢 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è)置列為多選框,特別說明:設(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; 
} 

以上所述是小編給大家介紹的Bootstrap Table使用整理(三),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • JS+CSS實(shí)現(xiàn)六級(jí)網(wǎng)站導(dǎo)航主菜單效果

    JS+CSS實(shí)現(xiàn)六級(jí)網(wǎng)站導(dǎo)航主菜單效果

    這篇文章主要介紹了JS+CSS實(shí)現(xiàn)六級(jí)網(wǎng)站導(dǎo)航主菜單效果,涉及JavaScript遍歷頁面元素及動(dòng)態(tài)修改css屬性的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-09-09
  • JS獲取鼠標(biāo)坐標(biāo)位置實(shí)例分析

    JS獲取鼠標(biāo)坐標(biāo)位置實(shí)例分析

    這篇文章主要介紹了JS獲取鼠標(biāo)坐標(biāo)位置的方法,結(jié)合實(shí)例形式分析了JavaScript常見的獲取鼠標(biāo)頁面、屏幕等坐標(biāo)位置的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2016-01-01
  • 原生JS生成指定位數(shù)的驗(yàn)證碼

    原生JS生成指定位數(shù)的驗(yàn)證碼

    這篇文章主要為大家詳細(xì)介紹了原生JS生成指定位數(shù)的驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-10-10
  • js 遞歸和定時(shí)器的實(shí)例解析

    js 遞歸和定時(shí)器的實(shí)例解析

    本文主要介紹了js遞歸和定時(shí)器的相關(guān)知識(shí)。具有很好的參考價(jià)值,下面跟著小編一起來看下吧
    2017-02-02
  • Bootstrap頁面縮小變形的快速解決辦法

    Bootstrap頁面縮小變形的快速解決辦法

    bootstrap布局是應(yīng)用得很廣泛的一種網(wǎng)頁布局方法,下面通過本文給大家介紹bootstrap頁面縮小變形的快速解決辦法,需要的朋友參考下吧
    2017-02-02
  • js實(shí)現(xiàn)四舍五入完全保留兩位小數(shù)的方法

    js實(shí)現(xiàn)四舍五入完全保留兩位小數(shù)的方法

    這篇文章主要介紹了js實(shí)現(xiàn)四舍五入完全保留兩位小數(shù)的方法,涉及javascript針對(duì)浮點(diǎn)數(shù)的數(shù)值運(yùn)算相關(guān)技巧,需要的朋友可以參考下
    2016-08-08
  • 嘗試動(dòng)手制作javascript放大鏡效果

    嘗試動(dòng)手制作javascript放大鏡效果

    這篇文章主要介紹了javascript放大鏡效果,照著別人的例子,自己試著做了個(gè)放大鏡效果,感興趣的小伙伴們可以參考一下
    2015-12-12
  • 詳談JavaScript的閉包及應(yīng)用

    詳談JavaScript的閉包及應(yīng)用

    本文主要介紹了JavaScript的閉包及應(yīng)用。具有一定的參考價(jià)值,下面跟著小編一起來看下吧
    2017-01-01
  • JS前端基于canvas給圖片添加水印

    JS前端基于canvas給圖片添加水印

    這篇文章主要介紹了JS前端基于canvas給圖片添加水印,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-11-11
  • JavaScript數(shù)組中reduce方法的應(yīng)用詳解

    JavaScript數(shù)組中reduce方法的應(yīng)用詳解

    JavaScript 中的reduce()方法可以用于將數(shù)組元素匯總為單個(gè)值,,所以本文為大家整理了一些JavaScript數(shù)組中reduce方法的應(yīng)用,需要的可以參考一下
    2023-07-07

最新評(píng)論