博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jqgrid 谈谈给表格设置列头事件、行事件、内容事件
阅读量:6005 次
发布时间: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

你可能感兴趣的文章
搜索引擎-倒排索引基础知识
查看>>
baby用品
查看>>
Jquery解析Json格式数据
查看>>
数据加密插件
查看>>
一款很不错的html转xml工具-Html Agility Pack
查看>>
linux安装中文输入法
查看>>
怎样用Java编写一段代码引发内存泄露
查看>>
2012年终总结
查看>>
eclipse导出jar包
查看>>
windows系统下利用MySql命令行进入MySql数据库
查看>>
如何隐藏日历列表的重复和全天事件栏目-方法2
查看>>
Java NIO与IO的差别和比較
查看>>
HTTP/1.1 中 If-Modified-Since 和 If-Unmodified-Since 区别简记
查看>>
怎样炒掉你的创业合作伙伴?
查看>>
[计算机图形学] 基于C#窗口的Bresenham直线扫描算法、种子填充法、扫描线填充法模拟软件设计(一)...
查看>>
UNICODE编码表
查看>>
hadoop Mahout中相似度计算方法介绍(转)
查看>>
C语言嵌入式系统编程修炼之(三)内存操作
查看>>
IE和Firefox的Javascript兼容性总结
查看>>
c++ _int64 转成string
查看>>