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

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

          

  凡事都怕但是!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、效果

小结

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

时间: 2024-12-28 21:29:20

给Jquery easyui 的datagrid 每行增加操作链接的相关文章

jQuery EasyUI的DataGrid 数据行上右键问题

如下图:我想查看单行数据(如ID为20)的右键上获取该行的值,代码: JavaScript code <script type="text/javascript"> $(function(){ $('#test').datagrid({ title:'DataGrid数据列表', iconCls:'icon-grid', fit:true, collapsible:true, closable:true, nowrap: false, animate:true, url:

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

为easyui的datagrid.treegrid增加表头菜单,用于显示或隐藏列 /** * @author 孙宇 * * @requires jQuery,EasyUI * * 为datagrid.treegrid增加表头菜单,用于显示或隐藏列,注意:冻结列不在此菜单中 */ var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* grid本身 */ var

JQuery EasyUI的datagrid的使用方式总结

JQuery EasyUI的datagrid的使用方式总结第一步:添加样式和js脚本在前台添加展示数据表格的table元素 例如: <div> <table id="tt" style="width: 700px;" title="标题,可以使用代码进行初始化,也可以使用这种属性的方式" iconcls="icon-edit"> </table> </div> 注:表格的属性可以

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

需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,2000-12-09 :12:34:56 Jquery Easyui DataGrid中列设置 { field: 'Name', title: '名称', width: 120 ,align:left},{field: 'Age', title: '年龄', width: 120 ,align:right

jQuery EasyUI之DataGrid使用示例

jQuery EasyUI是一个轻量级的Web前端开发框架,提供了很多的现成组件帮助程序员减轻前端代码开发量,之前有个项目中就用到了其中的DataGrid. jQuery EasyUI框架的官方主页:http://www.jeasyui.com/demo/main/index.php.可以下载完整开发包,里面有示例代码可以参考. 由于我使用的是ASP.NET webform技术,下面我就贴出主要的代码以供参考. 在页面中首先要引用相关的css以及js文件,这样才能使用该组件. css部分:  <

雷林鹏分享:jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用

当切换数据网格视图(datagrid view)到 'detailview',用户可以展开一行来显示一些行的明细在行下面.这个功能允许您为防止在明细行面板(panel)中的编辑表单(form)提供一些合适的布局(layout).在本教程中,我们使用数据网格(datagrid)组件来减小编辑表单(form)所占据空间. 步骤 1:在 HTML 标签中定义数据网格(DataGrid) url="get_users.php" toolbar="#toolbar" fitC

jQuery EasyUI 在datagrid上使用combotree 进行多选

datagrid本身有编辑功能,根据官方说明,在需要编辑的列上,加上editor 属性即可.具体的类型有以下几种: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. 最近想利用combotree实现一个可以多选的树,途中遇到一些问题,放到这里分享一下: 1. 基本写法: editor="{type:'combotree',options:{url:'datagrid_data.json',multip

easyUI的datagrid每行数据添加操作按钮的方法

今天做项目的时候,想在easyui的datagrid每一列数据后边都加上一个操作按钮,一开始想在后台拼接字符串用JSON传回,但是我测试之后发现这个方法不管用,在网上搜索了一下,整理如下: 其实要加一行自定义列很简单,在js声明datagrid的时候加上如下代码 [javascript] view plain copy {field:'operate',title:'操作',align:'center',width:$(this).width()*0.1, formatter:function(

jQuery easyUI 使用 datagrid 表格

获取后台数据依旧是使用一般处理程序(ashx) ,分页上添加一个函数(pagerFilter(data)) 前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dataGrid.aspx.cs" Inherits="Web.Management.dataGrid" %> <!DOCTYPE html> <html xmln