تغییر عرض ستون های گرید ویو توسط کاربر با جی کوئری

[hamid_shrk]

با عرض سلام خدمت برنامه نویسان محترم.
میخوام تو این تاپیک نحوه استفاده از یک پلاگین جی کوئری رو برای برقراری امکان تغییر عرض ستون های گرید ویو خدمتتون آموزش بدم که خیلی تو پنل سایت ها بدرد میخوره.
------------
خوب برای شروع کافیه فقط فایل colResizable-1.3.min.js که تو ضمیمه های همین تاپیک هست رو به پوشه js اضافه کرده و به پروژتون اضافه کنید :


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script src="../js/colResizable-1.3.min.js" type="text/javascript"></script>
حالا کافیه کد زیر رو هم به صفحتون اضافه کنید :

<script type="text/javascript">
$(function () {

var onSampleResized = function (e) {
var columns = $(e.currentTarget).find("th");
var msg = "columns widths: ";
columns.each(function () { msg += $(this).width() + "px; "; })
$(".gridTxt").html(msg);

};

$(".grid").colResizable({
liveDrag: true,
gripInnerHtml: "<div class='grip'></div>",
draggingClass: "dragging",
onResize: onSampleResized
});

});
</script>


خوب حالا تنها کاری که باقی مونده اینه که به گریدتون یک کلاس بدید و نام اون کلاس رو بذارید grid به این صورت :


ID="GridView1" CssClass="grid" runat="server"
اگه خواستید نام کلاس رو تغییر بدید حتما تو کد جاوا اسکریپت بالا هم نام جدید کلاس رو به جای grid اضافه کنید.

-----
امیدوارم که مورد استفاده قرار گرفته باشه.
اگر سوالی داشتید در خدمتتون هستم.