好的，我可以为您提供一个完整的示例代码，实现
拖拽调整列
顺序、列宽度的功能，并将
调整后的
顺序和宽度存入缓存中。请参考下面的代码：
HTML代码：
```
html
<table id="table">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</tbody>
</table>
```
JavaScript代码：
```javascript
$(function() {
// 初始化表格列的
顺序和宽度
var columns = {
'列1': { order: 1, width: 100 },
'列2': { order: 2, width: 100 },
'列3': { order: 3, width: 100 },
'列4': { order: 4, width: 100 }
};
// 初始化表格
$('#table').DataTable({
// 隐藏默认的
排序按钮
ordering: false,
// 设置默认列宽
columnDefs: [
{ targets: '_all', width: columns['列1'].width }
]
});
// 初始化可
拖拽排序
$('#table thead tr').
sortable({
axis: 'x',
cursor: 'move',
items: 'th:not(:first-child)',
start: function(e, ui) {
// 保存开始
拖拽时的位置
ui.item.startPos = ui.item.index();
},
stop: function(e, ui) {
// 保存
调整后的位置
var oldPos = ui.item.startPos;
var newPos = ui.item.index();
// 更改列的
顺序
if (oldPos != newPos) {
var columnName = ui.item.text();
var columnOrder = columns[columnName].order;
for (var i = 0; i < $('#table th').length; i++) {
if (i == oldPos) {
columns[columnName].order = newPos + 1;
} else if (i > oldPos && i <= newPos) {
var prevColumnName = $('#table th').eq(i - 1).text();
columns[prevColumnName].order = columns[prevColumnName].order + 1;
} else if (i < oldPos && i >= newPos) {
var nextColumnName = $('#table th').eq(i + 1).text();
columns[nextColumnName].order = columns[nextColumnName].order - 1;
}
}
}
}
});
// 初始化可
调整宽度
$('#table th:not(:first-child)').resizable({
handles: 'e',
minWidth: 50,
stop: function(e, ui) {
// 保存
调整后的宽度
var columnName = ui.element.text();
var columnWidth = ui.size.width;
columns[columnName].width = columnWidth;
}
});
// 将列的
顺序和宽度保存到缓存中
function saveColumnsToCache() {
localStorage.setItem('columns', JSON.stringify(columns));
}
// 页面卸载时保存列的
顺序和宽度
$(window).unload(function() {
saveColumnsToCache();
});
// 从缓存中读取列的
顺序和宽度
function loadColumnsFromCache() {
var cachedColumns = localStorage.getItem('columns');
if (cachedColumns) {
columns = JSON.parse(cachedColumns);
}
}
// 页面加载时读取列的
顺序和宽度
loadColumnsFromCache();
//
调整列的
顺序和宽度
for (var columnName in columns) {
var columnOrder = columns[columnName].order;
var columnWidth = columns[columnName].width;
var columnIndex = columnOrder - 1;
$('#table th').eq(columnIndex).text(columnName);
$('#table th').eq(columnIndex).css('width', columnWidth + 'px');
$('#table td').each(function() {
var $td = $(this);
var $newTd = $('<td>').css('width', columnWidth + 'px');
var tdText = $td.parent().find('td').eq(columnIndex).text();
$newTd.text(tdText);
$td.replaceWith($newTd);
});
}
// 保存列的
顺序和宽度到缓存中
saveColumnsToCache();
});
```
上面的代码使用了
jQuery UI
Sortable插件和
jQuery UI Resizable
插件，可以实现
拖拽调整列
顺序、列宽度的功能，并将
调整后的
顺序和宽度存入缓存中。请注意，此代码示例使用的是DataTables
插件来初始化表格，如果您使用的是其他表格
插件，可能需要进行相应的修改。
2173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
