基于jQuery的表格插件flexigrid 扩展:为列增加checkbox
关于flexigrid:基于jQuery的datagrid插件。http://www.flexigrid.info/
基本使用就不说了,看官网。这篇文章主要总结一下自己在使用中的一些心得,首先是对flexigrid进行简单的扩展,比如将某个数据列显示为一个checkbox.
要点,也就是主要修改的地方如下:
1.colModel--flexigrid用来表头的模型,我们将在为之新增一个checkbox属性作为标识,若为true,则将这一列显示为checkbox。用ctrl+f找到这段代码(为什么用Ctrl+F?很明显写这插件的哥们儿很喜欢超长的函数,以至于这种独立的功能他都仅仅是加了一个注释而已):
//create model if any if (p.colModel) { thead = document.createElement('thead'); tr = document.createElement('tr'); for (i=0;i<p.colModel.length;i++) { //此处即对colModel的处理。省略代码若干.... //Modified by me. if (cm.checkbox){ $(th).attr('checkbox',cm.checkbox); } $(tr).append(th); } }
注释//Modifiedbyme下面的if段,即是我们要做的修改,很明了,我们将为th添加一个'checkbox'属性,如果用户在colModel中设置了这一属性的话。
2.找到创建每个单元格的代码,稍作修改,判断单元格所在列的表头是否有checkbox属性,若有,则在单元格内创建一个checkbox。
继续Ctrl+F找到下面这段代码
//add cell $('thead tr:first th',g.hDiv).each ( function (){ //继续省略代码 if($(this).attr('checkbox')){ td.innerHTML = "<input type='checkbox' />"; }else{ td.innerHTML = row.cell[idx]; } }
循环体中的代码就是对每一列的单元格进行渲染了。代码依旧很简单,对应的表头有'checkbox',就显示成checkbox,否则就显示对应的数据值。
到此为止呢,如果你手头有测试数据的话,就可以看到我们的checkbox已经出来了,接下来还有一点小问题,请继续往下看。
3.需要某一行被选中时,该行内的checkbox也应该被打上勾,同样的,勾选checkbox时,应当所在行的样式变为选中。
继续Ctrl+F($(this).toggleClass('trSelected')),找到下面这段
$('tbody tr',g.bDiv).each ( function () { $(this) .click( function (e) { var obj = (e.target || e.srcElement); if (obj.href /*这里的判断条件修改了一下,使得checkbox的点击事件不被拦截掉*/) return true; $(this).toggleClass('trSelected'); //这里的修改使checkbox的选中状态与行的trSelected css保持同步. var isSelected = $(this).hasClass("trSelected"); $(this).find("input[type='checkbox']").each(function() { isSelected ? $(this).attr("checked","checked") : $(this).removeAttr("checked"); }); if (p.singleSelect) { $(this).siblings().removeClass('trSelected') .find("input[type='checkbox']").removeAttr("checked"); } } )
OK,到此为止,完成任务。
使用方法呢,就是这个样子
$("#customer_flexigrid").flexigrid({ colModel: [ { display: 'Select', name: 'id', width: 40, align: 'center', checkbox:true}, ], //其他配置省略
这只是一个简单的例子,事实上用同样的思路,我们可以把单元格表现成任意的形式。
最后吐槽一下JE的代码插入功能,太难使了。