bootstrap table合并行數(shù)據(jù)并居中對(duì)齊效果
本文實(shí)例為大家分享了bootstrap table合并行數(shù)據(jù)并居中對(duì)齊的具體代碼,供大家參考,具體內(nèi)容如下
渲染表格后進(jìn)行數(shù)據(jù)行合并
onLoadSuccess: function (data) {
$('#tableStyle').bootstrapTable('mergeCells', {index: 1, field: 'name', rowspan: 3});
}
整體代碼
$('#tableStyle').bootstrapTable({
url: '/table/tableStyle',
method:'post',
pagination: true, //分頁
pageNumber:1, //初始化加載第一頁,默認(rèn)第一頁
pageSize: 10, //每頁的記錄行數(shù)(*)
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(shù)(*)
search: false, //顯示搜索框
sidePagination: "server", //服務(wù)端處理分頁
onLoadSuccess: function (data) {
$('#tableStyle').bootstrapTable('mergeCells', {index: 1, field: 'name', rowspan: 3});
},
columns: [{
field: '',
checkbox:true
}, {
field: 'name',
title: '名稱'
}, {
field: 'price',
title: '價(jià)格'
}]
});
合并后對(duì)td設(shè)置屬性 vertical-align: middle;
展現(xiàn)圖片

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
用Javascript同時(shí)提交多個(gè)Web表單的方法
使用Javascript同時(shí)提交多個(gè)Web表單的方法2009-12-12
JS圖片預(yù)加載三種實(shí)現(xiàn)方法解析
這篇文章主要介紹了JS圖片預(yù)加載三種實(shí)現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
JavaScript中的AOP編程的基本實(shí)現(xiàn)
面向切面編程給我們提供了一個(gè)方法,讓我們可以在不修改目標(biāo)邏輯的情況下,將代碼注入到現(xiàn)有的函數(shù)或?qū)ο笾小=裉焱ㄟ^本文給大家分享JavaScript中的AOP編程的基本實(shí)現(xiàn)方法,需要的朋友參考下吧2021-07-07
Taro UI框架開發(fā)小程序?qū)崿F(xiàn)左滑喜歡右滑不喜歡效果的示例代碼
這篇文章主要介紹了Taro UI開發(fā)小程序?qū)崿F(xiàn)左滑喜歡右滑不喜歡效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
window.open不被攔截的簡單實(shí)現(xiàn)代碼(推薦)
下面小編就為大家?guī)硪黄獁indow.open不被攔截的簡單實(shí)現(xiàn)代碼(推薦) 。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08

