Grid表格的js触发事件
没怎么接触过Grid插件;
解决的问题是:点击Grid表行里的内容触发js方法弹出模态框,用以显示选中内容的详细信息。
思路:给准备要触发的列加上一个css属性,通过这个css属性来获取元素并触发js方法。
function flowGrid() {
var clients = [
{"流程节点": "立项", "项目数量(单位)": 25, "金额(单位)": 1, "加权平均IRR": "231"},
{"流程节点": "审批", "项目数量(单位)": 45, "金额(单位)": 2, "加权平均IRR": "1234"},
{"流程节点": "待放款情况", "项目数量(单位)": 29, "金额(单位)": 3, "加权平均IRR": "124"}
];
$("#flow_grid").jsGrid({
width: "100%",
height: "200px",
data: clients,
fields: [
{name: "流程节点", type: "text", width: 100, css: "js_font_color", headercss: "js_header_color"},
{name: "项目数量(单位)", type: "text", width: 140},
{name: "金额(单位)", type: "text", width: 100},
{name: "加权平均IRR", type: "text", width: 100}
]
});
}
以上是实例化Grid表格的代码,在将要触发js方法的列(流程节点)加了一个css属性。
$(document).on("click", ".js_font_color", function () {
$(".js_font_color").attr("data-toggle", "modal");
$(".js_font_color").attr("data-target", "#myModal");
console.log($("#flow_name"));
console.log($(this).html());
document.getElementById("flow_name").innerHTML = $(this).html();
$(this).unbind();
});
这样就实现了这个功能,希望大佬能给我说说更简单更好的办法。
Grid表格的js触发事件的更多相关文章
- JS触发事件大全
事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠 ...
- JS触发事件集锦
事件句柄 HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,这些属性可 ...
- 转载:JS触发服务器控件的单击事件
原文地址:http://blog.csdn.net/joyhen/article/details/8485321 <script src="../Js/jquery-1.4.2.min ...
- JS触发服务器控件的单击事件
<script src="../Js/jquery-1.4.2.min.js" type="text/javascript"></script ...
- Yii框架zii.widgets.grid自定义按钮,ajax触发事件并提示
相关类手册: http://www.yiichina.com/api/CButtonColumn buttons 属性 public array $buttons; the configurati ...
- 刷新各ifream当前页,下拉项改变触发事件js,给选中项加背景色js
<script type="text/javascript" language="javascript"> //刷新框架各页面 function r ...
- js触发按钮点击事件
js触发按钮点击事件 博客分类: javascript 模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...
- 原生js自动触发事件
熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...
- js 触发select onchange事件
select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select onchange事件select 或text的o ...
随机推荐
- Gitlab CI 集成 Kubernetes 集群部署 Spring Boot 项目
在上一篇博客中,我们成功将 Gitlab CI 部署到了 Docker 中去,成功创建了 Gitlab CI Pipline 来执行 CI/CD 任务.那么这篇文章我们更进一步,将它集成到 K8s 集 ...
- 基于mysql-8.0.16-winx64的主从搭建
1.主服务器的my.ini文件内容:[mysqld]# 主库和从库需要不一致server-id=1log-bin=mysql-bin# 同步的数据库binlog-do-db=master-slave# ...
- Mongodb 常见的查询语句及与 mysql 对比
db.users.find()select * from users db.users.find({"age" : 27})select * from users where ag ...
- 百万年薪python之路 -- 基本数据类型
整数 -- 数字(int) 用于比较和运算 32位 2 ** 31 ~ 2 ** 31-1 64位 -2 ** 63 ~ 2 ** 63- 1 + - * / // ** % python2 整型 ...
- 修改List<Map<String, Object>>的值
List<Map<String, Object>> aList = new ArrayList(); //加入一个Map元素Map map = new HashMap();m ...
- 如何把当前时间戳转化为时间格式HH:MM:SS
获取当前时间戳 var timestamp = new Date().getTime() 获取当前时间(从1970.1.1开始的毫秒数) // 创建一个函数function timestampToTi ...
- Python调试工具
1. 日志 通过日志或者print来打印变量.必要时可以打印locals()和globals() 建议使用logging.debug()来代替print,这样到了正式环境,就可以统一删除这些日志. 2 ...
- 微软宣布加入 OpenJDK,看网上各派的热闹
微软宣布加入 OpenJDK 项目(https://www.oschina.net/news/111036/microsoft-to-participate-in-openidk),这两天在微信公众号 ...
- Linux sh脚本用spool导出oracle数据库指定表表数据
脚本如下,已验证可用,可配合crontab使用. 1 #!/bin/bash cd /opt/oracle/datafor_kf #redirect environment variables sou ...
- 一文让你彻底了解大数据实时计算引擎 Flink
前言 在上一篇文章 你公司到底需不需要引入实时计算引擎? 中我讲解了日常中常见的实时需求,然后分析了这些需求的实现方式,接着对比了实时计算和离线计算.随着这些年大数据的飞速发展,也出现了不少计算的框架 ...