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

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

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

解决步骤如下:

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

方便复制,代码如下:

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

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

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

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

解决办法如下:

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

cellattr: addCellAttr

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

方便复制,代码如下:

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

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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery点击按钮弹出层、jquery按钮点击事件、jquery点击弹出大图、jquery点击弹出窗口、jquery 点击按钮,以便于您获取更多的相关知识。

时间: 2024-11-06 07:10:38

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

jQuery点击按钮弹出遮罩层且内容居中特效_jquery

本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮.一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devic

jQuery实现点击文本框弹出热门标签的提示效果_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现点击

页面中点击鼠标右键----弹出与windows界面相似的菜单

window|菜单|页面 想在Web Form中做出与windows中相似的菜单,可是发帖问人又没人回,自己摸索郁闷了一天之后,终于在MSDN中找到了相似的方法,具体如下: (下面的代码帖到记事本能直接运行查看) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML xmlns:MSHelp=http://msdn.microsoft.com/msHelp><HEAD>

jsp-在一个div中点击增加按钮弹出另个div

问题描述 在一个div中点击增加按钮弹出另个div 集体的效果如图所示,请大神们帮帮我! 解决方案 建议用插件blockUi来实现,很好用,博主可以试试 解决方案二: http://blog.csdn.net/tolcf/article/details/38712343 解决方案三: 设置点击事件,点击触发,让另一个 相关文章 id 成数组的传值-jsp弹出框传值问题(一个jsp 点击按钮弹出另一个jsp,选中记录带回数据显示在指定框中) 数据库-在一个jsp页面中,点击一个按钮,弹出另一个js

spring mvc-求助:哪位大神帮我实现下点击修改按钮弹出弹框并且里面自动获取值

问题描述 求助:哪位大神帮我实现下点击修改按钮弹出弹框并且里面自动获取值 我用的是hibernate+springMvc+maven实现的demo想要点击首页列表显示的数据后面的修改按钮可以弹出一个弹框,弹框力量有input文本框 ,弹框出现的时候里面自动有要修改的那一条数据的值页面: <%@ page language=""java"" import=""java.util.*"" contentType="

ava cript-JavaScript点击按钮弹出一个可操作窗口或表格

问题描述 JavaScript点击按钮弹出一个可操作窗口或表格 如图所示,我在元器件里面会输入几个名称,比如:a;b;c;d;e;.现在想点击焊点高度按钮时,窗口中可以弹出一个新窗口或者表格,里面的格式是两列,第一列是元器件的几个名称(读取上面的a;b;c;d;e),第二列就是焊点高度在第二列中我可以人为去输入值.这些做好以后,我想再这些高度值读取到另一个txt文本中去.不知道我这种想法是否能够实现? 解决方案 元器件:<input type=""text""

遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)_jquery

首先给大家展示演示效果: 基于JavaScript的网页弹出层,鼠标按在弹出层的标题栏处,可以拖动该浮动层随意移动位置,不需要时也可以关闭,操作体验舒服,兼容性好,IE/火狐等众多浏览器下运行稳定.反应快速.代码表现方面,简洁务实,不玩虚的,拿去学习也相当不错. js代码 示例一: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>弹出层并可

javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法

  本文实例讲述了javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法.分享给大家供大家参考.具体分析如下: 这里点击按钮后,弹出一个可关闭的层窗口,随之网页背景变灰,在QQ网站上经常会看到QQ登录的效果,就和这个很类似,代码段基于JavaScript,根据你的情况使用,有时候是用CSS完成的这种功能. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

id 成数组的传值-jsp弹出框传值问题(一个jsp 点击按钮弹出另一个jsp,选中记录带回数据显示在指定框中)

问题描述 jsp弹出框传值问题(一个jsp 点击按钮弹出另一个jsp,选中记录带回数据显示在指定框中) 如图,共有两个jsp: 一:add.jsp:二:select.jsp 其中在add.jsp上点击请选择按钮,弹出select.jsp页面,选择之后点击确定,应该如何将值传递回来,我知道是那个通过url携带参数,但是我一直写不对.下面附上两个jsp页面的源码: ## # [1.add.jsp]: <script> function openwindow(){ window.showModalD