没怎么接触过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. cmake::helloworld

    ubuntu16. cmake安装 apt-get install cmake 1.创建 CMakeLists.txt , main.cpp 2.cmake . 生成 makefile 3.遇到错误c ...

  2. Tomcat 的单机多实例配置

    有时候需要在一个服务器上部署多个Tomcat,通过不同的端口进行区分,比如,反向代理.但是不想简单的通过复制Tomcat来实现,这样既不方便以后的升级也不方便管理,那么这时候就需要配置Tomcat的单 ...

  3. php分布式是什么

    分布式网络存储技术是将数据分散地存储于多台独立的机器设备上.分布式网络存储系统采用可扩展的系统结构,利用多台存储服务器分担存储负荷,利用位置服务器定位存储信息,不但解决了传统集中式存储系统中单存储服务 ...

  4. Vue项目多域名跨域

    在Vue项目中请求后台数据时,遇到的多域名跨域问题. 直接上代码: assetsSubDirectory: "static", assetsPublicPath: "/& ...

  5. pytest1-Installation and Getting Started

    pytest是python的一种单元测试框架(非自带,需要安装),与python自带的unitest测试框架相比,使用起来更加简洁.效率更高.总之,一句话,pytest优于unitest. 1.安装p ...

  6. 2.单核CPU是如何实现多进程的?

    单核cpu之所以能够实现多进程,主要是依靠于操作系统的进程的调度算法 如时间片轮转算法,在早期,举例说明:有5个正在运行的程序(即5个进程) :   QQ    微信    有道词典      网易云 ...

  7. git jenkins 基本部署

    git  jenkins  本地仓库基础 1.安装git [root@gitlab ~]# yum install git -y 2.配置git [root@gitlab ~]# git config ...

  8. Leetcode(3)无重复字符的最长子串

    Leetcode(3)无重复字符的最长子串 [题目表述]: 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 第一种方法:暴力 执行用时:996 ms: 内存消耗:12.9MB 效果: ...

  9. Ubuntu16.04下升级Python到3.6

    转: 这里 有一篇帖子是说从源代码开始安装,这种方式原来尝试过,需要删除系统默认的软链命令,感觉比较粗暴,现在在想有没有更好的方式呢? 找到一个帖子:http://ubuntuhandbook.org ...

  10. API 网关知识看这篇就足够了!

    本文已经收录自 JavaGuide (60k+ Star[Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识.) 本文授权转载自:https://github.com/java ...