没怎么接触过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. opencv::霍夫圆变换

    霍夫圆检测原理 从平面坐标到极坐标转换三个参数 假设平面坐标的任意一个圆上的点,转换到极坐标中: 处有最大值,霍夫变换正是利用这个原理实现圆的检测. cv::HoughCircles 因为霍夫圆检测对 ...

  2. Spring Cloud Alibaba 使用nacos 注册中心

    ### 背景 上一文我们讲到了如何去搭建注册中心,这一次我们讲述如何使用nacos作为注册中心 ### spring-cloud-alibaba-basis 创建基础依赖 首先我们创建一个spring ...

  3. “Triplet network”三元组网络阅读笔记

    记录<DEEP METRIC LEARNING USING TRIPLET NETWORK>阅读笔记 文章总体内容: 作者在前人提出的多个特征提取方法的基础上提出Triplet netwo ...

  4. JS-SDK

    1. 签名 ​ 看到网上的大部分问题都集中在签名部分,请大家一定请熟读微信JS-SDK说明文档附录5-常见错误及解决方法 部分. 注意 在计算签名的过程中,如果url总是不对请 实验 首页的url或 ...

  5. 计算机基础之编程 + 基本组成 + 组成补充 + 操作系统(day01整理)

    目录 一 计算机基础之编程 (一) 什么是编程语言 (二) 什么是编程 (三) 为什么要编程 二 计算机的基本组成 (一) CPU(大脑) (1) 控制器 (2) 运算器 (二) 存储器(记忆) (1 ...

  6. django-模板之过滤器Add(十三)

    1.add 若前后类型不匹配,就返回空. 其他的一些过滤器: first:返回列表的第一个值: last:返回列表的最后一个值: length:返回变量值的长度: linebrakebr:将纯文本中的 ...

  7. fenby C语言 P33

    #include <stdio.h> int main(void){ char *ps="my dream is to be a programmer"; printf ...

  8. UART和RS232/RS485的关系是什么?

    串口通讯是电子工程师和嵌入式开发工程师面对的最基本问题,RS232则是其中最简单最常用的通讯方式.但是初学者往往搞不清有关的名词如UART和RS232或RS485之间是什么关系,因为它们经常被放到语句 ...

  9. Vue躬行记(5)——组件通信

    组件之间除了保持独立之外,还需要相互通信,本章将介绍几种通信的方式. 一.直接访问 Vue提供了三个实例属性,可直接访问父组件.子组件和根实例,如下所列. (1)$parent:父组件. (2)$ro ...

  10. 【XSY2495】余数

    Input Output Input 3 4 Output 4 HINT 原式 =n*m-n除以i向下取整 用数论分块做就可以了 #include<bits/stdc++.h> #defi ...