easyUI datagrid最后操作列的实现总结

迈不过友情╰ 2022-08-03 11:55 302阅读 0赞

使用easyUI的童鞋们大多都会发现，通常在数据遍历完成后，无法在最后一列做相关操作，虽然easyUI本身有自己的增删改查按钮 ，但有时候为了美观，通常将操作放在最后一列来实现。

好了，废话不多说，接下来让我们看下具体怎么自定义操作列

首先我们先要在界面上添加操作这一列，代码如下

橙色的那一行就是我们的操作列了，这里我们主要说下formatter函数，一般formatter函数有三个参数

function formatOper(val, row, index) 
    {
    	 return '<a href="javascript:void(0)"  value="授权" οnclick="aclRole('+index+')"><img src="js/acl.png"/></a>';  
    }

val 当前列对应的字段值      row当前的行纪录数据    index当前行的下标      这个方法返回的是一个<a>标签的链接    在这里，我们可以写很多

比如<input   type="button"  value="授权"></input>  到这里呢，其实我们的界面上就已经出现操作那一列了。

接下来我们要做的就是给这个图片加上跳转的路径

我这里调用的是aclRole这个方法，有一点值得注意的是，在return返回的字符串中赋值要通过‘+index+',这种方式来传。

在接下来，我们来看看aclRole()这个方法

function aclRole(index)
    {
    	 $('#list_data').datagrid('selectRow',index);// 关键在这里  
    	var rows = $("#list_data").datagrid("getSelections");
    	    if (rows.length==1){  
    		    $('#dlg').window('center');
    			$("#dlg").dialog("open").dialog('setTitle', '角色授权');
    			var aclPath="toAuthFrame.action?principalType=Role&principalSN="+rows[0].oid;
    		    document.getElementById("iframe").src=aclPath; 
    	    }  
    }

这里我们传了个index参数过来，上面已经说过了，index就是当前行的下标，这样我们就能实时的获取到我们所修改的是哪一行的数据。
    到此，我们的操作列的制作就完成了。