如何在表頭中使用jquery resizable以及在調整表頭的大小時如何擴展父div？

這裏是一個示例代碼，請使用jquery resizable（）擴展表頭，而不更改div的高度和寬度。提前致謝。如何在表頭中使用jquery resizable以及在調整表頭的大小時如何擴展父div？

<!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> 
<div style="overflow: scroll; height: 288px; width : 288px;"> 
<table> 
<tr><th>head 1</th><th>head 2</th></tr><tr><td>a1ysgefjdsgjfhghfgggfhdgghfdhfghsadhg</td><td>b1dsfghjkhgcjg</td></tr></table><script> 
$("th").resizable(); 
</script></div></body></html>

來源

2017-05-23 Linto

你能可能提供一個fiddlejs這將有助於使事情更清晰 –

這裏是網址爲：https：//jsfiddle.net/linto17/v01c55at/2/ ，但它不是在小提琴中工作，請複製到HTML文件，然後它將工作，謝謝。 – Linto

這是更好嗎？ https://jsfiddle.net/uea8j6hd/你想實現什麼，這使得表頭可以調整大小 –

下面是答案：

<!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> 
<div id="draggableDiv" style="overflow: scroll; height: 288px; width: 288px;"> 
<div> 
<table> 
<tr><th>head 1</th><th>head 2</th></tr><tr><td>hi all this is one</td><td>hi all this is two</td></tr></table></div><script> 
var table_width = $('table').width(); 
var start_width,end_width; 
var diff = 0; 
$("th").resizable({ 
    start: function(e, ui) { 
     start_width = ui.size.width; 
     console.log("start:"+ui.size.width); 
    }, 
    resize:function(event,ui){ 
     diff = -(start_width - ui.size.width); 
     $("table").css('width',(table_width+diff)+'px'); 
    // console.log(diff); 
     //console.log(ui.size.width); 
    }, 
    stop: function(e, ui) { 
     end_width = ui.size.width; 
     diff = end_width-start_width; 
     table_width += diff; 
     //$("table").css('width',table_width+'px'); 
     console.log("end :"+ui.size.width); 
     console.log("diff :"+diff); 
    } 
}); 
</script></div></body></html>

來源

2017-05-24 16:49:48 Linto

如何在表頭中使用jquery resizable以及在調整表頭的大小時如何擴展父div？

回答

相關問題