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

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

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

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

第一步,需要在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>

easyui datagrid自定义操作列的更多相关文章

  1. 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能

    需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...

  2. easyui datagrid自定义按钮列,即最后面的操作列(转)

    做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jQuery easyUI 1.3.2 这里我的实现方式是采用HTML形式 ...

  3. easyui datagrid自定义按钮列,即最后面的操作列

    在很多时候我们要在表格的最后添加一列操作列,easyUI貌似没有提供种功能,不过没关系,我们可以自定义来实现首先是HTML部分 <table id="tt" class=&q ...

  4. (转)扩展jquery easyui datagrid 之动态绑定列和数据

    本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...

  5. WPF中使用DataGrid时操作列按钮问题

    在使用DataGrid的过程中,我们有时候需要对选取的某一行数据进行多个操作,这个时候操作列只有一个按钮显然无法满足我们的要求,我们需要多个按钮才能达到我们的目的. UI页面代码: <Grid& ...

  6. 扩展-Easyui Datagrid相同连续列合并扩展(一)

    一.autoMergeCellAndCells实现效果 调用方法: function onLoadSuccess(data){     $(this).datagrid("autoMerge ...

  7. EasyUI DataGrid 相同连续列合并

    扩展方法:$.extend($.fn.datagrid.methods, { autoMergeCells: function(jq, fields) { return jq.each(functio ...

  8. EasyUI Datagrid 自定义列、Foolter及单元格编辑

    1:自定义列,包括 Group var head1Array = []; head1Array.push({ field: 'Id', title: 'xxxx', rowspan: 2 }); he ...

  9. Easyui datagrid自定义排序

    做项目遇到个关于排序问题,想着在前端排序,正好Easyui有这个功能,所以就拿来用了一下,因为跟官网的Demo不太一样,所以总结一下: 首先这一列是要排序的列(当然,在生产环境,这一列是隐藏的,在开发 ...

随机推荐

  1. 关于JavaScript中计算精度丢失的问题

    摘要: 由于计算机是用二进制来存储和处理数字,不能精确表示浮点数,而JavaScript中没有相应的封装类来处理浮点数运算,直接计算会导致运算精度丢失. 为了避免产生精度差异,把需要计算的数字升级(乘 ...

  2. 如何利用【百度地图API】进行定位?非GPS定位

    原文:如何利用[百度地图API]进行定位?非GPS定位 如果你可以上网,如果你有火狐浏览器,那么恭喜你.你能很容易使用以下代码进行定位! ------------------------------- ...

  3. 所谓策略,我站在旁边看今天 神刻的样子O2O

    雕爷.何许人也? 卖牛腩的大叔? 卖精油的大爷?还是卖烤肉的家伙? 事实上以上答案都是肯定的,他就是阿芙精油,雕爷牛腩创业神话的缔造者.那么雕爷是怎样取得这种创业成功的呢?前段时间我还不清楚雕爷的厉害 ...

  4. 创建GitHub技术博客

    创建GitHub技术博客全攻略 githubio技术博客网站生成 说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比如姓名全拼,昵称全拼,如果被占用,可以加上有意义的数字.本 ...

  5. unity多边形uv地图

    我曾经写过一篇文章,不规则图形uv地图.(http://blog.csdn.net/itolfn/article/details/17240131)我用三角算法.但是,这种方法已经不完全,有一个指明: ...

  6. 一张地图,告诉你NodeJS命令行调试器语句

    NodeJS提供脚本调试. 进入node debug xx.js您可以进入调试模式. 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  7. 【麦子学院】OpenCV教程函数总结

    个自带样例. parter 1: No1. adaptiveskindetector.cpp 利用HSV空间的色调信息的皮肤检測,背景不能有太多与肤色相似的颜色.效果不是特别好. No2. bagof ...

  8. 探秘IntelliJ IDEA v13的应用服务器

    原文:探秘IntelliJ IDEA v13的应用服务器 IntelliJ IDEA v13应用out-of-the-box支持众多企业级和开源的服务器,包括:GlassFish.WebLogic. ...

  9. ASP.NET 5 Overview

    ASP.NET 5概观 (ASP.NET 5 Overview) http://www.asp.net/vnext/overview/aspnet-vnext/aspnet-5-overview AS ...

  10. Spring IOC之 使用JSR 330标准注解

    从Spring 3.0开始,Spring提供了对 JSR 330标准注解的支持.这些注解可以喝Spring注解一样被扫描到.你只需要将相关的Jar包加入到你的classpath中即可. 注意:如果你使 ...