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 相关文章推荐
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
跟老齐学Python之复习if语句
2014/10/02 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
在线课程:Skillshare
2019/04/02 全球购物
小学语文教学反思
2014/02/10 职场文书
运动会的口号
2014/06/09 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
群众路线调研报告范文
2014/11/03 职场文书
财务人员入职担保书
2015/09/22 职场文书
python 判断文件或文件夹是否存在
2022/03/18 Python
SQL SERVER中的流程控制语句
2022/05/25 SQL Server