Grid表格的js触发事件
没怎么接触过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触发事件的更多相关文章
- JS触发事件大全
事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠 ...
- JS触发事件集锦
事件句柄 HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,这些属性可 ...
- 转载:JS触发服务器控件的单击事件
原文地址:http://blog.csdn.net/joyhen/article/details/8485321 <script src="../Js/jquery-1.4.2.min ...
- JS触发服务器控件的单击事件
<script src="../Js/jquery-1.4.2.min.js" type="text/javascript"></script ...
- Yii框架zii.widgets.grid自定义按钮,ajax触发事件并提示
相关类手册: http://www.yiichina.com/api/CButtonColumn buttons 属性 public array $buttons; the configurati ...
- 刷新各ifream当前页,下拉项改变触发事件js,给选中项加背景色js
<script type="text/javascript" language="javascript"> //刷新框架各页面 function r ...
- js触发按钮点击事件
js触发按钮点击事件 博客分类: javascript 模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...
- 原生js自动触发事件
熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...
- js 触发select onchange事件
select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select onchange事件select 或text的o ...
随机推荐
- cmake::helloworld
ubuntu16. cmake安装 apt-get install cmake 1.创建 CMakeLists.txt , main.cpp 2.cmake . 生成 makefile 3.遇到错误c ...
- Tomcat 的单机多实例配置
有时候需要在一个服务器上部署多个Tomcat,通过不同的端口进行区分,比如,反向代理.但是不想简单的通过复制Tomcat来实现,这样既不方便以后的升级也不方便管理,那么这时候就需要配置Tomcat的单 ...
- php分布式是什么
分布式网络存储技术是将数据分散地存储于多台独立的机器设备上.分布式网络存储系统采用可扩展的系统结构,利用多台存储服务器分担存储负荷,利用位置服务器定位存储信息,不但解决了传统集中式存储系统中单存储服务 ...
- Vue项目多域名跨域
在Vue项目中请求后台数据时,遇到的多域名跨域问题. 直接上代码: assetsSubDirectory: "static", assetsPublicPath: "/& ...
- pytest1-Installation and Getting Started
pytest是python的一种单元测试框架(非自带,需要安装),与python自带的unitest测试框架相比,使用起来更加简洁.效率更高.总之,一句话,pytest优于unitest. 1.安装p ...
- 2.单核CPU是如何实现多进程的?
单核cpu之所以能够实现多进程,主要是依靠于操作系统的进程的调度算法 如时间片轮转算法,在早期,举例说明:有5个正在运行的程序(即5个进程) : QQ 微信 有道词典 网易云 ...
- git jenkins 基本部署
git jenkins 本地仓库基础 1.安装git [root@gitlab ~]# yum install git -y 2.配置git [root@gitlab ~]# git config ...
- Leetcode(3)无重复字符的最长子串
Leetcode(3)无重复字符的最长子串 [题目表述]: 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 第一种方法:暴力 执行用时:996 ms: 内存消耗:12.9MB 效果: ...
- Ubuntu16.04下升级Python到3.6
转: 这里 有一篇帖子是说从源代码开始安装,这种方式原来尝试过,需要删除系统默认的软链命令,感觉比较粗暴,现在在想有没有更好的方式呢? 找到一个帖子:http://ubuntuhandbook.org ...
- API 网关知识看这篇就足够了!
本文已经收录自 JavaGuide (60k+ Star[Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识.) 本文授权转载自:https://github.com/java ...