博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jqgrid 谈谈给表格设置列头事件、行事件、内容事件
阅读量:6004 次
发布时间:2019-06-20

本文共 2210 字,大约阅读时间需要 7 分钟。

往往我们需要给显示的jqgrid表格赋予事件功能,比如:列头事件、行事件、内容事件。需要的效果可能如下:

 如你所见,以上的超链接和按钮均是绑定的事件。那分别如何实现这些事件的绑定呢?

一、行事件

行事件:在每个行头部或尾部的事件。一般用于放置‘编辑’或“删除”按钮

在jqgrid中,行事件所在的列实际上也是一个绑定列,故可以把行事件的列看成和普通列字段一样来对待。

可以通过设置 formatter 来动态实现编辑区事件标签。

由于行事件可能需要传递当前行的其他列的值作为参数,可以通过 rowObject 来获取指定列的值。如:rowObject.Name 或 rowObject["Name"]

请参考以下代码块:

//初始化操作区所在列    var curRowF = {        //label: "操作区",//标签内容        label: '',        name: "actions",//字段编码        align: "center",//横向位置        sortable: false,//是否排序        hidden: false,//是否隐藏        frozen: true,//是否冻结        // width: 80,//列宽度        width: outEventArr.length * 30,//列宽度        formatter: function (cellvalue, options, rowObject) { return cellvalue; }    };    var formatRowFun = function (cellvalue, options, rowObject) {        var lbl = "";        if (outEventArr != null && outEventArr.length > 0) {            for (var j = 0; j < outEventArr.length; j++) {                var ev = outEventArr[j];                if (ev.EventType == "1")//为行事件时                {                    lbl += OutEventForLabel(ev, null, rowObject, cellvalue) + " ";                }            }        }        return lbl;    };
View Code

代码说明:OutEventForLabel 方法为我自己编写事件拼凑方法,可以根据自己项目实际需求去实现

二、列事件

列事件:附加在列名上的事件

直接在 colModel 对应列的 label 上去配置事件

colModel: [{ label: 'OrderID', name: 'OrderID', key: true, width: 75 }]
View Code

三、内容事件

内容事件:给jqgrid内容区域配置事件

内容事件配置需要依附在具体的某个列上,需要在 formatter 中配置生成事件

//拼凑内容事件的formatter函数        var formatFun = function (cellvalue, options, rowObject) {            //获取内容事件标签            //options.colModel.name为当前列的name名称            var evlb = OutEventForLabel(eval("event_" + options.colModel.name), null, rowObject, cellvalue);            if (evlb != null && evlb != "") {                return evlb;            }            return cellvalue;        };
View Code

由于内容事件的拼凑是动态的,需要事先定好是给那个列所在值拼凑事件,故我的写法,一个动态变量名:

OutEventForLabel(eval("event_" + options.colModel.name), null, rowObject, cellvalue);

 


结尾处给大家分享一个细节:

对于每个列字段的 formatter 方法,该部分函数实际上是在jqgrid的表格框架内容加载完毕后才执行的,也只有这样我们才能通过rowObject获取各行的其他列值。

故,在进行内容事件绑定时,我传递了一个代表是何列的参数变量到 OutEventForLabel 方法中,就是为了formatter 对应的列的值内容。

eval("event_" + options.colModel.name)

转载于:https://www.cnblogs.com/senyier/p/7325992.html

你可能感兴趣的文章
阿里云ApsaraDB RDS用户 - OLAP最佳实践
查看>>
菜鸟学Linux命令:Chmod命令和数字文件权限
查看>>
设置AFNetworking网络请求的超时时间
查看>>
从零开始的微信支付接入(一)用户认证
查看>>
linux何检查一个目录是否为空目录
查看>>
压缩介绍、bz2、gz、xz压缩工具
查看>>
StretchRect...果然和文档上说的一样
查看>>
Python成生随机KEY工具
查看>>
将一个数组拆分为几个至少三个元素的递增子序列
查看>>
备忘,解决WIN10下COM注册问题
查看>>
SAP移动解决方案在零售行业的应用方案及案例分享
查看>>
cx_Oracle install
查看>>
jquery ajax从后台获取数据
查看>>
基于Windows平台TSM 6.x版本下,如何删除初始化失败的实例。
查看>>
Start Code School Today!
查看>>
Nginx下载服务生产服务器调优
查看>>
RHEL6.5_KVM_VLAN_SET
查看>>
Windows下GCC编译环境中文乱码解决方案
查看>>
linux cut
查看>>
Linux 下JDK 安装
查看>>