Grid表格的js触发事件

没怎么接触过Grid插件;

解决的问题是:点击Grid表行里的内容触发js方法弹出模态框,用以显示选中内容的详细信息。

思路:给准备要触发的列加上一个css属性,通过这个css属性来获取元素并触发js方法。

 1 function flowGrid() {
 2         var clients = [
 3             {"流程节点": "立项", "项目数量(单位)": 25, "金额(单位)": 1, "加权平均IRR": "231"},
 4             {"流程节点": "审批", "项目数量(单位)": 45, "金额(单位)": 2, "加权平均IRR": "1234"},
 5             {"流程节点": "待放款情况", "项目数量(单位)": 29, "金额(单位)": 3, "加权平均IRR": "124"}
 6         ];
 7         $("#flow_grid").jsGrid({
 8             width: "100%",
 9             height: "200px",
10             data: clients,
11             fields: [
12                 {name: "流程节点", type: "text", width: 100, css: "js_font_color", headercss: "js_header_color"},
13                 {name: "项目数量(单位)", type: "text", width: 140},
14                 {name: "金额(单位)", type: "text", width: 100},
15                 {name: "加权平均IRR", type: "text", width: 100}
16             ]
17         });
18     }

以上是实例化Grid表格的代码,在将要触发js方法的列(流程节点)加了一个css属性。

1 $(document).on("click", ".js_font_color", function () {
2         $(".js_font_color").attr("data-toggle", "modal");
3         $(".js_font_color").attr("data-target", "#myModal");
4         console.log($("#flow_name"));
5         console.log($(this).html());
6         document.getElementById("flow_name").innerHTML = $(this).html();
7 
8         $(this).unbind();
9 });

这样就实现了这个功能,希望大佬能给我说说更简单更好的办法。

转载于:https://www.cnblogs.com/Yinjiawei/p/9555460.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/352934.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php 合并数组成父子关系,php - 将电子表格解析为PHP数组并返回具有父子关系的嵌套MLM表 - SO中文参考 - www.soinside.com...

这里有一些非递归代码可以让你开始(如果你还没有解决它),它将根据从电子表格加载的$rows数组构建一个树。这个想法是每个节点都有一个名称和一个子数组。所以代码只是在步骤1中为每个人(父和子)创建一个节点,然后从下到上填写步骤2中的链接。代码不健壮&…

在JVM上对高并发HTTP服务器进行基准测试

在第一篇有关HTTP客户端的文章 (我将您重定向到JVM上的高效HTTP的介绍)之后,现在让我们讨论HTTP 服务器 。 有一些关于HTTP服务器的基准测试,但是它们经常受到诸如以下缺点的阻碍: 没有有效地执行高并发方案&#xf…

时间常用api

1.常用api 创建 Date 对象 - 年 - 月 - 日 - 小时 - 分 - 秒 - 星期 var nownew Date() var year now.getFullYear(); var month now.getMonth(); (月 :0 - 11 ,处理: month month 1;) var da…

最大流的算法——Edmonds-Karp算法(最短路径增广算法)

最大流的算法——Edmonds-Karp算法(最短路径增广算法) 这里介绍一个最简单的算法:Edmonds-Karp算法 即最短路径增广算法 简称EK算法 EK算法基于一个基本的方法:Ford-Fulkerson方法 即增广路方法 简称FF方法 增广路方法是很多网络流算法的基础 一般都在残留网络中实现 其思路是每…

php做一个计算日期之间天数,PHP计算任意两个日期之间的天数

PHP面试题中,关于日期的题目作为基础考题经常出现,下面讨论一下获取两个日期之间的天数的方法。收到一个答案,拆分年、月、日,分别进行减法,然后统计天数,好累。针对低版本的PHP可以用下面的方式搞定&#…

[usaco2004][bzoj3379] 交作业

按距离从小到大排序 f[i][j][0或1]表示在i或j还有i-j没有完成 转移 tmpdp[i][j][0];tmpmin(tmp,max(dp[i][j1][1]a[j1].dist-a[i].dist,a[i].t));tmpmin(tmp,max(dp[i-1][j][0]a[i].dist-a[i-1].dist,a[i].t)); 注意边界 比如:dp[0][i],dp[0][c3]初值应为inf #inclu…

程序员的快速成长之路

在一封与TechRepublic会员交流的邮件当中,他提到了面向程序员的博客、文章及杂志分成两类:面向初学者类("hello world"这种类型的教程)以及面向专家类(MSDN杂志)。这个观点很好,有关程…

oracle 强制 断开,ORA-01092: ORACLE 例程终止 强行断开连接

今天测试部门的人叫我过去,说是数据库当了,起不来了。我过去看了看情况,做了如下操作SQL> shutdown immediate数据库已经关闭。已经卸载数据库。Oracle 例程已经关闭。SQL> startupORACLE 例程已经启动。Total System Global Area 135…

weblogic运行项目_在WebLogic 12c上运行RichFaces

weblogic运行项目我最初以为我可以在几个月前写这篇文章。 但是我最终被不一样的事情所淹没。 其中之一是,它无法像我在4.0版本中那样简单地启动RichFaces展示柜。 有了所有的JMS magic和不同的提供程序检查,这已经成为简单构建和部署它的挑战。 无论如何…

超详细在Ubuntu下安装JDK图文解析

我们选择的是jdk1.6.0_30版本。安装文件名为jdk-6u30-linux-i586.bin. 1、复制jdk到安装目录 (1)假设jdk安装文件在桌面,我们指定的安装目录是:/usr/local/java 。可是系统安装后在/usr/local下并没有java目录,这需要…

oracle 整个表空间迁移,oracle11g迁移表空间

表空间名为sbjc,要从D:\APP\ORACLE\ORADATA\TABLESPACE\SBJC.DBF 迁移到 F:\oracle\oradata\tablespace\SBJC.DBF。 扼要操作步骤: 第一步:登陆数据库 第二步:中止数据库 第三步:在open方式下启动数据库 第四步&#x…

Qt5使用QFtp,二次封装

1、需要的东西 ftp.cpp,ftp.h是二次封装的ftp类,放在工程下包含 QFtp和qftp.h放在D:\Qt5.7.1\5.7\msvc2013\include\QtNetwork; Qt5Ftp.lib和Qt5Ftpd.lib是编译生成的库,放在工程源文件下 2、包含库 #pragma comment(lib,"Qt5Ftpd.lib&q…

无参数泛型方法反模式

最近&#xff0c;有关Java泛型的一个非常有趣的问题发布到Stack Overflow和reddit上。 考虑以下方法&#xff1a; <X extends CharSequence> X getCharSequence() {return (X) "hello"; }尽管不安全的转换看起来有些古怪&#xff0c;并且您可能会猜这里有些问…

oracle数据库升级失败,Oracle 11.2.0.1 rac 升级失败后,数据库降级方案(flashback database)...

升级失败后&#xff0c;数据库降级方案(flashback database)环境&#xff1a;Oracle 11.2.0.1 rac on redhat 5.8Flashback database准备工作查看是否flashback database功能sysRACDB>select log_mode,open_mode,flashback_on fromv$database;LOG_MODEOPEN_MODE …

Ubuntu下安装Oracle11g(图文教程)

由于课程需要&#xff0c;要在Ubuntu下安装一个Oracle&#xff0c;之前都没有装过&#xff0c;所以想通过这篇博文记录一下 1.下载Oracle 11g 下载地址&#xff1a;http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index-092322.html 我选择下载的是…

class12_pack_grid_place 放置位置

其中的部分运行效果图&#xff08;程序见序号1&#xff09;&#xff1a; #!/usr/bin/env python# -*- coding:utf-8 -*-# ------------------------------------------------------------## 参考资料&#xff1a;# 用 python 和 tkinter 做简单的窗口视窗 - 网易云课堂# https:…

oracle强制执行计划,OBA技能2-Oracle执行计划顺序表连接

小仙我在学习索引执行行为的时候&#xff0c;有个疑惑&#xff1f;那就是索引是找到一个值就马上回表&#xff0c;然后再找下一个值&#xff0c;再回表。比如索引唯一扫描&#xff0c;索引范围扫描&#xff0c;索引全扫描&#xff0c;索引快速扫描。好像都是要回表。尤其是范围…

ubuntu中启动oracle数据库

前期准备&#xff1a;如果你还没有在ubuntu上安装oracle请先看我之前到日志http://blog.csdn.net/backtracker/article/details/66247181. $su oracle $ sqlplus /nolog 将出现如下连接数据库信息&#xff1a; SQL*Plus: Release 10.2.0.1.0 - Production on Fri Jul 8 10:1…

oracle 输出到页面,利用Xming 将Linux 图形界面输出到Windows上

Linux上安装Oracle 时需要图形界面, 但又不想在服务器上安装图形界面怎么办,这时候就需要用到Xming 这个神器了安装过程比较简单, 直接下一步下一步即可安装完成后先运行, Xlaunch注意:这个No Access Control的勾勾一定要勾上,否则 执行export到Windows主机上时会提示 No proto…

spring 事件模型_Spring–设计领域模型和服务层

spring 事件模型我们将为时间表管理构建应用程序。 因此&#xff0c;让我们首先考虑一些用例和实体。 让我用几个项目符号写它们&#xff1a; 任务由经理分配给员工。 一项任务可以分配给许多员工。 员工将他在某些任务上工作的小时数填充到系统中。 经理/员工查看时间表上的…