easyui datagrid自定义按钮列,即最后面的操作列(第二种方法)

做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现

版本:jquery easyUI 1.3.2

之前已经用一种功能实现,主要是利用selectRow方法来实现.

第一种方法见:http://blog.csdn.net/thc1987/article/details/17305491

 

现在介绍另一种方法,代码量更少,更简洁易懂

首先看操作列函数

var that = this;function formatOper(val,row,index){return '<a href="#" onclick="'+FunUtil.createFun(that,'editUser',row)+'">修改</a>';}

这里多了一个FunUtil.createFun(that,'editUser',row);这样的东西,先不去管它,这个在后面介绍

然后看editUser函数

function editUser(row){//$('#dg').datagrid('selectRow',index);// 关键在这里//var row = $('#dg').datagrid('getSelected');if (row){$('#dlg').dialog('open').dialog('setTitle','修改学生信息');$('#fm').form('load',row);url = '${ctx}updateStudent.do?id='+row.id;}}

可以看到函数体内部前两句话已经注释掉了,参数也变了,直接传了一个row对象.是的,在这里就可以直接得到row了.

为什么能得到呢,就是因为FunUtil.createFun(that,'editUser',row);这句话.

FunUtil.createFun(scope,methodName,param);
第一个参数是被调用函数的作用域,这里就是that,也就是window作用域
第二个参数是函数名字,字符串形式,这里就是'''editUser'''
第三个参数是函数参数,这里是row对象

----------------------------------
再来说下它的实现原理:
用一个数组来保存函数句柄,然后我们通过数组的索引来获取对应的函数句柄(注意:这里的函数句柄已经包含了需要的参数)

 

最后贴上FunUtil.js代码:

/* 使用方法: FunUtil.createFun(scope,'some_mothod_name',obj1); FunUtil.createFun(scope,'some_mothod_name',obj1,obj2); ...*/var FunUtil = (function(){var index = 0; var handlerStore = []; // 存放方法句柄return {// scope:作用域// methodName:方法名,字符串格式// ...:参数可放多个createFun:function(scope,methodName){var currentIndex = index++; // 创建索引var argu = []; // 用来存放多个参数// 构建参数for(var i=2,len=arguments.length;i<len;i++){argu.push(arguments[i]);}// 把函数句柄存在数组里handlerStore[currentIndex] = (function(scope,methodName,argu){// 生成函数调用句柄return function(){scope[methodName].apply(scope,argu);}}(scope,methodName,argu));return 'FunUtil._runFun('+currentIndex+')';}// 执行方法// index:索引.根据这个索引找到执行函数,_runFun:function(index){var handler = handlerStore[index];handler();// 该函数已经传入了参数}};})();

 

更多关于FunUtil.js请前往:http://blog.csdn.net/thc1987/article/details/23166917