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

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

版本:jquery easyUI 1.3.2

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

第一种方法见:http://blog.youkuaiyun.com/thc1987/article/details/17305491

 

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

首先看操作列函数

var that = this;
function formatOper(val,row,index){
	return '<a href="#" οnclick="'+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.youkuaiyun.com/thc1987/article/details/23166917