为GridView增加可以拖动列宽的能力
最近在找如果让GridView有可以改变列宽的能力，找了很久，同时也要用到updatepanle，其实是自己太懒了，不注意去分析，最后终于看到有个加拿大人以此写了一个ajax的扩展控件。于是拿过来用。出了一些问题。因为他用的是ajaxtoolkit的早期版本。在.net3.5会报告说是找不到ajaxtoolkit,其实很简单，看了，ajaxtoolkit的代码，将他源码中最后注册部分的ajaxtookit变成Sys.Extended.UI，注意是GridViewResizeBehavior.js.文件。
1 /*
2 This source code was adapted from Matt Berseth code:
3 http://mattberseth.com/blog/2007/08/creating_a_gridview_with_resiz.html
4 */
5
6 Type.registerNamespace('LavaBlast.AJAX.GridViewResizeExtender');
7
8 LavaBlast.AJAX.GridViewResizeExtender.GridViewResizeBehavior = function(element) {
9 LavaBlast.AJAX.GridViewResizeExtender.GridViewResizeBehavior.initializeBase(this, [element]);
10
11 // Properties
12 // true when a header is currently being resized
13 this._isResizing;
14 // a reference to the header column that is being resized
15 this._element;
16 // an array of all of the tables header cells
17 this._ths;
18 }
19
20 LavaBlast.AJAX.GridViewResizeExtender.GridViewResizeBehavior.prototype = {
21
22 initialize : function() {
23 LavaBlast.AJAX.GridViewResizeExtender.GridViewResizeBehavior.callBaseMethod(this, 'initialize');
24
25 // get all of the th elements from the gridview
26 this._ths = this.get_element().getElementsByTagName('TH');
27
28 var args = {behavior: this};
29
30 // if the grid has at least one th element
31 if(this._ths.length > 1){
32
33 for(i = 0; i < this._ths.length; i++){
34 // determine the widths
35 this._ths[i].style.width = Sys.UI.DomElement.getBounds(this._ths[i]).width + 'px';
36
37 // attach the mousemove and mousedown events
38 if(i < this._ths.length - 1){
39 $addHandler(this._ths[i], 'mousemove', Function.createCallback(this._onMouseMove, args));
40 $addHandler(this._ths[i], 'mousedown', Function.createCallback(this._onMouseDown, args));
41 }
42 }
43
44 // add a global mouseup handler
45
46 $addHandler(document, 'mouseup', Function.createCallback(this._onMouseUp, args));
47 // add a global selectstart handler
48 $addHandler(document, 'selectstart', Function.createCallback(this._onSelectStart, args));
49 }
50 },
51
52 _onMouseMove : function(args, e){
53 if(e.behavior._isResizing){
54 // determine the new width of the header
55 var bounds = Sys.UI.DomElement.getBounds(e.behavior._element);
56 var width = args.clientX - bounds.x;
57
58 // we set the minimum width to 1 px, so make
59 // sure it is at least this before bothering to
60 // calculate the new width
61 if(width > 1)
62 {
63 // get the next th element so we can adjust its size as well
64 var nextColumn = e.behavior._element.nextSibling;
65 var nextColumnWidth;
66 if(width < e.behavior._toNumber(e.behavior._element.style.width)){
67 // make the next column bigger
68 nextColumnWidth = e.behavior._toNumber(nextColumn.style.width) + e.behavior._toNumber(e.behavior._element.style.width) - width;
69 }
70 else if(width > e.behavior._toNumber(e.behavior._element.style.width)){
71 // make the next column smaller
72 nextColumnWidth = e.behavior._toNumber(nextColumn.style.width) - (width - e.behavior._toNumber(e.behavior._element.style.width));
73 }
74
75 // we also don't want to shrink this width to less than one pixel,
76 // so make sure of this before resizing ...
77 if(nextColumnWidth > 1){
78 e.behavior._element.style.width = width + 'px';
79 nextColumn.style.width = nextColumnWidth + 'px';
80 }
81 }
82 }
83 else
84 {
85 // get the bounds of the element. If the mouse cursor is within
86 // 4px of the border, display the e-cursor -> cursor:e-resize
87 var bounds = Sys.UI.DomElement.getBounds(args.target);
88 if(Math.abs((bounds.x + bounds.width) - (args.clientX)) <= 4) {
89 args.target.style.cursor = 'e-resize';
90 }
91 else{
92 args.target.style.cursor = '';
93 }
94 }
95 },
96
97 _onMouseDown : function(args, e){
98 // if the user clicks the mouse button while
99 // the cursor is in the resize position, it means
100 // they want to start resizing. Set this._isResizing to true
101 // and grab the th element that is being resized
102 if(args.target.style.cursor == 'e-resize') {
103 e.behavior._isResizing = true;
104 e.behavior._element = args.target;
105 }
106 },
107
108 _onMouseUp : function(args, e){
109 // the user let go of the mouse - so
110 // they are done resizing the header. Reset
111 // everything back
112 if(e.behavior._isResizing){
113
114 // set back to default values
115 e.behavior._isResizing = false;
116 e.behavior._element = null;
117
118 // make sure the cursor is set back to default
119 for(i = 0; i < e.behavior._ths.length; i++){
120 e.behavior._ths[i].style.cursor = '';
121 }
122 }
123 },
124
125 _onSelectStart : function(args, e){
126 // Don't allow selection during drag
127 if(e.behavior._isResizing){
128 args.preventDefault();
129 return false;
130 }
131 },
132
133 _toNumber : function(m) {
134 // helper function to peel the px off of the widths
135 return new Number(m.replace('px', ''));
136 }
137 }
138
139 LavaBlast.AJAX.GridViewResizeExtender.GridViewResizeBehavior.registerClass('LavaBlast.AJAX.GridViewResizeExtender.GridViewResizeBehavior', Sys.Extended.UI.BehaviorBase);
以上是js代码，因为我不知道怎么上传文件的，只好发代码了。
1 using System;
2 using System.Collections.Generic;
3 using System.Text;
4 using AjaxControlToolkit.Design;
5
6 namespace LavaBlast.AJAX.GridViewResizeExtender
7 {
8 public class GridViewResizeDesigner : ExtenderControlBaseDesigner<GridViewResizeExtender>
9 {
10 }
11 }
1 using System;
2 using System.Collections.Generic;
3 using System.Text;
4 using System.Web.UI.WebControls;
5 using System.Web.UI;
6 using System.ComponentModel;
7 using System.ComponentModel.Design;
8 using AjaxControlToolkit;
9
10 [assembly: System.Web.UI.WebResource("LavaBlast.AJAX.GridViewResizeExtender.GridViewResizeBehavior.js", "text/javascript")]
11
12 namespace LavaBlast.AJAX.GridViewResizeExtender
13 {
14 [Designer(typeof(GridViewResizeDesigner))]
15 [ClientScriptResource("LavaBlast.AJAX.GridViewResizeExtender.GridViewResizeBehavior", "LavaBlast.AJAX.GridViewResizeExtender.GridViewResizeBehavior.js")]
16 [TargetControlType(typeof(GridView))]
17 public class GridViewResizeExtender : ExtenderControlBase
18 {
19
20 }
21 }
