Resizable table columns with jQuery [closed]

前端未结

关注

 9  1388

无人共我

相关标签:

9条回答

萌比男神i

2020-11-29 19:32

I've done my own jquery ui widget, just thinking if it's good enough.

https://github.com/OnekO/colresizable

0 讨论(0)
发布评论:

提交评论
- 加载中...
再見小時候

2020-11-29 19:34

So I started writing my own, just bare bones functionality for now, will be working on it next week... http://jsfiddle.net/ydTCZ/

0 讨论(0)
发布评论:

提交评论
- 加载中...

遇见更好的自我

2020-11-29 19:35

Here's a short complete html example. See demo http://jsfiddle.net/CU585/

<!DOCTYPE html><html><head><title>resizable columns</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<style>
th {border: 1px solid black;}
table{border-collapse: collapse;}
.ui-icon, .ui-widget-content .ui-icon {background-image: none;}
</style>
<body>
<table>
<tr><th>head 1</th><th>head 2</th></tr><tr><td>a1</td><td>b1</td></tr></table><script>
$( "th" ).resizable();
</script></body></html>

0 讨论(0)

不思量自难忘°

2020-11-29 19:39

I have tried several solutions today, the one working best for me is Jo-Geek/jQuery-ResizableColumns. Is is very simple, yet it handles tables placed in flex containers, which many of the other ones fail with.

<table class="resizable">
</table>

$('table.resizable').resizableColumns();

$(function() {
  $('table.resizable').resizableColumns();
})

body {
  margin: 0px;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://jo-geek.github.io/jQuery-ResizableColumns/demo/resizableColumns.min.js"></script>
<table class="resizable" border="true">
  <thead>
  <tr>
    <th>col 1</th><th>col 2</th><th>col 3</th><th>col 4</th>
    </tr>
  </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>

0 讨论(0)

情书的邮戳

2020-11-29 19:47

try flexigrid, here is One more Reference

0 讨论(0)
发布评论:

提交评论
- 加载中...

难免孤独

2020-11-29 19:48

I tried to add to @user686605's work:

1) changed the cursor to col-resize at the th border

2) fixed the highlight text issue when resizing

I partially succeeded at both. Maybe someone who is better at CSS can help move this forward?

http://jsfiddle.net/telefonica/L2f7F/4/

HTML

<!--Click on th and drag...-->
<table>
    <thead>
        <tr>
            <th><div class="noCrsr">th 1</div></th>
            <th><div class="noCrsr">th 2</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>td 1</td>
            <td>td 2</td>
        </tr>
    </tbody>
</table>

$(function() {
    var pressed = false;
    var start = undefined;
    var startX, startWidth;

    $("table th").mousedown(function(e) {
        start = $(this);
        pressed = true;
        startX = e.pageX;
        startWidth = $(this).width();
        $(start).addClass("resizing");
        $(start).addClass("noSelect");
    });

    $(document).mousemove(function(e) {
        if(pressed) {
            $(start).width(startWidth+(e.pageX-startX));
        }
    });

    $(document).mouseup(function() {
        if(pressed) {
            $(start).removeClass("resizing");
            $(start).removeClass("noSelect");
            pressed = false;
        }
    });
});

CSS

table {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
}

table td {
    border-width: 1px;
    border-style: solid;
    border-color: black;
}

table th {
    border: 1px;
    border-style: solid;
    border-color: black;
    background-color: green;
    cursor: col-resize;
}

table th.resizing {
    cursor: col-resize;
}

.noCrsr {
    cursor: default;
    margin-right: +5px;
}

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

0 讨论(0)

1 2 下一页

热议问题