最近开始接触Jquery,接触了几款基于Jquery的列表,对比后还是觉得flexigrid更美观,郁闷的是网上发布的版本,功能还比较弱,好吧,那就自己动手呗~
修改 flexigrid.js
//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 += ' οnclick="'+ 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{// 有keytdValue = 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 οnclick=test2(this.id) style=width:10px;height:15px; class=tempClass>编辑</a>
* <a id=CflexiId_row.id οnclick=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~