<!DOCTYPE html>
<html lang="en">
<head>
<title>colResizable demo</title>
<link rel="stylesheet" type="text/css" href="postback.Demo/css/main.css" />
<style>
.scroll{
overflow-x:scroll;
max-width:100%;
position:relative;
}
</style>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="colResizable-1.6.js"></script>
<script type="text/javascript">
$(function(){
var innerHTML = $("#updatePanel").html();
var onTablesCreated = function(){
$("#normal").colResizable({
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
resizeMode:'fit',
postbackSafe:true,
partialRefresh:true});
$("#flex").colResizable({
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
resizeMode:'flex',
postbackSafe:true,
partialRefresh:true});
$("#overflow").colResizable({
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
resizeMode:'overflow',
postbackSafe:true,
partialRefresh:true});
}
var fakePostback = function(){
$("#updatePanel").html('<img src="img/loading.gif"/>');
setTimeout(function(){
$("#updatePanel").html(innerHTML);
onPostbackOver();
}, 700);
};
var onPostbackOver = function(){
onTablesCreated();
};
$("#postback").click(fakePostback);
onPostbackOver();
});
</script>
</head>
<body>
<div class="center" >
<h3>Click on 'Partial refresh' to simulate a postback</h3>
<button id="postback">Partial refresh</button >
<div id="updatePanel">
<br/>
<p><strong>resizeMode: 'fit'</strong> table width adapts to the container width. Columns resize using their neighbour's width</p>
<table id="normal" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>header</th><th>header</th><th>header</th>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
</tr>
</table>
<p><strong>resizeMode: 'flex'</strong> columns are sized independently unless there is not enought space in the container</p>
<table id="flex" width="50%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>header</th><th>header</th><th>header</th>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
</tr>
</table>
<p><strong>resizeMode: 'overflow'</strong> columns are sized independently. Table width can exceed its container </p>
<div class="scroll">
<table id="overflow" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>header</th><th>header</th><th>header</th>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left">cell</td><td>cell</td><td class="right">cell</td>
</tr>
<tr>
<td class="left bottom">cell</td><td class="bottom">cell</td><td class="bottom right">cell</td>
</tr>
</table>
</div>
<br/>
</div>
<br/>
<br/><br/>
</div>
</body>
</html>
jquery插件colResizable实现表格列可拖拽伸缩表格大小
需积分: 0 192 浏览量
更新于2023-03-14
收藏 141KB ZIP 举报
在JavaScript的世界里，jQuery是一个广泛使用的库，它简化了DOM操作、事件处理和Ajax交互等任务。本篇文章将深入探讨如何使用jQuery插件colResizable来实现表格列的拖拽伸缩功能，从而使用户可以根据需要调整表格的列宽，提高用户界面的可定制性和交互性。
colResizable是一个轻量级的jQuery插件，它为HTML表格提供了列宽拖拽调整的功能。这个插件无需复杂的代码，就能使静态或动态生成的表格具备动态调整列宽的能力。以下是使用colResizable插件的关键步骤：
1. **引入jQuery和colResizable插件**：
确保你的页面已经引入了jQuery库，如果没有，你需要从CDN或本地文件系统引入。接着，从colResizable的官方仓库或CDN获取插件文件，并将其链接到你的HTML文档底部。
```html
<script src="https://code.jquery.com/jquery-3.x.min.js"></script>
<script src="path/to/colResizable.min.js"></ref>
```
2. **初始化colResizable**：
在jQuery的$(document).ready()函数内，找到你想要应用拖拽功能的表格，然后调用colResizable的初始化方法。例如：
```javascript
$(document).ready(function() {
$("#myTable").colResizable({
fixed: false, // 是否固定列宽，false表示可以自由拖动调整
liveDrag: true, // 是否在拖动时实时更新列宽
gripInnerHtml: "<div class='grip'></div>", // 自定义拖动柄的HTML
disable: function(index) { // 可以禁用特定列的拖动功能
return index === 0; // 如果列索引为0，则禁用
}
});
});
```
3. **自定义样式**：
colResizable允许你自定义拖动柄的样式，以适应你的页面设计。在CSS文件中，你可以对`.grip`类进行修改，例如：
```css
.grip {
width: 10px;
background-color: #ccc;
cursor: ew-resize;
}
```
4. **响应式设计**：
如果你的网页需要适应不同设备，你可能需要在窗口尺寸变化时重新应用colResizable。这可以通过监听`resize`事件并再次调用初始化方法来实现：
```javascript
$(window).resize(function() {
$("#myTable").colResizable("destroy"); // 先销毁现有实例
$("#myTable").colResizable(); // 重新初始化
});
```
5. **与其他插件或功能的兼容**：
colResizable与大多数其他jQuery插件兼容，但如果你发现冲突，可以尝试使用`destroy`方法先移除colResizable，然后再重新应用。
6. **事件处理**：
colResizable提供了一些事件，如`beforeResize`和`afterResize`，你可以利用这些事件在列宽改变前后执行一些操作：
```javascript
$("#myTable").on("beforeResize", function(e, th, w) {
console.log("Before resize: Column " + $(th).index() + ", Width: " + w);
});
$("#myTable").on("afterResize", function(e, th, w) {
console.log("After resize: Column " + $(th).index() + ", Width: " + w);
});
```
通过以上步骤，你就可以在你的HTML表格上实现列宽的拖拽调整功能，从而提升用户体验。colResizable是一个非常实用且易于集成的工具，适合各种需要动态调整列宽的场合。记得在实际项目中，根据需要调整配置选项和样式，以达到最佳效果。
jq22colResizable.zip （31个子文件） 
colResizable 
jquery-1.12.2.min.js 95KB colResizable-1.6.min.js 6KB dynamicContent.Demo img 
th.png 5KB dotted.png 3KB grip.png 5KB css main.css 1KB
dynamic.html 3KB 简单实例.html 2KB colResizable.Demo img th.png 5KB dotted.png 3KB grip.png 5KB css main.css 1KB demo.html 4KB colResizable-1.6.js 22KB rangeSlider.Demo2 img rangeBar.png 3KB slider.png 3KB range.png 4KB css main.css 1KB range2.html 1KB rangeSlider.Demo img rangeBar.png 3KB slider.png 3KB css main.css 687B range.html 1KB index.html 5KB postback.Demo postback.html 5KB js jquery.js 89KB img th.png 1002B
loading.gif 1KB dotted.png 3KB grip.png 5KB css main.css 965B130 浏览量
2020-11-22 上传
5星 · 资源好评率100%164 浏览量
5星 · 资源好评率100%192 浏览量
2013-12-27 上传
2013-09-23 上传
175 浏览量
5星 · 资源好评率100%187 浏览量
2019-03-29 上传
192 浏览量
139 浏览量
2019-03-24 上传
196 浏览量
195 浏览量
147 浏览量
资源评论
熟悉的新风景
- 粉丝: 1870
- 资源: 29
