EasyUI——DataGrid的onClickRow事件

  在做高校云平台系统的评教子系统时,学生端有点击超链接实现跳转并传值到指定界面的功能。超链接实现起来并不复杂,但是考虑到学生操作起来的人性化设计,于是把超链接改为单机该行任意地方都可以达到单击超链接的效果,也就是能跳转到指定界面并传值。

  通过查看帮助文档,找到了onClickRow事件,在用户点击一行的时候触发,参数包括:

  rowIndex:点击的行的索引值,该索引值从0开始。

  rowData:对应于点击行的记录。

  我们可以通过rowData取到想要传递的值,然后将页面跳转到指定链接,js代码如下:

  

<span style="font-family:KaiTi_GB2312;font-size:18px;">        <script type="text/javascript" >
            $("#dg").datagrid({
                onClickRow: function (index, row) {  //easyui封装好的时间(被单机行的索引,被单击行的值)

                    //需要传递的值
                    var CourseName = row["CourseName"];
                    var TeacherCourseID = row["TeacherCourseID"];
                    var AssessStatus = row["AssessStatus"];
                    if (AssessStatus=="尚未评估") //如果该项尚未评估,则支持跳转到评估页面
                    {
                        var url = "../EvaluationStudentAssess/StudentAssess?CourseName=" + CourseName + "&TeacherCourseID=" + TeacherCourseID
                    }
                    else {  //如果该项以经评估则不需要跳转
                        var url = "../EvaluationStudentAssess/AssessStatus"
                    }

                    //通过Ajax传值
                    $.ajax({
                        url: url,
                        type: 'POST',
                        timeout: 100,

                        Error: function () {
                            alert(Error);
                        },
                        success: function () {
                            window.location.href = url
                        }
                    });
                }
            });
        </script></span>

  其实实现起来并不复杂,有很多时候我们多考录一些,就可以给用户带来永久的简单操作,全心全意为人民是每一个程序员都应秉行的宗旨。

  当然实现方法不止一种,以上是我个人想到的方法,有不足之处请大家批评指正,有其他方法欢迎随时交流。

时间: 2024-09-27 03:43:11

EasyUI——DataGrid的onClickRow事件的相关文章

jquery easyui datagrid 只有部分列的单元格调用单击单元格事件

问题描述 jquery easyui datagrid 只有部分列的单元格调用单击单元格事件 jquery easyui datagrid 只有部分列的单元格调用单击单元格事件. 比如有姓名,年龄,性别3列.我要点击姓名下的单元格执行一些方法,但点击年龄和性别下的单元格则不执行方法 解决方案 http://www.cnblogs.com/youring2/archive/2013/03/01/2938661.html 解决方案二: EasyUI Datagrid 自定义列.Foolter及单元格

jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码_jquery

1.先给出问题解决后的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%> <% String path = request.getContextPath(); S

easyui datagrid 编辑行后如何保存

问题描述 easyui datagrid 编辑行后如何保存 $(function () { var datagrid; //定义全局变量datagrid var editRow = undefined; //定义全局变量:当前编辑的行 datagrid = $("#dd").datagrid({ url: 'UserCenter.aspx', //请求的数据源 iconCls: 'icon-save', //图标 pagination: true, //显示分页 pageSize: 1

easyui datagrid分页问题

问题描述 easyui datagrid分页问题 easyui datagrid表格中分页选中,再回到前一页选中行也不会消失,怎么做? 解决方案 可以使用对话框,这样就不会跳转页面了. 解决方案二: 这是我前两天遇到的一个问题,在前台使用easyui的datagrid分页时,只能是每页显示10条数据,由于一些要求需要只显示5条数据,最初我看了easyui的一些文档,设置了 data-options="rownumbers:true,pagination:true,pageSize:5,pageL

easyui datagrid 中右键出现小菜单,怎么获取列的名称

问题描述 easyui datagrid 中右键出现小菜单,怎么获取列的名称 我用的onRowContextMenu方法,但是返回的是这一行的信息,我想获取这个单元格的信息,求大神指导下 解决方案 可以用rows.field 获取获得行数据不就是一个json对象么,json对象获取到键的值不就行了 解决方案二: var row =$('#billing_grid').datagrid('getSelected'); $('#tnum400').val(row.num400); 类似这个 解决方案

easyui datagrid,获取当前选中的列名

问题描述 easyui datagrid,获取当前选中的列名 我有一个可以编辑的DataGrid, 我想得到我现在鼠标焦点所处的列名,field.当还未处于编辑状态时,可以通过DataGrid的onClickCell事件来获取到field,在编辑状态的时候,怎么获取到field就是希望在鼠标点击格子之后,可以获取到当前的光标所处格子的字段名,field 解决方案 调用beginEdit后给所有编辑器添加click事件获取编辑器所在有field属性的td单元格,field值就是列名称 $('#dg

easyui datagrid 分页怎样更新page,rows参数

问题描述 easyui datagrid 分页怎样更新page,rows参数 第一次查询easyui datagrid显示正常,再次查询时,datagrid中的参数 page和rows还是 上次的值,怎样使datagrid更新传过来的page和rows参数. <table id="tt"></table> 用$('#tt').datagrid().datagrid('reload'); // reload the current page data 只能更新数据

easyui datagrid关于数据绑定的显示问题?

问题描述 easyui datagrid关于数据的显示问题有一个easyui datagrid需要显示的是系统用户的角色名称 但是角色的信息是在一个关联关系表中维护的 如何取到这个角色名称并显示在easyui datagrid的数据表格中 解决方案 $(function(){var lastIndex;$('#user').datagrid({url:'user/selectAll.action',columns : [ [ {title : 'User ID',field : 'id',wid

easyui datagrid文本框取值

问题描述 easyui datagrid文本框取值 实际金额我想在失去焦点就上传值,但是我不能得到这个文本框. 解决方案 $('#brandDg').datagrid({ url:'car/carAction!selectGoodsByBrabd', title:'品牌查看', fit:true, fitColumns:true, border: false, resizable:true, cache:false, loadMsg: '加载中...', singleSelect: true,