برای تغییر سایز ستون‌های جداول HTML با استفاده از ماوس، افزونه‌های زیادی تدارک دیده شده است که از جمله مطرح‌ترین آن‌ها می‌توان به colResizable اشاره کرد. حتی اگر از DataGridهای مطرح وب هم استفاده کرده باشید، اکثر آن‌ها از تغییر سایز ستون‌ها توسط کاربر پشتیبانی می‌کنند. اما مشکل بزرگی که در همه‌ی آن‌ها مشترک است این است که فقط از چیدمان‌های چپ به راست پشتیبانی می‌کنند و به محض اینکه شما ساختار راست به چپ را به جدول مورد نظر اعمال کنید، عملکرد تغییر سایز ستون‌ها با اشکال مواجه می‌شود.
به همین جهت برای تغییر سایز ستون‌ها توسط کاربر، افزونه ای برای jQuery تدارک دیدم که با جداول معمول HTML که همان tableها هستند سازگار است و به راحتی به هر جدولی می‌توان آن را اعمال کرد.
کدهای افزونه‌ی rtlColResizable:
(function ($, undefined) {
$.fn.extend({
'rtlColResizable': function (options) {
var defaults = {
//Default values for the plugin's options here
};
options = $.extend(defaults, options);
var isMouseButtonPressed;
var $resizingElement = undefined;
var resizingElementStartWidth;
var mouseCursorStartX;
var isCursorInResizingPosition;
var addResizingCursorStyle = function ($element) {
$element.css({
'cursor': 'col-resize',
'user-select': 'none',
'-o-user-select': 'none',
'-ms-user-select': 'none',
'-moz-user-select': 'none',
'-khtml-user-select': 'none',
'-webkit-user-select': 'none',
});
};
var removeResizingCursorStyle = function ($element) {
$element.css({
'cursor': 'default',
'user-select': 'text',
'-o-user-select': 'text',
'-ms-user-select': 'text',
'-moz-user-select': 'text',
'-khtml-user-select': 'text',
'-webkit-user-select': 'text',
});
};
var canResize = function (e) {
return (e.offsetX || e.clientX - $(e.target).offset().left) < 10;
};
return this.each(function () {
var opts = options;
var tableColumns = $(this).find('th');
tableColumns.filter(':not(:last-child)').mousedown(function (e) {
$resizingElement = $(this);
isMouseButtonPressed = true;
mouseCursorStartX = e.pageX;
resizingElementStartWidth = $resizingElement.width();
});
tableColumns.mousemove(function (e) {
if (canResize(e)) {
addResizingCursorStyle($(e.target));
isCursorInResizingPosition = true;
} else if (!isMouseButtonPressed) {
removeResizingCursorStyle($(e.target));
isCursorInResizingPosition = false;
}
if (isCursorInResizingPosition && isMouseButtonPressed) {
$resizingElement.width(resizingElementStartWidth + (mouseCursorStartX - e.pageX));
}
});
$(document).mouseup(function () {
if (isMouseButtonPressed) {
removeResizingCursorStyle($resizingElement);
isMouseButtonPressed = false;
}
});
});
}
});
})(jQuery); نحوه‌ی استفاده:
این افزونه با تگ Table در HTML سازگار است. فقط تنها موردی که باید رعایت شود این است که در هنگام تعریف ساختار جدول، باید استاندارد تعریف ستون‌ها یا همان Headerها را رعایت کنید و از تگ‌های thead و th استفاده کنید.
نمونه ای از نحوه‌ی استفاده از آن را در کدهای زیر می‌بینید:
<!DOCTYPE html>
<html>
<head>
<title>rtlColResizable Sample</title>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>ستون1</th> <!-- نام ستون‌ها را حتما در این تگ باید تعریف کنید -->
<th>ستون2</th>
<th>ستون3</th>
</tr>
</thead>
<tr>
<td>داده مربوط به ستون 1</td>
<td>داده مربوط به ستون 2 </td>
<td>داده مربوط به ستون 3</td>
</tr>
</table>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.rtlColResizable.js"></script>
<script>
$('table#myTable').rtlColResizable();
</script>
</body>
</html> دریافت نمونه کدی از نحوه‌ی استفاده از این افزونه
