jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码


Posted in Javascript onDecember 05, 2016

在使用JqGrid时,Table中最后一列是操作列,在操作列中每一行都一个操作按钮,该操作按钮类似下拉菜单,如下图:

jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码

在点击Table中【操作】一列时需要弹出一个Div层,该Div层中包含一堆按钮,用于对Table行进行操作,如下:

jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码

解决步骤如下:

1、首先,在colModel中的列上添加属性edittype:'select'和方法formatter:groupGrid.formatOptions,如下图:

jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码

方便复制,代码如下:

{label:'操作',name: 'operations',index: 'operations',width: 80, sortable: false,align:'center',cellattr: addCellAttr, 
editable:true,edittype:'select',formatter:groupGrid.formatOptions 
}

formatOptions方法如下图,方法中拼接了html代码:

jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码

说明:其中的单引号我使用了"\"进行转义。请求URL中的参数值从rowObject中获取。

2、其次,以上代码添加好后Table中处理操作按钮,但仅仅是操作按钮,在点击【操作】按钮的时候弹出层被Table的行所遮住了,即在Table行下层弹出,所以并不能看到想要的弹出层,这是JqGrid留下的坑,经过几番论战与挣扎后发现需要自己去设置CSS样式。

解决办法如下:

A、添加属性cellattr,其值设置为“addCellAttr”,即:

cellattr: addCellAttr

jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码

B、编写addCellAttr方法事件,如下图:

jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码

方便复制,代码如下:

function addCellAttr(rowId, val, rawObject, cm, rdata) { 
return "style='overflow: visible;'"; 
}

添加好后实现的效果如下所示:

jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码

以上所述是小编给大家介绍的jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
js中apply和call的理解与使用方法
Nov 27 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
jquery删除数组中重复元素
Dec 05 #Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 #Javascript
DOM 事件的深入浅出(二)
Dec 05 #Javascript
vue.js指令v-model实现方法
Dec 05 #Javascript
DOM 事件的深入浅出(一)
Dec 05 #Javascript
使用微信小程序开发前端【快速入门】
Dec 05 #Javascript
学习vue.js表单控件绑定操作
Dec 05 #Javascript
You might like
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
python中的decorator的作用详解
2018/07/26 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
Python如何读取、写入JSON数据
2020/07/28 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
C#面试题
2016/05/06 面试题
人事专员工作职责
2014/02/22 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python