快捷導(dǎo)航

Bootstrap Table列寬拖動(dòng)的方法

更新時(shí)間：2018年08月15日 09:23:55 作者：ktkt

Bootstrap Table可拖動(dòng)，需要用到它的Resizable擴(kuò)展插件，下面腳本之家小編給大家?guī)?lái)了Bootstrap Table列寬拖動(dòng)的方法，感興趣的朋友一起看看吧

在之前做過(guò)的一個(gè)web項(xiàng)目中，前端表格是基于jQuery和Bootstrap Table做的，客戶要求能利用拖動(dòng)改變列寬，為了總結(jié)和備忘，現(xiàn)將實(shí)現(xiàn)的過(guò)程記錄如下：

1. Bootstrap Table可拖動(dòng)，需要用到它的Resizable擴(kuò)展插件，具體可見(jiàn)bootstrap-table的官方文檔鏈接： http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/

進(jìn)入之后，找到Resizable插件，點(diǎn)擊Home進(jìn)入github可以找到詳細(xì)的用法。

2. 用法是直接引入該js插件，不過(guò)可以看到，這個(gè)插件還依賴于colResizable v1.6（下載地址： http://www.bacubacu.com/colresizable/ ）

<script src="colResizable-1.6.min.js"></script>
<script src="extensions/bootstrap-table-resizable.js"></script>

3. 另外，在使用Bootstrap Table的時(shí)候，建議用js去設(shè)置table的列屬性，即按照如下方式：

$('#myTable').bootstrapTable({ 
        url: url,
    method: 'post', 
    columns:[{

      align: 'center',
      checkbox:true,
      width:'15',
      valign: 'middle'
    },{
      field: 'name',
      title: '名稱',
      align: 'center',
      width:'100',
      valign: 'middle'
    },{
      field: 'desc',
      title: '描述',
      width:500,
      align: 'left',
      valign: 'middle'
    }]
});

上面這種方式可以通過(guò)修改width的大小來(lái)直接修改列的寬度。而還有一種寫法是在HTML中設(shè)置table的列頭部，這種方式是很難調(diào)整寬度的，且很容易導(dǎo)致列頭與內(nèi)容無(wú)法對(duì)齊，是不推薦的，例如：

<thead>
      <tr>
        <th data-field="id" data-width="50px">編號(hào)</th>
        <th data-field="name" data-width="100px">姓名</th>
        <th data-field="desc" data-width="120px">描述</th>
      </tr>
    </thead>

總結(jié)

以上所述是小編給大家介紹的Bootstrap Table列寬拖動(dòng)的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)一個(gè)猜數(shù)字游戲
本文主要介紹了js實(shí)現(xiàn)一個(gè)猜數(shù)字游戲的實(shí)例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-03-03
微信小程序?qū)崿F(xiàn)圖片上傳功能的思路與源碼
我們?nèi)粘ｉ_(kāi)發(fā)中經(jīng)常需要用到圖片上傳功能,這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)圖片上傳功能的思路與源碼的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
js從Cookies里面取值的簡(jiǎn)單實(shí)現(xiàn)
遇到一個(gè)Js從Cookies里面取值的需求，Js貌似沒(méi)有現(xiàn)成的方法可以指定Key值獲取Cookie里面對(duì)應(yīng)的值，簡(jiǎn)單實(shí)現(xiàn)如下
2014-06-06
Javascript?promise.all的用法介紹(簡(jiǎn)潔易懂)
這篇文章主要給大家介紹了關(guān)于Javascript?promise.all用法的相關(guān)資料,Promise.all()方法是一個(gè)Promise對(duì)象方法,可以將多個(gè)Promise實(shí)例包裝成一個(gè)新的Promise對(duì)象,最終返回一個(gè)數(shù)組,需要的朋友可以參考下
2023-07-07
簡(jiǎn)單談?wù)凧avaScript的同步與異步
這篇文章主要介紹了簡(jiǎn)單談?wù)凧avaScript的同步與異步的相關(guān)資料,需要的朋友可以參考下
2015-12-12
原生JS操作網(wǎng)頁(yè)給p元素添加onclick事件及表格隔行變色
原生JS操作網(wǎng)頁(yè),給網(wǎng)頁(yè)中的所有p元素添加onclick事件，使一個(gè)特定的表格隔行變色等等，感興趣的朋友可以參考下
2013-12-12
Javascript中匿名函數(shù)的調(diào)用與寫法實(shí)例詳解(多種)
js中定義函數(shù)的方式有很多種，函數(shù)直接量就是其中一種，下面通過(guò)本文給大家介紹匿名函數(shù)是如何調(diào)用的及匿名函數(shù)的n中寫法，對(duì)js匿名函數(shù)調(diào)用，js匿名函數(shù)寫法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
jquery ajax應(yīng)用中iframe自適應(yīng)高度問(wèn)題解決方法
很多管理系統(tǒng)中，都使用iframe進(jìn)行信息內(nèi)容的展示方式，或者作為主菜單的鏈接展示內(nèi)容。使用iframe的問(wèn)題就是自適應(yīng)高度的問(wèn)題
2014-04-04
JavaScript中的console.group()函數(shù)詳細(xì)介紹
這篇文章主要介紹了JavaScript中的console.group()函數(shù)詳細(xì)介紹,當(dāng)程序調(diào)試日志過(guò)多時(shí)會(huì)有些雜亂,此時(shí)可以使用console.group()函數(shù)調(diào)來(lái)分組顯示,需要的朋友可以參考下
2014-12-12
一文徹底理解JS回調(diào)函數(shù)
回調(diào)函數(shù)是從一個(gè)叫函數(shù)式編程的編程范式中衍生出來(lái)的概念,簡(jiǎn)單來(lái)說(shuō),函數(shù)式編程就是使用函數(shù)作為變量,這篇文章主要介紹了一文徹底理解JS回調(diào)函數(shù),需要的朋友可以參考下
2022-12-12