欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2018年08月15日 09:23:55   作者：ktkt  
Bootstrap Table可拖動(dòng)，需要用到它的Resizable擴(kuò)展插件，下面腳本之家小編給大家?guī)砹薆ootstrap Table列寬拖動(dòng)的方法，感興趣的朋友一起看看吧

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

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

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

 

2. 用法是直接引入該js插件，不過可以看到，這個(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'
    }]
});

上面這種方式可以通過修改width的大小來直接修改列的寬度。而還有一種寫法是在HTML中設(shè)置table的列頭部，這種方式是很難調(diào)整寬度的，且很容易導(dǎo)致列頭與內(nèi)容無法對(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論