Bootstrap Table (3), bootstraptable

Bootstrap Table (3), bootstraptable

Related reading:

Bootstrap Table use organization (1) http://www.bkjia.com/article/115789.htm

Bootstrap Table use organization (2) http://www.bkjia.com/article/115791.htm

Bootstrap Table use organization (4) toolbar http://www.bkjia.com/article/115798.htm

Bootstrap Table query http://www.bkjia.com/article/115785.htm using a composite paging (5)

1. cell content formatting

/** Data-formatter extension processes cell content */$ ('# table1 '). bootstrapTable ({columns: [{field: 'sno', title: 'number', formatter: function (value, row, index) {// return index + 1; return '<span class = "badge">' + (index + 1) + '</span>' ;},{ field: 'sno', title: 'Student number', formatter: function (value) {return '<a href = "#" rel = "external nofollow">' + value + '</a>' ;},{ field: 'sname', title: 'Student name'}, {field: 'ssex, title: Gender, formatter: function (value) {return '<I class = "glyphicon-star"> </I>' + value ;},{ field: 'sbirthday', title: 'birthday '}, {field: 'class', title: 'Course number'},], url: '@ Url. action ("GetStudent", "DataOne") '}); <table id = "table1" data-classes = "table-hover table-condensed"> </table>

Ii. Column Display Control, CardView panel display

/** Data-show-columns: Set whether to enable the display column, the default value is false * data-switchable. Set whether to participate in display hiding * data-visible. Set whether to display * data-height. Set the fixed table height * data-card-view. Set the table display mode. whether it is card view */var $ table =$ ('# table1 '). bootstrapTable ({columns: [{field: 'sno', title: 'student number', switchable: false}, {field: 'sname', title: 'student name '}, {field: 'ssex, title: 'gender '}, {field: 'sbirthday', title: 'birthday'}, {field: 'class', title: 'Course number', visible: false},], url: '@ Url. action ("GetStudent", "DataOne ")'}); <table id = "table1" data-classes = "table-hover" data-show-columns = "true" data-height = "300" data-card-view =" true "> </table>

Iii. Single-choice processing-radio

/** Data-click-to-select: Set whether the row is clicked. * data-select-item-name: set the value of the selected item. * whether the data-radio setting column is displayed as a single radio * click-row.bs.table bind row Click Event * getData get the row data object of the specified Index */var $ table = $ ('# table1 '). bootstrapTable ({columns: [{field: 'sno', title: 'student number', radio: true}, {field: 'sname', title: 'student name '}, {field: 'ssex, title: 'gender '}, {field: 'sbirthday', title: 'birthday'}, {field: 'class', title: 'Course number'},], url: '@ Url. action ("GetStudent", "DataOne") '}); $ table. on ('click-row. bs. table ', function (e, row, $ element) {$ ('. success '). removeClass ('success '); $ ($ element ). addClass ('success ') ;}); $ (' # btn1 '). click (function () {// obtain the var index of the selected ROW = $ table. find ('tr. success '). data ('index'); // obtain the selected row data object var result = $ table. bootstrapTable ('getdata') [index]; console.info (result); alert (result. sname );}); <button class = "btn-primary" id = "btn1"> obtain the table selection result </button> <table id = "table1" data-classes = "table-hover "data-show-columns =" true "data-click-to-select =" true "data-select-item-name =" sno "> </table>

4. Multi-choice processing-checkbox

/** Data-click-to-select: Set whether to select the * data-checkbox setting column for row clicking. In particular, fields cannot be bound to columns set to checkbox, otherwise, it is all selected. * The diabled attribute of the returned object in formatter controls whether to disable the multi-choice box, And the checked attribute controls whether the object is currently selected */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} lele.info (value ); return value ;},{ field: 'sno', title: 'student number' },{ field: 'sname', title: 'student name'}, {field: 'ssex, title: 'gender'}, {field: 'sbirthday', title: 'birthday'}, {field: 'class', title: 'Course number'},], url: '@ Url. action ("GetStudent", "DataOne") '}); $ table. on ('click-row. bs. table ', function (e, row, $ element) {$ ('. success '). removeClass ('success '); $ ($ element ). addClass ('success ') ;}); $ (' # btn1 '). click (function () {// obtain the row of the selected result and return the array. // The returned result contains the multi-choice box Field state = true var result = $ table. bootstrapTable ('getselection'); 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-primary" id = "btn1"> obtain the table selection result </button> <table id = "table1" data-classes = "table-hover "data-show-columns =" true "data-click-to-select =" true "> </table>

5. multiple-choice box single-choice mode

<Button class = "btn-primary" id = "btn1"> obtain the table selection result </button> <table id = "table1" data-classes = "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"> selection box </th> <th data-field = "sno"> NO. </th> <th data-field = "sname"> name </th> <th data-field = "ssex"> gender </th> <th data-field = "sbirthday"> birthday </th> <th data-field = "class"> course No. </th> </tr> </thead> </table>/** data-click -to-select: select whether to select * data-checkbox setting column multiple selection box * Whether to disable multiple selection boxes by controlling the diabled attribute of the returned object in data-formatter, the checked attribute controls whether the selected * data-single-select specifies the single-choice mode. Even if multiple-choice boxes are used, the single-choice mode */var $ table = $ ('# table1') is used '). 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 () {// obtain the row of the selected result and return the array. // The returned result contains the multi-choice box Field state = true var result = $ table. bootstrapTable ('getselection'); 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 ;}

The above section describes how to use Bootstrap Table (3). I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!