http://www.thinkphp.cn/code/207.html

通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接
我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar，这样我们选择一行然后选择toolbar的相应按钮就可以对这行的数据进行操作。但实际项目里我们可能需要在每行后面加一些操作链接，最常见的就是比如“修改”、“删除”、“查看”之类。如下图：

这是个很实用的功能，但是搜索了一下，好像也没见到谁写过，我就找了Easyui的document，随便写一下，抛砖引玉。

思路：一般来讲，增加操作链接就是要用URL+ID的方式把页面跳转到新页面，所以需要在正常输出的一行后面加一列操作列用来显示操作链接。Easyui的Datagrid没有直接添加link的属性，所以我需要格式化一下这一“操作”列的输出。

解决方法：

第一步，我需要 在datagrid行里添加一列，field指向id（field:'id'），然后对这列进行格式化处理（formater：格式化函数），如下：

  1. <th data-options="field:'id',width:180,formatter:  rowformater">操作</th>
复制代码

第二步：
根据documentation的描述，formatter的格式化函数有3个parameters，分别是：
value: the field value，也就是field:'id'。
rowData: the row record data。就是这一行的Json数据，包括你已经选择在Datagrid上显示的内容，和没显示的内容。因为我的Json数据里包括了Id这一内容，所以我可以直接调用。如果你作为数据源的Json里没有Id属性，需要修改一下Json的输出。我的每行Json输出是类似{"id":"1","name":"\u7ecf\u6d4e\u53d1\u5c55","parentId":"0"}的结构
rowIndex: the row index.当前行的Index。

所以我写rowformater这个函数的时候，也需要用function rowformater(value,row,index)的方法。为了看起来清晰明白，我只在函数里写了一句话（放在<head>标签里），事实上项目上需要做一些基本的判断。：

  1. <script type="text/javascript">
  2. function rowformater(value,row,index)
  3. {
  4. return "<a href='"+row.id+"' target='_blank'>操作</a>";
  5. }
  6. </script>
复制代码

OK，应该能跑起来了。跑出的结果就是上面的截图样式。

注意：自己做了以后发现，如果UI中一行的多个列需要用到数据源中的同一列，那么可能会有问题，需要把这UI中的多个列并到同一列中，共同使用数据源中的这同一列。

给Jquery easyui 的datagrid 每行增加操作链接(转)的更多相关文章

  1. 给Jquery easyui 的datagrid 每行添加操作链接

    背景 我们都知道Jquery的Easy-UI的datagrid能够加入而且自己定义Toolbar,这样我们选择一行然后选择toolbar的对应button就能够对这行的数据进行操作.但实际项目里我们可 ...

  2. [Easyui - Grid]为easyui的datagrid、treegrid增加表头菜单，用于显示或隐藏列

    为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid. ...

  3. 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  4. JQuery EasyUI的datagrid的使用方式总结

    JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt& ...

  5. 雷林鹏分享：jQuery EasyUI 数据网格 - 启用行内编辑

    jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...

  6. JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)

    需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...

  7. jQuery EasyUI之DataGrid使用示例

    jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页: ...

  8. 雷林鹏分享：jQuery EasyUI 数据网格 - 扩展行显示细节

    数据网格(datagrid)可以改变它的视图(view)来显示不同的效果.使用详细视图,数据网格(datagrid)可以在数据行的左边显示展开按钮("+" 或者 "-&q ...

  9. JQuery EasyUI中datagrid的使用

    在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...

随机推荐

  1. BZOJ4403: 序列统计【lucas定理+组合数学】

    Description 给定三个正整数N.L和R,统计长度在1到N之间,元素大小都在L到R之间的单调不降序列的数量.输出答案对10^6+3取模的结果. Input 输入第一行包含一个整数T,表示数据组 ...

  2. HPU 1437: 王小二的求值问题

    1437: 王小二的求值问题 时间限制: 1 Sec 内存限制: 128 MB提交: 141 解决: 31 统计 题目描述 题意超级简单,求一个序列的次大值. 输入 多组输入,每个测试实例占两行,包括 ...

  3. 51Nod：1003 阶乘后面0的数量

    1003 阶乘后面0的数量  基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 n的阶乘后面有多少个0? 6的阶乘 = 1*2*3*4*5*6 = 72 ...

  4. jQuery插件制作方法详解

        jQuery插件制作方法详解   jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...

  5. LG2521 [HAOI2011]防线修建

    题意 题目描述 近来A国和B国的矛盾激化,为了预防不测,A国准备修建一条长长的防线,当然修建防线的话,肯定要把需要保护的城市修在防线内部了.可是A国上层现在还犹豫不决,到底该把哪些城市作为保护对象呢? ...

  6. JS 网页快捷键设置

    我们希望能用快捷键代替鼠标点击做一些事情,例如一个典型的应用就是论坛上常用的Ctrl + Enter 快捷发帖子.就以Ctrl+Enter快捷发帖子为例,实质上呢,就是通过JS脚本,捕获系统的onke ...

  7. c++标准库的所有类型

    标准库的组成:    前言就到此为止.从最宏观的层面上看,C++标准库由十个部分组成:语言支持.诊断.通用工具.字符串.本地化.容器.迭代器.通用算法.数值算法和I/O. 头文件组成:    C++ ...

  8. 【转】每天一个linux命令（13）：less 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/05/2754477.html less 工具也是对文件或其它输出进行分页显示的工具,应该说是lin ...

  9. spring 注解列表

    table th:first-of-type { width: 15%; } table th:nth-of-type(2) { } 注解 作用 例子 @SuppressWarnings 忽略警告 类 ...

  10. FineUI Grid中WindowField根据列数据决定是否Enalble

    前台页面Grid控件中设置OnPreRowDataBound属性,windowFile控件设置ID protected void Grid1_PreRowDataBound(object sender ...