JQuery table drag to adjust the column width, jquery column width

JQuery table drag to adjust the column width, jquery column width

Similar to the table drag header in the desktop program, when you move the cursor over the header frame, the mouse changes to the shape of the left and right drag, and then drag the mouse, a vertical line is displayed in the table that moves with the mouse. When you open the mouse, the column width of the table is adjusted. I am idle recently, so I will try to implement it myself. Here I will share my little achievements.

First, search for *. cur in your hard disk.

In order to be able to use this effect on all pages without modifying any HTML on the page, I integrate all the code in $ (document ). ready (function () {});, and write an independent JS file.

　　

Use a DIV with a width of 1 pixel to simulate a vertical line. After loading the page, add it to the body element.

　　

123	$(document).ready(function() {     $("body").append("<div id=\"line\" style=\"width:1px;height:200px;border-left:1px solid #00000000; position:absolute;display:none\" ></div> "); });

The next step is to move the mouse over the vertical border of the table. At first, I considered adding a small block-level element to the table header to trigger the mousemove and mouseout events. But for simplicity, I still choose to add this event for the entire header.

Handle mouse variations in the TH mousemove event:

 

12345678910111213141516

$("th").bind("mousemove", function(event) {    var th = $(this);    // Do not add effects to the first and last columns    if (th.prevAll().length <= 1 || th.nextAll().length < 1) {        return;    }    var left = th.offset().left;    // The effect is triggered 4 pixels away from the border line of the header.    if (event.clientX - left < 4 || (th.width() - (event.clientX - left)) < 4) {        th.css({ 'cursor': '/web/Page/frameset/images/splith.cur' });        // Modify the path of your Mouse icon    }    else {        th.css({ 'cursor': 'default' });    }});

When you press the mouse, a vertical line is displayed, its height and position are set to CSS attributes, and the TH object to change the column width is recorded at the same time, because a border line is shared by two TH, the first TH object is always used here.

　　

12345678910111213141516171819202122

$("th").bind("mousedown", function(event) {    var th = $(this);   // Same judgment as in the mousemove Function    if (th.prevAll().length < 1 | th.nextAll().length < 1) {        return;    }    var pos = th.offset();    if (event.clientX - pos.left < 4 || (th.width() - (event.clientX - pos.left)) < 4) {        var height = th.parent().parent().height();        var top = pos.top;        $("#line").css({ "height": height, "top": top,"left":event .clientX,"display":"" });        // Global variable, indicating whether the column width is being adjusted        lineMove = true;        // Always get the first TH object        if (event.clientX - pos.left < th.width() / 2) {            currTh = th.prev();        }        else {            currTh = th;        }    }});

The next step is the effect of moving the vertical line when the mouse moves, because you need to have this effect when the mouse leaves the TH element. This effect is written in the mousemove function of the BODY element.

　

12345

$("body").bind("mousemove", function(event) {    if (lineMove == true) {        $("#line").css({ "left": event.clientX }).show();     }});

The last step is to adjust the column width when the mouse is up. Here I have added the same mouseup code to the BODY and TH elements. I thought I only needed to add the mouseup function to the BODY, but I didn't understand why the event was not triggered when the mouse was in TH, so I had to add code to the TH element. The level is limited. The following completely repeated code does not know how to extract it.

123456789101112131415161718192021222324

$("body").bind("mouseup", function(event) {    if (lineMove == true) {        $("#line").hide();        lineMove = false;        var pos = currTh.offset();        var index = currTh.prevAll().length;        currTh.width(event.clientX - pos.left);        currTh.parent().parent().find("tr").each(function() {            $(this).children().eq(index).width(event.clientX - pos.left);        });     }});$("th").bind("mouseup", function(event) {    if (lineMove == true) {        $("#line").hide();        lineMove = false;        var pos = currTh.offset();        var index = currTh.prevAll().length;        currTh.width(event.clientX - pos.left);        currTh.parent().parent().find("tr").each(function() {            $(this).children().eq(index).width(event.clientX - pos.left);        });    }});

All right, you just need to introduce the JS file containing the above Code in the page that requires this effect, you can add this effect to the table on the page.

In addition, the Code for customizing the Mouse icon in Firefox does not work. The jquery used is 1.2.6.

 

Effect File Download: http://files.cnblogs.com/xxfss2/changeTh.js

 

------------------------ Update --------------

Add the following code to the $ (document). ready function for the BUG that will be selected during dragging.

$ ("Body"). bind ("selectstart", function () {return! LineMove ;});

 

In the j2ee project, how does one adjust the column width by dragging the table header?

Use the jquery table plug-in. There are many official websites that are lightweight and easy to use.
 
How to Use JQuery to adjust the column width by dragging the header and sort by clicking the header

JQUERY