Bootstrap Table使用整理(三)
相關(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)航主菜單效果,涉及JavaScript遍歷頁面元素及動(dòng)態(tài)修改css屬性的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JS獲取鼠標(biāo)坐標(biāo)位置實(shí)例分析
這篇文章主要介紹了JS獲取鼠標(biāo)坐標(biāo)位置的方法,結(jié)合實(shí)例形式分析了JavaScript常見的獲取鼠標(biāo)頁面、屏幕等坐標(biāo)位置的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-01-01js實(shí)現(xiàn)四舍五入完全保留兩位小數(shù)的方法
這篇文章主要介紹了js實(shí)現(xiàn)四舍五入完全保留兩位小數(shù)的方法,涉及javascript針對(duì)浮點(diǎn)數(shù)的數(shù)值運(yùn)算相關(guān)技巧,需要的朋友可以參考下2016-08-08JavaScript數(shù)組中reduce方法的應(yīng)用詳解
JavaScript 中的reduce()方法可以用于將數(shù)組元素匯總為單個(gè)值,,所以本文為大家整理了一些JavaScript數(shù)組中reduce方法的應(yīng)用,需要的可以參考一下2023-07-07