文档章节

给Jquery easyui 的datagrid 每行增加操作链接

Carl_
 Carl_
发布于 2015/11/13 10:52
字数 548
阅读 938
收藏 2

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

          bubuko.com,布布扣

  凡事都怕但是!Easy-UI的Datagrid没有直接添加link的属性。查看Easy-UI的帮助文档,看到一个formater:格式化函数,可以对某一行进行格式化,然后通过URL+ID的方式把页面跳转到新页面.


解决方法


  1、在需要添加超链接的列进行格式化处理(formater:格式化函数),如下:
    
<th data-options="field:‘Title‘,width:150,align:‘center‘,formatter: rowformater">消息名称</th>
  2、根据documentation的描述,formatter的格式化函数有3个parameters,分别是:
    value: the field value,也就是field:‘id‘。
    rowData: the row record data。就是这一行的Json数据,包括你已经选择在Datagrid上显示的内容,和没显示的内容。
    rowIndex: the row index.当前行的Index。
 通过这个函数来执行相应的javaScript函数就可以达到目的.

  3、脚本函数&前台代码

    <script type="text/javascript">
        //查看详情
        function rowformater(value, row, index) {
            return "<a href='NewsDetial.aspx?NoticeID=" + row.ID + "' target='_block'>" + row.Title + "</a>";
        }

    </script>
<table id="dg" title="已发布消息" class="easyui-datagrid" style="width: 1090px; height: 430px; padding-left: 200px;" data-options="rownumbers:true,url:'EasyUITotalNews.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],method:'get',toolbar:'#tb' ," toolbar="#toolbar" pagination="true" rownumbers="true" fitcolumns="true" striped="true" singleselect="true">

            <thead>
                 <tr>
                    <th data-options="field:'ck',checkbox:true"></th>
                    <th data-options="field:'ID',width:150,align:'center'">消息编号</th>
                    <th data-options="field:'Title',width:150,align:'center',formatter: rowformater">消息名称</th>
                    <th data-options="field:'PublishDepart',width:150,align:'center'">发送单位</th>
                    <th data-options="field:'ReceiveDepart',width:150,align:'center'">接收单位</th>
                    <th data-options="field:'PublishTime',width:150,align:'center'">发送时间</th>
                    <th data-options="field:'NoticeState',width:80,align:'center'">是否读取</th>
                </tr>
            </thead>
        </table>


  4、效果

      bubuko.com,布布扣


小结

  由于Easy-UI本身就是Jquery封装的库,所以其本质还是javascript.虽然本身没有link属性,但是通过其定义的属性或是方法,按照其格式构造一个javascript函数语句即可。



本文转载自:http://www.bubuko.com/infodetail-286226.html

共有 人打赏支持
Carl_
粉丝 40
博文 387
码字总数 12168
作品 0
广州
私信 提问
jQuery EasyUI DataGrid Checkbox 数据设定与取值

有关 jQuery EasyUI DataGrid 的相关资料,可以前往官网查看, jQuery EasyUI 官网 jQuery EasyUI Documentation DataGrid Demo CheckBox select on DataGrid...

Amamatthew
2014/10/10
0
0
jQuery Easyui datagrid对可编辑列的级联操作 ..

jQuery Easyui datagrid对可编辑列的级联操作 .. 编辑行的级联操作,关键点是要获取到到当前编辑行需要级联的列的Editor对象。 获取级联列Editor对象的步骤: 获取当前编辑行(基本上就是grid当...

夏悸
2012/11/07
0
0
qury-easyui DataGrid 整合struts2增删查该入门实例(三)

主界面 添加 修改 删除 查询暂时按照单字段id查询 页面主要代码easyDemo1.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getConte......

一念三千
2012/11/01
0
0
jquery jsp 获取被选中的数据中的日期值

$(function(){ $('#xmhk').datagrid({ url:'../json/getCashList.jsp', iconCls:'icon-save', nowrap: false, striped: true, collapsible:true, remoteSort: false, fitColumns: true, sort......

wenwen1
2012/08/27
2.1K
1
JQuery EasyUi之界面设计——前言与界面效果(一)

如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢?主...

易水寒丶开源
2015/10/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Httpd 整合 Tomcat 步骤

环境:Tomcat8 + Httpd2.4 工作原理:借助于Tomcat的AJP连接器实现Apache与Tomcat的通信 配置步骤: 1. 配置httpd.conf 新增: Include conf/extra/mod_jk.conf 修改:添加 index.jsp <IfM...

ZeroneLove
昨天
1
0
Docker笔记3——容器命令(未写完,明天整理接着写)

未写完,明天整理接着写 新建并启动容器 docker run docker run [OPTIONS] IMAGE [COMMEND] [ARG...] OPTIONS: --name=[容器新名字] :为容器指定一个名称 -d:后台运行容器,并返回容器ID,...

HappyBKs
昨天
1
0
2018个人年终总结

感谢领导的信任和指导,新的一年获得了很多成长和提高,改掉了很多不好的习惯。 在这一年里,我在领导的帮助下,主要完成了以下功能: 1、完成上海银行版本投资营销相关功能的开发。 2、完成车...

万山红遍
昨天
9
0
保密工作与linux系统的发展

保密工作从性质上可以分成商业方面的保密和国家安全方面的保密。由于自己从事的是IT方面的工作,工作中必然会接触涉及到计算机信息方面的相关文件。加上单位已近通过武器装备科研生产单位二级...

linux-tao
昨天
2
0
Spark共享变量

概述 Spark程序的大部分操作都是RDD操作,通过传入函数给RDD操作函数来计算。这些函数在不同的节点上并发执行,但每个内部的变量有不同的作用域,不能相互访问,所以有时会不太方便,Spark提...

仟昭
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部