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 相关文章推荐
常用js脚本
Dec 03 Javascript
JavaScript的document对象和window对象详解
Dec 30 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
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
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
浅谈PHP的反射机制
2016/12/15 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
微信小程序自定义组件
2017/08/16 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
js时间转换毫秒的实例代码
2019/08/21 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
node.js通过url读取文件
2020/10/16 Javascript
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
荷兰超市:DEEN
2018/03/14 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
委托证明的格式
2014/01/10 职场文书
英文请假条
2014/04/11 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电