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 相关文章推荐
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
vue如何使用rem适配
Feb 06 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
php类
2006/11/27 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
php多文件上传下载示例分享
2014/02/20 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
简单实现python爬虫功能
2015/12/31 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
详解Python 正则表达式模块
2018/11/05 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
高一政治教学反思
2014/01/28 职场文书
预备党员承诺书
2014/03/25 职场文书
公司更名通知函
2015/04/24 职场文书
倡议书的格式写法
2015/04/28 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL