通过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. Web监控工具

    .Rabbitmq的使用及Web监控工具使用   一.文档资料        1.官方网站:http://www.rabbitmq.com/        2.安装教程:http://www.rabb ...

  2. SharePoint 2013 搜索SharePoint 特定列和特定文档(自己定义搜索)

    SharePoint 2013 搜索SharePoint 特定列和特定文档 1,操作步骤和图例,因语言和版本号的不同 我尽量使用抓图方式. 2.  In Central Administration, ...

  3. c++中&amp;和&amp;&amp;有什么差别

    他们不同点在于&&相当一个开关语句,就是说假设&&前面值为false那么他就不继续运行后面的表达式:而&无论前面的值为什么,总是运行其后面的语句. &能 ...

  4. JQuery日记6.5 Javascript异步模式(一)

    理解力JQuery前实现异步队列,有必要理解javascript异步模式. Javascript异步其实并不严重格异步感,js使某些片段异步方式在将来运行,流不必等待继续向下进行. 在多线程的语言中最 ...

  5. curl 简单使用

    cURL -- Command Line URL viewer -u username:password 以 Basic 方式发送用户名和密码 -d 以 POST 方式发送数据 -X 支持其它动词, ...

  6. Kafka集群在空载情况下Cpu消耗比较高的问题

    线上kafka与storm的空载情况下负载都比较高, kafka达到122%, storm平均负载达到, 20%,  当前是通过Ambari下管理kafka的, a. 先停止s5的kafka进程.b. ...

  7. Python 图论工具

    networkx: 一个用Python语言开发的图论与复杂网络建模工具, 内置了经常使用的图与复杂网络分析算法, 能够方便的进行复杂网络数据分析.仿真建模等工作. 依赖工具: numpy  pypar ...

  8. centos6的安装

      centos6的安装,一步一图,有图有真相     打开虚拟机VMware,点击文件,选择[新建虚拟机],如图所示

  9. C# 语言的两个html解析器

    基于C# 语言的两个html解析器   基于C# 语言的两个html解析器 1)Html Agility Pack http://nsoup.codeplex.com/ 代码段示例: HtmlDocu ...

  10. SVG 学习(一)

    SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Gr ...