Tùy chỉnh kích thước cột của Gridview sử dụng Jquery
Bài viết sau sẽ hướng dẫn các bạn làm thế nào có thể dùng chuột kéo thả độ rộng các cột đơn giản như làm việc trong excel
I. Introduction
Bài viết có sử dụng plugin Jquery là colResizable để thực hiện việc resizable các cột trong gridview
II. Using the code
Khi sử dụng plugin colResizable, độ rộng các cột của gridview sẽ được lưu trong cookies của plugin, do đó, asp.net sẽ không postback trở lại để reset độ rộng này nữa. Bây giờ thì bạn có thể download plugin theo đường dẫn bên trên và thêm Jquery, cookies, Javascript theo đường dẫn như sau:
1
2
3
| <script type="text/javascript" src="scripts/jquery-latest.js"/><script src="/Scripts/colResizable-1.3.min.js" type="text/javascript"/><script src="/Scripts/jquery.cookie.js" type="text/javascript"/> |
Đoạn code dưới đây sẽ khởi tạo độ rộng của bảng được lấy từ cookies và plugin khi trang web được load thành công:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| $(document).ready(function() { if ($.cookie('colWidth') != null) {var columns = $.cookie('colWidth').split(',');var i = 0;$('.GridViewStyle th').each(function () {$(this).width(columns[i++]);});}$(".GridViewStyle").colResizable({liveDrag: true,gripInnerHtml: "<div class='grip'></div>",draggingClass: "dragging",onResize: onSampleResized}); }); |
Tiếp theo, chúng ta xây dựng một hàm sự kiện để bắt sự kiện khi người dùng kéo thả độ rộng cột. Hàm này sẽ đọc độ rộng và lưu trở lại cookie.
1
2
3
4
5
6
| var onSampleResized = function (e) {var columns = $(e.currentTarget).find("th");var msg = "";columns.each(function () { msg += $(this).width() + ","; })$.cookie("colWidth", msg);}; |
Sau đó, thêm 1 gridview vào nữa:
1
2
3
4
5
6
| <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" GridLines="None" CssClass="GridViewStyle"><Columns>............ <Columns></asp:GridView> |
Và cuối cùng, sản phẩm của chúng ta là đây:
Comments[ 0 ]
Đăng nhận xét