没怎么接触过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. 基于Prometheus和Grafana的监控平台 - 运维告警

    通过前面几篇文章我们搭建好了监控环境并且监控了服务器.数据库.应用,运维人员可以实时了解当前被监控对象的运行情况,但是他们不可能时时坐在电脑边上盯着DashBoard,这就需要一个告警功能,当服务器或 ...

  2. CSS布局解决方案(终结版)

    作者:无悔铭 https://segmentfault.com/a/1190000013565024 前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环.在页面框架的搭建之中,又有居中布局.多 ...

  3. Spring Boot从零入门1_详述

    本文属于原创,转载注明出处,欢迎关注微信小程序`小白AI博客` 微信公众号`小白AI`或者网站 [https://xiaobaiai.net](https://xiaobaiai.net) ![](h ...

  4. ES6基本语法入门

    一.用let代替var声明变量 ES5中,我们可以在代码中任意位置声明变量,甚至可以重写已经声明的变量,ES6引入了一个let关键字,它是新的var. let language = 'javascri ...

  5. 使用zrender.js绘制体温单(2)

    今天我们来画折线图 效果图 以下为模拟数据 [{"time":19,"text":"入\n院\n19\n时\n11\n分","po ...

  6. Spring 事务笔记

    代码写着写着就钻进源码了. 概念 InfrastructureProxy 结构代理 百度查了查,这个类还没有解释. 进去看了一下: Interface to be implemented by tra ...

  7. unity5.6.1 videoPlayer

    unity5.6开始增加了videoPlayer,使得视频播放相对比较简单,项目需求进行了一下研究应用,也遇到很多坑,Google 百度一下发现确实有这些问题,一些简单问题如下: 1)播放无声音 2) ...

  8. django-模板之for empty(十一)

    当值为空时,会调用empty下面的值

  9. ansible模块之command、shell、script、file、copy、fetch

    前戏 ansible 批量在远程主机上执行命令 openpyxl 操作excel表格 puppet ansible slatstack ansible epel源 第一步: 下载epel源 wget ...

  10. 在ASP.NET Core中编写合格的中间件

    这篇文章探讨了让不同的请求去使用不同的中间件,那么我们应该如何配置ASP.NET Core中间件?其实中间件只是在ASP.NET Core中处理Web请求的管道.所有ASP.NET Core应用程序至 ...