相關(guān)閱讀:
Bootstrap Table使用整理(一) //m.survivalescaperooms.com/article/115789.htm
Bootstrap Table使用整理(二) //m.survivalescaperooms.com/article/115791.htm
Bootstrap Table使用整理(三) //m.survivalescaperooms.com/article/115795.htm
Bootstrap Table使用整理(五)之分頁(yè)組合查詢 //m.survivalescaperooms.com/article/115785.htm
一、啟用默認(rèn)支持的工具欄
/* * data-search 是否顯示搜索框 * data-show-refresh 是否像是刷新按鈕,注:刷新操作會(huì)重新請(qǐng)求數(shù)據(jù),并帶著請(qǐng)求參數(shù) * data-show-toggle 是否顯示面板切換按鈕 * data-show-columns 是否顯示列控制按鈕 */ $('#table1').bootstrapTable({ columns: [ { 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 id="table1" data-classes="table table-hover " data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true"></table> 
二、擴(kuò)展工具欄使用
/* * data-toolbar 用于指定id的div擴(kuò)展工具欄,這種方式類似EaseUI中的datagird * queryParams 請(qǐng)求服務(wù)器數(shù)據(jù)時(shí),你可以通過重寫參數(shù)的方式添加一些額外的參數(shù),例如 toolbar 中的參數(shù) 如果 queryParamsType = 'limit' ,返回參數(shù)必須包含 limit, offset, search, sort, order 否則, 需要包含: pageSize, pageNumber, searchText, sortName, sortOrder. 返回false將會(huì)終止請(qǐng)求 */ var $table1= $('#table1').bootstrapTable({ columns: [ { 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")', queryParams: function (params) { params.name = '張三豐'; //特別說(shuō)明,返回的參數(shù)的值為空,則當(dāng)前參數(shù)不會(huì)發(fā)送到服務(wù)器端 params.sex = $('input[name="sex"]:checked').val(); return params; } }); //刷新方法 $('#heartBtn').click(function () { ////刷新處理,指定query 的參數(shù),注:此地方指定的參數(shù),僅在當(dāng)次刷新時(shí)使用 //$table1.bootstrapTable('refresh', { // query: { // name: '張三' // } //}); $table1.bootstrapTable('refresh'); }); <table id="table1" data-classes="table table-hover " data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-toolbar="#toolbar"></table> <div id="toolbar"> <div class="btn-group"> <button class="btn btn-default"> <i class="glyphicon glyphicon-plus"></i> </button> <button class="btn btn-default"> <i class="glyphicon glyphicon-heart" id="heartBtn"></i> </button> <button class="btn btn-default"> <i class="glyphicon glyphicon-trash"></i> </button> </div> <div class="form-group"> <label class="control-label">性別:</label> <label class="radio-inline"> <input type="radio" name="sex" value="男" /> 男 </label> <label class="radio-inline"> <input type="radio" name="sex" value="女" /> 女 </label> </div> </div> 
以上所述是小編給大家介紹的Bootstrap Table使用整理(四)之工具欄,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注