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. 51Nod 1090: 3个数和为0

    1090 3个数和为0  基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 给出一个长度为N的无序数组,数组中的元素为整数,有正有负包括0,并互不相等. ...

  2. UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等)

    UWP 中使用 WebView 时可以在网页中额外执行一些代码.于是你几乎可以在网页上做任何事情,那些你可以在浏览器控制台中做的事情. 本文将介绍做法. 本文内容 准备环境 执行 JavaScript ...

  3. The Alphabet Sticker

    题目大意:给你一串字符串,其中有一部分未知,用'?'表示. 现在定义一种合法的Sticker,比如"aabcc","ccccab".即所有相同的字母要在一起才是 ...

  4. HTML第二课——css【2】

    请关注公众号:自动化测试实战 现在继续上一节课的内容,看下面代码: <!DOCTYPE html><html><head>    <meta charset= ...

  5. pandas 基础用法

    pandas 是一个基于 Numpy 构建, 强大的数据分析工具包 主要功能 独特的数据结构 DataFrame, Series 集成时间序列功能 提供丰富的数学运算操作 灵活处理缺失数据 Serie ...

  6. stenciljs 学习十一 pwa 支持

    stenciljs 对于pwa 的支持是自动注入的,我们只需要简单的配置,stenciljs使用workbox 配置 默认配置 { skipWaiting: true, clientsClaim: t ...

  7. 根据IP获得城市信息(百度API的运用)

    /**      * 根据IP获取城市      * @param string $ip ip地址      * @return array      * http://api.map.baidu.c ...

  8. 时间操作(JavaScript版)—年月日三级联动(默认显示系统时间)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/35263317         这个功能 ...

  9. TensorFlow笔记-05-反向传播,搭建神经网络的八股

    TensorFlow笔记-05-反向传播,搭建神经网络的八股 反向传播 反向传播: 训练模型参数,在所有参数上用梯度下降,使用神经网络模型在训练数据上的损失函数最小 损失函数:(loss) 计算得到的 ...

  10. hadoop yarn 知识点

    yarn 简介: Yarn是一个分布式的资源管理系统,用以提高分布式的集群环境下的资源利用率,这些资源包括内存.IO.网络.磁盘等.其产生的原因是为了解决原MapReduce框架的不足.最初MapRe ...