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每次Title显示不同的名言
Sep 25 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
Vue 数据响应式相关总结
Jan 28 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
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
PHP类的封装与继承详解
2015/09/29 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
js实现导航跟随效果
2018/11/17 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
python实现俄罗斯方块
2018/06/26 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
Python @property及getter setter原理详解
2020/03/31 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
法定代表人授权委托书
2014/09/19 职场文书
民间借贷借条范本
2015/05/25 职场文书
水浒传读书笔记
2015/06/25 职场文书
2015双创工作总结
2015/07/24 职场文书