【JqGrid】JqGrid单元格合并及表头列合并，jqgrid单元格合并

超、凢脫俗 2022-07-14 04:55 635阅读 0赞

1、合并单元格代码示例

![Center][]

表头列合并代码：

![SouthEast][]

效果图

![SouthEast 1][]

2、jqgrid表头合并和行合并，基于jquery脚本插件

下面的js是近期写的一个jqgrid表头与行合并脚本。jqgrid也真是，表头合并的功能都不提供，用起来好尴尬。

使用方法：在jqgrid的loadComplete或者gridComplete事件中使用。

**\[javascript\]**  [view plain][]   [copy][view plain]

1.  /\* 
2.  \*  <a href="http://lib.csdn.net/base/jquery" class='replace\_word' title="jQuery知识库" target='\_blank' style='color:\#df3434; font-weight:bold;'>jQuery</a> tui tablespan plugin 0.2 
3.  \* 
4.  \*  Copyright (c) 2010 china yewf 
5.  \* 
6.  \* Dual licensed under the MIT and GPL licenses: 
7.  \*   http://www.opensource.org/licenses/mit-license.<a href="http://lib.csdn.net/base/php" class='replace\_word' title="PHP知识库" target='\_blank' style='color:\#df3434; font-weight:bold;'>PHP</a> 
8.  \*   http://www.gnu.org/licenses/gpl.html 
9.  \* 
10. \* Create: 2010-09-16 10:34:51 yewf $ 
11. \* Revision: $Id: tui.tablespan.js  2010-09-21 10:08:36 yewf $  
12. \* 
13. \* Table rows or cols span 
14. \*/  
15. /\* 行合并。索引从0开始，包含隐藏列，注意jqgrid的自动序号列也是一列。 
16. 使用方法： 
17. $("\#jqGridId").tuiTableRowSpan("3, 4, 8"); 
18. \*/  
19. jQuery.fn.tuiTableRowSpan = **function**(colIndexs) \{  
20.     **return** **this**.each(**function**() \{  
21.         **var** indexs = eval("(\[" + colIndexs + "\])");  
22.         **for** (**var** i = 0; i < indexs.length; i++) \{  
23.             **var** colIdx = indexs\[i\];  
24.             **var** that;  
25.             $('tbody tr', **this**).each(**function**(row) \{  
26.                 $('td:eq(' + colIdx + ')', **this**).filter(':visible').each(**function**(col) \{  
27.                     **if** (that != **null** && $(**this**).html() == $(that).html()) \{  
28.                         rowspan = $(that).attr("rowSpan");  
29.                         **if** (rowspan == undefined) \{  
30.                             $(that).attr("rowSpan", 1);  
31.                             rowspan = $(that).attr("rowSpan");  
32.                         \}  
33.                         rowspan = Number(rowspan) + 1;  
34.                         $(that).attr("rowSpan", rowspan); // do your action for the colSpan cell here  
35.                         $(**this**).remove(); // .hide(); // do your action for the old cell here  
36.                     \} **else** \{  
37.                         that = **this**;  
38.                     \}  
39.                     // that = (that == null) ? this : that; // set the that if not already set  
40.                 \});  
41.             \});  
42.         \}  
43.     \});  
44. \};  
45. /\* 列表头合并。 
46. 索引从0开始，包含隐藏列，注意jqgrid的自动序号列也是一列。 
47.     
48. 使用方法： 
49. $("\#jqGridId").tuiJqgridColSpan(\{  
50.     cols: \[ 
51.         \{ indexes: "3, 4", title: "合并后的大标题" \}, 
52.         \{ indexes: "6, 7", title: "合并后的大标题" \}, 
53.         \{ indexes: "11, 12, 13", title: "合并后的大标题" \} 
54.     \] 
55. \}); 
56. 注意事项：  
57. 1.没有被合并的rowSpan=2，即两行。列的拖拉有BUG，不能和jqgrid的显示层位置同步；     
58. 2.jqgrid的table表头必须有aria-labelledby='gbox\_tableid' 这样的属性； 
59. 3.只适用于jqgrid； 
60. \*/  
61. **var** tuiJqgridColSpanInit\_kkccddqq = **false**;  
62. jQuery.fn.tuiJqgridColSpan = **function**(options) \{  
63.     options = $.extend(\{\}, \{ cols: **null** \}, options);  
64.     **if** (tuiJqgridColSpanInit\_kkccddqq) \{  
65.         **return**;  
66.     \}  
67.     // 验证参数  
68.     **if** (options.cols == **null** || options.cols.length == 0) \{  
69.         alert("cols参数必须设置");  
70.         **return**;  
71.     \}  
72.     // 传入的列参数必须是顺序列，由小到大排列，如3,4,5  
73.     **var** error = **false**;  
74.     **for** (**var** i = 0; i < options.cols.length; i++) \{  
75.         **var** colIndexs = eval("(\[" + options.cols\[i\].indexes + "\])");  
76.         **for** (**var** j = 0; j < colIndexs.length; j++) \{  
77.             **if** (j == colIndexs.length - 1) **break**;  
78.             **if** (colIndexs\[j\] != colIndexs\[j + 1\] - 1) \{  
79.                 error = **true**;  
80.                 **break**;  
81.             \}  
82.         \}  
83.         **if** (error) **break**;  
84.     \}  
85.     **if** (error) \{  
86.         alert("传入的列参数必须是顺序列，如：3,4,5");  
87.         **return**;  
88.     \}  
89.     // 下面是对jqgrid的表头进行改造  
90.     **var** resizing = **false**,  
91.     currentMoveObj, startX = 0;  
92.     **var** tableId = $(**this**).attr("id");  
93.     // thead  
94.     **var** jqHead = $("table\[aria-labelledby='gbox\_" + tableId + "'\]");  
95.     **var** jqDiv = $("div\#gbox\_" + tableId);  
96.     **var** oldTr = $("thead tr", jqHead);  
97.     **var** oldThs = $("thead tr:first th", jqHead);  
98.     // 在原来的th上下分别增加一行，下面这行克隆，上面这行增加且height=0  
99.     **var** ftr = $("<tr/>").css("height", "auto").addClass("ui-jqgrid-labels").attr("role", "rowheader").insertBefore(oldTr);  
100.     **var** ntr = $("<tr/>").addClass("ui-jqgrid-labels").attr("role", "rowheader").insertAfter(oldTr);  
101.     oldThs.each(**function**(index) \{  
102.         **var** cth = $(**this**);  
103.         **var** cH = cth.css("height"), cW = cth.css("width"),  
104.         nth = $("<th/>").css("height", cH),  
105.         fth = $("<th/>").css("height", 0);  
106.         // 在IE8或firefox下面，会出现多一条边线，因此要去掉。  
107.         **if** (($.browser.msie && $.browser.version == "8.0") || $.browser.mozilla) \{  
108.             fth.css(\{ "border-top": "solid 0px \#fff", "border-bottom": "solid 0px \#fff" \});  
109.         \}  
110.         **if** (cth.css("display") == "none") \{  
111.             nth.css(\{ "display": "none", "white-space": "nowrap", "width": 0 \});  
112.             fth.css(\{ "display": "none", "white-space": "nowrap", "width": 0 \});  
113.         \}  
114.         **else** \{  
115.             nth.css("width", cW);  
116.             fth.css("width", cW);  
117.             // 这里增加一个事件，解决列的拖动  
118.             **var** res = cth.children("span.ui-jqgrid-resize");  
119.             res && res.bind("mousedown", **function**(e) \{  
120.                 currentMoveObj = $(**this**);  
121.                 startX = getEventPos(e).x;  
122.                 resizing = **true**;  
123.                 document.onselectstart = **new** Function("return false");  
124.             \});  
125.         \}  
126.         // 增加第一行  
127.         fth.addClass(cth.attr("class")).attr("role", "columnheader").appendTo(ftr);  
128.         // 增加第三行  
129.         cth.children().clone().appendTo(nth);  
130.         nth.addClass(cth.attr("class")).attr("role", "columnheader").appendTo(ntr);  
131.     \});  
132.     // 列合并。注意：这里不放在上面的循环中处理，因为每个遍历都要执行下面的操作。  
133.     **for** (**var** i = 0; i < options.cols.length; i++) \{  
134.         **var** colIndexs = eval("(\[" + options.cols\[i\].indexes + "\])");  
135.         **var** colTitle = options.cols\[i\].title;  
136.         **var** isrowSpan = **false**;  
137.         **for** (**var** j = 0; j < colIndexs.length; j++) \{  
138.             oldThs.eq(colIndexs\[j\]).attr(\{ "colSpan": colIndexs.length, "rowSpan": "1" \});  
139.             // 把被合并的列隐藏，不能remove，这样jqgrid的排序功能会错位。  
140.             **if** (j != 0) \{  
141.                 oldThs.eq(colIndexs\[j\]).attr("colSpan", "1").hide();  
142.             \}  
143.             // 标记删除clone后多余的th  
144.             $("thead tr:last th", jqHead).eq(colIndexs\[j\]).attr("tuidel", "false");  
145.             // 增加列标题  
146.             **if** (j == 0) \{  
147.                 **var** div = oldThs.eq(colIndexs\[j\]).find("div.ui-jqgrid-sortable");  
148.                 **var** divCld = div.children();  
149.                 div.text(colTitle);  
150.                 div.append(divCld);  
151.             \}  
152.         \}  
153.     \}  
154.     // 移除多余列  
155.     $("thead tr:last th\[tuidel!='false'\]", jqHead).remove();  
156.     // 对不需要合并的列增加rowSpan属性  
157.     oldThs.each(**function**() \{  
158.         **if** ($(**this**).attr("colSpan") == 1) \{  
159.             $(**this**).attr("rowSpan", 2);  
160.         \}  
161.     \});  
162.     **var** jqBody = $(**this**);  
163.     // 绑定拖动事件  
164.     $(document).bind("mouseup", **function**(e) \{  
165.         **var** ret = **true**;  
166.         **if** (resizing) \{  
167.             **var** parentTh = currentMoveObj.parent();  
168.             **var** currentIndex = parentTh.parents("tr").find("th").index(parentTh);  
169.             **var** width, diff;  
170.             **var** tbodyTd = $("tbody tr td", jqBody);  
171.             **var** currentTh = $("thead tr:first th", jqHead).eq(currentIndex);  
172.             // 先使用td的宽度，如果td不存在，则使用事件宽度  
173.             **if** (tbodyTd.length > 0) \{  
174.                 diff = 0;  
175.                 width = parseInt(tbodyTd.eq(currentIndex).css("width"));  
176.             \}  
177.             **else** \{  
178.                 diff = getEventPos(e).x - startX;  
179.                 width = parseInt(currentTh.css("width"));  
180.             \}  
181.             **var** lastWidth = diff + width;  
182.             currentTh.css("width", lastWidth + "px");  
183.             resizing = **false**;  
184.             ret = **false**;  
185.         \}  
186.         document.onselectstart = **new** Function("return true");  
187.         **return** ret;  
188.     \});  
189.     // 设置为已初始化  
190.     tuiJqgridColSpanInit\_kkccddqq = **true**;  
191.     // 适应不同浏览器获取鼠标坐标  
192.     getEvent = **function**(evt) \{  
193.         evt = window.event || evt;  
194.         **if** (!evt) \{  
195.             **var** fun = getEvent.caller;  
196.             **while** (fun != **null**) \{  
197.                 evt = fun.arguments\[0\];  
198.                 **if** (evt && evt.constructor == Event)  
199.                     **break**;  
200.                 fun = fun.caller;  
201.             \}  
202.         \}  
203.         **return** evt;  
204.     \}  
205.     getAbsPos = **function**(pTarget) \{  
206.         **var** x\_ = y\_ = 0;  
207.         **if** (pTarget.style.position != "absolute") \{  
208.             **while** (pTarget.offsetParent) \{  
209.                 x\_ += pTarget.offsetLeft;  
210.                 y\_ += pTarget.offsetTop;  
211.                 pTarget = pTarget.offsetParent;  
212.             \}  
213.         \}  
214.         x\_ += pTarget.offsetLeft;  
215.         y\_ += pTarget.offsetTop;  
216.         **return** \{ x: x\_, y: y\_ \};  
217.     \}  
218.     getEventPos = **function**(evt) \{  
219.         **var** \_x, \_y;  
220.         evt = getEvent(evt);  
221.         **if** (evt.pageX || evt.pageY) \{  
222.             \_x = evt.pageX;  
223.             \_y = evt.pageY;  
224.         \} **else** **if** (evt.clientX || evt.clientY) \{  
225.             \_x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);  
226.             \_y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);  
227.         \} **else** \{  
228.             **return** getAbsPos(evt.target);  
229.         \}  
230.         **return** \{ x: \_x, y: \_y \};  
231.     \}  
232. \};

[Center]: /images/20220714/cc3dfdf1428146a1a24a6e0652240b88.png
[SouthEast]: /images/20220714/e0e06b14420f4452ae57433364d6a120.png
[SouthEast 1]: /images/20220714/dd877975288d4dac89d9f35c6b1a4dcc.png
[view plain]: http://blog.csdn.net/saroot/article/details/5916120#