没怎么接触过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触发事件的更多相关文章

  1. JS触发事件大全

          事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠 ...

  2. JS触发事件集锦

    事件句柄 HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,这些属性可 ...

  3. 转载:JS触发服务器控件的单击事件

    原文地址:http://blog.csdn.net/joyhen/article/details/8485321 <script src="../Js/jquery-1.4.2.min ...

  4. JS触发服务器控件的单击事件

    <script src="../Js/jquery-1.4.2.min.js" type="text/javascript"></script ...

  5. Yii框架zii.widgets.grid自定义按钮,ajax触发事件并提示

    相关类手册: http://www.yiichina.com/api/CButtonColumn   buttons 属性 public array $buttons; the configurati ...

  6. 刷新各ifream当前页,下拉项改变触发事件js,给选中项加背景色js

    <script type="text/javascript" language="javascript"> //刷新框架各页面 function r ...

  7. js触发按钮点击事件

    js触发按钮点击事件 博客分类: javascript   模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...

  8. 原生js自动触发事件

    熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...

  9. js 触发select onchange事件

    select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select onchange事件select 或text的o ...

随机推荐

  1. Gitlab CI 集成 Kubernetes 集群部署 Spring Boot 项目

    在上一篇博客中,我们成功将 Gitlab CI 部署到了 Docker 中去,成功创建了 Gitlab CI Pipline 来执行 CI/CD 任务.那么这篇文章我们更进一步,将它集成到 K8s 集 ...

  2. 基于mysql-8.0.16-winx64的主从搭建

    1.主服务器的my.ini文件内容:[mysqld]# 主库和从库需要不一致server-id=1log-bin=mysql-bin# 同步的数据库binlog-do-db=master-slave# ...

  3. Mongodb 常见的查询语句及与 mysql 对比

    db.users.find()select * from users db.users.find({"age" : 27})select * from users where ag ...

  4. 百万年薪python之路 -- 基本数据类型

    整数 -- 数字(int) 用于比较和运算 32位 2 ** 31 ~ 2 ** 31-1 64位 -2 ** 63 ~ 2 ** 63- 1 ​ + - * / // ** % python2 整型 ...

  5. 修改List<Map<String, Object>>的值

    List<Map<String, Object>>  aList = new ArrayList(); //加入一个Map元素Map map = new HashMap();m ...

  6. 如何把当前时间戳转化为时间格式HH:MM:SS

    获取当前时间戳 var timestamp = new Date().getTime() 获取当前时间(从1970.1.1开始的毫秒数) // 创建一个函数function timestampToTi ...

  7. Python调试工具

    1. 日志 通过日志或者print来打印变量.必要时可以打印locals()和globals() 建议使用logging.debug()来代替print,这样到了正式环境,就可以统一删除这些日志. 2 ...

  8. 微软宣布加入 OpenJDK,看网上各派的热闹

    微软宣布加入 OpenJDK 项目(https://www.oschina.net/news/111036/microsoft-to-participate-in-openidk),这两天在微信公众号 ...

  9. Linux sh脚本用spool导出oracle数据库指定表表数据

    脚本如下,已验证可用,可配合crontab使用. 1 #!/bin/bash cd /opt/oracle/datafor_kf #redirect environment variables sou ...

  10. 一文让你彻底了解大数据实时计算引擎 Flink

    前言 在上一篇文章 你公司到底需不需要引入实时计算引擎? 中我讲解了日常中常见的实时需求,然后分析了这些需求的实现方式,接着对比了实时计算和离线计算.随着这些年大数据的飞速发展,也出现了不少计算的框架 ...