基于jquery-resizable創(chuàng)建可調(diào)整大小的表(table)格

更新時(shí)間：2023年06月15日 00:09:42 作者：webkaka

本文介紹如何基于jquery-resizable實(shí)現(xiàn)可調(diào)整表格(table)列寬的代碼,需要的朋友可以參考下

本文介紹如何使用jquery-resizable調(diào)整表格(table)列寬。

效果圖

在線演示下載地址

示例介紹

鼠標(biāo)拖動(dòng)單元格邊框，可調(diào)整列寬。

創(chuàng)建可調(diào)整大小的列需要付出一些額外的努力，因?yàn)楸頉](méi)有一種簡(jiǎn)單的方法來(lái)創(chuàng)建可以移動(dòng)的拖動(dòng)句柄。

為了調(diào)整列的大小，我們可以在列的右側(cè)添加一個(gè)元素來(lái)提供句柄，這樣我們就有了一個(gè)用于拖動(dòng)的視覺(jué)指示器。要調(diào)整大小的表格單元格為 position:relative，注入的元素為 position:absolute 并推到單元格右側(cè)以提供拖動(dòng)手柄。拖動(dòng)然后簡(jiǎn)單地調(diào)整單元格的大小。

在實(shí)踐中，這意味著你需要一些CSS（或jquery樣式）來(lái)強(qiáng)制注入樣式和邏輯來(lái)注入元素。

HTML

<table>
    <thead>
        <th> col 1 </th>
        <th> col 2 </th>
        <th> col 3 </th>
        <th> col 4 </th>
    </thead>
    <tbody>
        <tr>
            <td> Column 1 </td>
            <td> Column 2 </td>
            <td> Column 3 </td>
            <td> Column 4 </td>
        </tr>
        <tr>
            <td> Column 1 </td>
            <td> Column 2 </td>
            <td> Column 3 </td>
            <td> Column 4 </td>
        </tr>
    </tbody>
</table>

html的table標(biāo)簽為常規(guī)結(jié)構(gòu)，不需要添加額外的ID屬性或class屬性。

jQuery

jQuery編程需要先引用jQuery庫(kù)文件，以及jquery-resizable.js插件。

<script src='jquery-3.2.1.min.js'></script>
<script src='jquery-resizable.js'></script>
<script>
$("td:first-child,td:nth-child(2),td:nth-child(3),th:first-child,th:nth-child(2),th:nth-child(3)").css({position: "relative" }).prepend("<div class='resizer'></div>").resizable({
  resizeHeight: false,
  handleSelector: "",
  onDragStart: function (e, $el, opt) {
    if (!$(e.target).hasClass("resizer"))
    return false;
    return true;
  } });
</script>

上面的jQuery實(shí)現(xiàn)代碼，加上注釋文字，你可能更容易理解：

//$("td,th")
$("td:first-child,td:nth-child(2),td:nth-child(3),th:first-child,th:nth-child(2),th:nth-child(3)").
css({
  /* 需要包含 resizer */
  position: "relative" })
/* 檢查 .resizer CSS */.
prepend("<div class='resizer'></div>").
resizable({
  resizeHeight: false,
  // 通過(guò) .resizer 元素，使用列作為句柄和篩選器
  handleSelector: "",
  onDragStart: function (e, $el, opt) {
    // 只拖拽 resizer
    if (!$(e.target).hasClass("resizer"))
    return false;
    return true;
  } });

總結(jié)

本文介紹了使用jquery-resizable拖動(dòng)單元格邊框調(diào)整表格(table)列寬的方法，需要該效果的朋友可以直接下載源碼使用。