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

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

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

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

	<table id="list_data" title="角色信息" >
		<thead>
			<tr>
				<th  field="roleName" width="93%">角色名称</th>
				<span style="color:#ff9900;"><th data-options="field:'_operate',width:102,align:'center',formatter:formatOper" width="4%">操作</th></span>
			</tr>
		</thead>
	</table>

橙色的那一行就是我们的操作列了，这里我们主要说下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就是当前行的下标，这样我们就能实时的获取到我们所修改的是哪一行的数据。
到此，我们的操作列的制作就完成了。