jquery实现表格可变列宽插件开发

工作中用到了表格的可变列宽，网上看了下，自己也实现了一个，整理贴记录。

测试环境chrome，ie8，firefox

jquery版本1.8.2

原理：监听table第一行的mousemove事件，当鼠标位置在某列的边框附近时，mousedown即可拖动该列，mouseup时结束。其中当拖动时，2种方式：拖动时列宽随时变化，另一种是拖动结束时最后才计算列宽，采用后者相对好点，可以减少对dom的操作，提高性能和友好性。

参考ext grid的实现方式，当拖动时有2条参考线，分别表示列的左边框和右边框，通过拖动右边框来实现大小的改变。

表格样例

1. <table id="tbl"border="1" cellspacing="0" cellpadding="0">
2. <tr>
3. <th style="width:100px">col1</th>
4. <th style="width:100px">col2</th>
5. <th style="width:200px">col3</th>
6. <th style="width:200px">col4</th>
7. <th style="width:300px">col5</th>
8. </tr>
9. <tr>
10. <td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
11. </tr>
12. <tr>
13. <td>2</td><td>2</td><td>2</td><td>2</td><td>2</td>
14. </tr>
15. <tr>
16. <td>3</td><td>3</td><td>3</td><td>3</td><td>3</td>
17. </tr>
18. <tr>
19. <td>4</td><td>4</td><td>4</td><td>4</td><td>4</td>
20. </tr>
21. </table>

代码是经过很多次修改的，应该把一步步测试修改的记录下的，完整功能的代码看起来逻辑没有一步步来清晰了，代码如下

1. <pre class="js" name="code">//全局变量</pre>
2. <pre class="js" name="code">var resizing = false; //是否为拖动状态
3. var resizable = false; //当时是否可拖动
4. var minWidth = 20;  //没列的最小宽度
5. var resizeHeader;   //当前拖动的列
6. var leftLine;       //左参考线
7. var rightLine;      //有参考线
8. $(function(){
9. //监听标题行的mouosemove事件
10. $("table th").mousemove(function(e){
11. var target = $(e.target);
12. if(resizing){
13. //当已经在拖动变化列宽时
14. onDraging(e);
15. }else if(fnIsLeftEdge(e)){
16. //靠近左边框时，将当前的处理header
17. //设置为左边的一个，这样就相当于是拖动列
18. //的右边框，可以只计算该header的右边框参
19. //考线的移动,方便处理
20. resizeHeader = target.prev();
21. //不响应第一列的左边框拖动事件
22. if(resizeHeader.length == 0)
23. return;
24. //当鼠标停在左边框时，设置当前为可拖动状态
25. resizable = true;
26. //设置鼠标样式为拖动时的样式
27. target.css("cursor", "col-resize");
28. }else if(fnIsRightEdge(e)){
29. //当鼠标停留在右边框时
30. resizeHeader = target;
31. resizable = true;
32. target.css("cursor", "col-resize");
33. }else{
34. //超出可拖动的区域，设为不可拖动状态
35. resizable = false;
36. target.css("cursor", "default");
37. }
38. });
39. //当在拖动列上点击鼠标
40. $("table th").mousedown(function(e){
41. onDragingStart(e);
42. });
43. //当在document上移动鼠标,因为拖动可能超出表格的范围
44. $(document).mousemove(function(e){
45. onDraging(e);
46. });
47. //当拖动而释放时候未在标题行的释放也需要结束拖动
48. $(document).mouseup(function(e){
49. onDragingEnd(e);
50. });
51. });
52. /**
53. * 计算当前鼠标位置是不是在可拖动的范围内
54. * @param event e目标事件
55. * @side boolean true表示在左边边框附近，false表示右边
56. * @return boolean true在表格边框附近，false未在
57. */
58. function _fnIsColEdge(e, side){
59. var target = $(e.target);
60. var x = e.pageX;
61. var offset = target.offset();
62. var left = offset.left;
63. var right = left + target.outerWidth();
64. return side ? x<=left+2 : x >=right-2;
65. }
66. /**
67. * 计算当前鼠标位置是不是在左边框附近
68. * @param event e目标事件
69. * @return boolean true是， false否
70. */
71. function fnIsLeftEdge(e){
72. return _fnIsColEdge(e, true);
73. }
74. /**
75. * 计算当前鼠标位置是不是在右边框附近
76. * @param event e目标事件
77. * @return boolean true是， false否
78. */
79. function fnIsRightEdge(e){
80. return _fnIsColEdge(e, false);
81. }
82. /**
83. * 初始化拖动状态
84. * @param event e目标事件
85. * @return void
86. */
87. function onDragingStart(e){
88. //当前是否为拖动状态
89. if(resizable){
90. var target = $(e.target);
91. //设置当前文本不可选中，否则拖动时会选中文本
92. if(!$.browser.mozilla){
93. $(document).bind("selectstart", function(){ return false; });
94. }else{
95. $("body").css("-moz-user-select", "none");
96. }
97. //创建参考线
98. if(!leftLine){
99. leftLine = $("<div></div>");
100. leftLine.addClass("resize_line");
101. leftLine.appendTo("body");
102. rightLine = leftLine.clone();
103. rightLine.appendTo("body");
104. }
105. //显示参考线
106. leftLine.css({"top":resizeHeader.offset().top, "left": resizeHeader.offset().left, "height": $("table").innerHeight()});
107. rightLine.css({"top":resizeHeader.offset().top, "left": e.pageX, "css":"col-resize", "height": $("table").innerHeight()});
108. leftLine.show();
109. rightLine.show();
110. //设置为已经在拖动
111. resizing = true;
112. }
113. }
114. /**
115. * 列宽拖动中
116. * @param event e目标事件
117. * @return void
118. */
119. function onDraging(e){
120. //如果已经在拖动
121. if(resizing){
122. //拖动后的列宽不能小于最小列宽
123. if(e.pageX - resizeHeader.offset().left > minWidth){
124. rightLine.css("left", e.pageX);
125. }
126. }
127. }
128. /**
129. * 鼠标释放拖动结束，改变列宽，结束拖动状态
130. * @param event e目标事件
131. * @return void
132. */
133. function onDragingEnd(e){
134. //如果已经在拖动
135. if(resizing){
136. resizing = false;
137. //隐藏参考线
138. rightLine.hide();
139. leftLine.hide();
140. //设置文本可以选中
141. if(!$.browser.mozilla){
142. $(document).unbind("selectstart");
143. }else{
144. $("body").css("-moz-user-select", "");
145. }
146. //计算设置新的列宽
147. doResize();
148. }
149. }
150. /**
151. * 设置新的列宽
152. * @param event e目标事件
153. * @return void
154. */
155. function doResize(){
156. //计算列宽的变化值
157. var newWidth = parseInt(rightLine.css("left"), 10) - resizeHeader.offset().left - resizeHeader.width();
158. //设置新列宽
159. resizeHeader.width(resizeHeader.width() + newWidth);
160. }</pre>

参考线的样式

1. .resize_line{
2. width:0px;
3. border-style: solid;
4. border-color: #0066FF;
5. border-width: 0 1px 0 1px;
6. position:absolute;
7. }

整理修改后可作为jquery的插件使用，附件是示例和插件代码。

目前对分组的header即使用了rowspan和colspan的没有做处理，有时间再做更新，有兴趣的人也可以扩展和完善。