开发学院网页设计 JavaScript 基于jQuery的GridView-Flexigrid(2)-扩展和修复阅读

基于jQuery的GridView-Flexigrid(2)-扩展和修复

　2009-11-14 00:00:00　来源：WEB开发网　闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷

闂傚倸鍊搁崐椋庣矆娓氣偓楠炲鏁撻悩鎻掔€梺姹囧灩閻忔艾鐣烽弻銉︾厵闁规鍠栭。濂告煕鎼达紕校闁靛洤瀚伴獮鎺楀箣濠靛啫浜鹃柣銏⑶圭壕濠氭煙閻愵剚鐏辨俊鎻掔墛缁绘盯宕卞Δ鍐冣剝绻涘畝濠佺敖缂佽鲸鎹囧畷鎺戭潩閹典焦鐎搁梻浣烘嚀閸ゆ牠骞忛敓锟�

婵犵數濮烽弫鍛婃叏椤撱垹绠柛鎰靛枛瀹告繃銇勯幘瀵哥畼闁硅娲熷缁樼瑹閳ь剙岣胯鐓ら柕鍫濇偪濞差亜惟闁宠桨鑳堕崝锕€顪冮妶鍡楃瑐闁煎啿鐖奸崺濠囧即閵忥紕鍘梺鎼炲劗閺呮稒绂掕缁辨帗娼忛埡浣锋闂佽桨鐒﹂幑鍥极閹剧粯鏅搁柨鐕傛嫹闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷　　闂傚倸鍊搁崐鐑芥嚄閼哥數浠氱紓鍌欒兌缁垶銆冮崨鏉戠厺鐎广儱顦崡鎶芥煏韫囨洖校闁诲寒鍓熷铏圭磼濡搫顫岄梺鍦拡閸嬪棝鎯€椤忓浂妯勯梺鍝勬湰濞叉ḿ鎹㈠┑濠勭杸闁哄洨濮烽悰銉╂⒒娴ｅ搫甯跺鐟帮攻缁傚秴饪伴崼姘ｅ亾閺冨牆绀冩い蹇庣娴滈箖鏌ㄥ┑鍡涱€楀褜鍠栭湁闁绘ɑ鐟ョ€氼喚绮绘ィ鍐╃厱妞ゆ劑鍊曢弸搴ㄦ煟韫囧鍔滈柕鍥у瀵潙螣閸濆嫬袝婵＄偑鍊戦崹娲偡閳哄懎绠栭柍鈺佸暞閸庣喖鏌曢崶褍绨婚柟鍑ゆ嫹

核心提示：第一项：自然是重新定义的皮肤这些只需修改对饮的CSS即可实现，只是非常长，基于jQuery的GridView-Flexigrid(2)-扩展和修复，就不贴出来了，有兴趣有耐心的朋友可以去研究下代码，这里有个性能问题，即每次循环数据行都要检索列头，第二项：在首列添加一个checkbox列1：首先在参数中添加一个showc

第一项：自然是重新定义的皮肤

这些只需修改对饮的CSS即可实现，只是非常长，就不贴出来了，有兴趣有耐心的朋友可以去研究下代码。

第二项：在首列添加一个checkbox列

1：首先在参数中添加一个showcheckbox的参数

2：然后再输出头时判断该属性，如果为真则输出一个列包含checkbox（用于全选）

1.if　(p.showcheckbox)　{ 2.　　　　　　var　cth　=　$('<th/>'); 3.　　　　　　var　cthch　=　$('<input　type="checkbox"/>'); 4.　　　　　　cthch.addClass("noborder") 5.　　　　　　//给该列添加一些自定义的属性，在生成数据行时需要用到这些属性 6.　　　　　　cth.addClass("cth").attr({　'axis':　"col-1",　width:　"22",　"isch":　true　}).append(cthch); 7.　　　　　　$(tr).append(cth); 8.　　}

3：然后在生成数据行时通过，因为数据行的生成的依据完全是根据thead中th的属性来创建的，这样我们可以通过上面设置的isch属性在制定的列上创建checkbox列

01.$.each(data.rows,function(i,row)　//循环数据行 02.{ 03.　var　tr　=　document.createElement('tr'); 04.　if　(i　%　2　&&　p.striped)　tr.className　=　'erow'; 05.　if　(row.id)　tr.id　=　'row'　+　row.id; 06.　　$('thead　tr:first　th',g.hDiv).each(　//获取列头,循环列头来生成数据单元格，这里有个性能问题，即每次循环数据行都要检索列头，事实上没有必要 07.　　　　function　(){...}); 08.　...　 09.});

4:设置checkbox头列不参与拖拽列

编缉推荐阅读以下文章