easyui datagrid自定义操作列

时间:2023-03-09 20:35:21
easyui datagrid自定义操作列

通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接

我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar,

这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作。

但实际项目里我们可能需要在每行后面加一些操作链接,比如“修改”、“删除”、“查看”之类。如下图:

easyui datagrid自定义操作列

第一步,需要在datagrid行里添加一列,fieid指向id(fieid:'id'),

然后对这列进行格式化处理(formater:格式化函数),如下:

<th data-options="field:'ID',width:60,align:'center',formatter:formatOper">操作</th>

第二步,formatter的格式化函数有3个参数,分别是:

value:字段的值,也就是fidid:'id'.

rowData:行数据,就是一行的JSON数据.

rowIndex:行索引,当前行的Index.

所以需要一个formatOper函数,只做一个简单的返回

<script type="text/javascript">
function formatOper(val,row,index){
return '<a href="'+row["ID"]+'">修改</a>';
}
</script>