flexigrid如何添加操作列

最近开始接触Jquery，接触了几款基于Jquery的列表，对比后还是觉得flexigrid更美观，郁闷的是网上发布的版本，功能还比较弱，好吧，那就自己动手呗~

修改 flexigrid.js

第一步：在//create grid class之前，添加如下代码：

//begin 初始化操作单元格信息

var actionsList = new Array();//保存操作单元格的列表

if(p.actions){

// 操作列支持多个操作按钮

for (i=0;i<p.actions.length;i++){

var actionString = '';// 保存操作单元格的字符串

actionString += p.actions[i].type ;

if(p.actions[i].type =="a"){

actionString += ' href="javascript:void(0)" ';// 超链接标签页面不重定向

}

if(p.actions[i].className){

actionString += ' class="'+ p.actions[i].className +'"';

}

if(p.actions[i].style){

actionString += ' style="'+ p.actions[i].style +'"';

}

if(p.actions[i].onclick){

actionString += ' onclick="'+ p.actions[i].onclick +'"';

}

actionsList.push(actionString);

}

}
//end 初始化操作单元格信息  
第二步： 生成td时，同时生成操作列；
在 $('thead tr:first th',g.hDiv).each 下的function  修改为如下：
$('thead tr:first th',g.hDiv).each
(

function ()

{

/*json格式 cell中无值的key，值在后台需要按照顺序排列{"total":25,"page":"1","rows":[{"id":25,

"cell":{25,北京,Key Account Manager/大客户经理（CFC）,面议,英语,2008-09-01}}*/

/*var td = document.createElement('td');

var idx = $(this).attr('axis').substr(3);

td.align = this.align;

td.innerHTML = row.cell[idx];

$(tr).append(td);

td = null;*/

/*json格式(同时兼容无key的json) cell中加上了值的key{"total":25,"page":"1","rows":[{"id":25,

"cell":{"id":25,"work_address":"北京","job_name":"Key Account Manager/大客户经理（CFC）","salary":"面议",

"language":"英语","date":"2008-09-01"}}*/

if(this.id == "gridActions" ){

var td = document.createElement('td');

td.align = this.align;

var tdActionsString = '';

for(var i=0;i<actionsList.length;i++){

tdActionsString += '<'+actionsList[i] +' id="CflexiId_'+row.id+'">'+p.actions[i].display+'</'+p.actions[i].type+'> ';

}

td.innerHTML = tdActionsString;

$(tr).append(td);

td = null;

}else{

var td = document.createElement('td');

td.align = this.align;

var tdValue = "";

//判断有无key

if( !row.cell[this.id]){

//兼容cell中无key的情况 

var idx = $(this).attr('axis').substr(3);

if(row.cell[idx])

tdValue = row.cell[idx];

else

tdValue="";

}else{

//有key

tdValue = row.cell[this.id];

}

td.innerHTML = tdValue;

$(tr).append(td);

td = null;

}

}

); 

flexigrid.js 代码修改完成。

现在我们开始按照设定的规则，添加操作列：

第一步： 创建操作列
======= 声明操作列名 ======此处用做操作的列id必须是 gridActions(用来区别数据列，其实也可以用另一个参数来区别，呵呵，偷个小懒~) ，否则无效=======
colModel : [

{display: '编号', name : 'id', width : 50, sortable : true, align: 'center',hide: false,toggle : false},

{display: '操作', name : 'gridActions',width : 80,sortable : false,align: 'center'}

],

第二步： 增加操作列显示内容的option
==== 此处action中display表示显示在操作列的内容，可以是image,a,button,input等=======
/*
* actions 属性说明 
* display ：显示内容（必填）    type：标签类型（必填）
*   onclick : 方法（选填）style：样式（选填）className：css样式类（选填）
* 下面例子在页面中输出结果是：<a id=CflexiId_row.id onclick=test2(this.id) style=width:10px;height:15px; class=tempClass>编辑</a>
* <a id=CflexiId_row.id onclick=test2(this) >编辑</a>
* !!!!!!row.id是此行数据的主键id，可在test2()方法中通过 this.id 获取到"CflexiId_row.id" 后自行解析
*/      
actions:[

{display:'编辑', type:'a', onclick:'test2(this.id)', style:'width:10px;height:15px;', className:'tempClass'},

{display:'编辑2', type:'a', onclick:'test2(this)', style:'', className:''}

],
其实很容易看出来，在拼装操作列内容的时候，我把该行数据的主键值，用id=“CflexiId_”+id的形式，存放到了操作按钮的主键中，方便使用。
另外有个在flexigrid中添加checkbox的方法，参考了ailinty的博文，给出链接http://blog.csdn.net/ailinty/article/details/7339489，感谢ailinty~