基于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);
    }

}

注释//Modified by me下面的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的代码插入功能，太难使了。

评论

1 楼 yanyanquan 2012-12-28  

有案例吗？？？弄个案例放在附件分享一下吧啊！