jquery ezUI 双击行记录弹窗查看明细的实现方法


Posted in Javascript onJune 01, 2016

第一步:给DataGrid绑定onDblClickRow事件;

<table title="" id="dataTable" class="easyui-datagrid" style="height: 500px;" data-options="
 url: '/ajaxget.aspx?_t='+new Date().getTime()+'&_action=SVNGetHandler.GetSearchPageData&searchType=&keyword=*',
 method: 'get', 
 rownumbers: true,
 singleSelect:true,
 border:0, 
 idField: 'Id', 
 columns:[[ 
   {field:'ProjectId',title:'项目Id',width:30,align:'left'},
   {field:'ProjectName',title:'项目名称',width:150,align:'left'},
   {field:'ProjectNum',title:'项目编号',width:100,align:'left'}
 ]],
 toolbar:'#myToolbar', 
 pagination:true,
 fitColumns: true,
 pageSize:20, 
 onDblClickRow:onDblClickRow
 ">
 </table>

第二步:编写行双击事件

//行双击事件
function onDblClickRow() {
var item = $('#dataTable').datagrid("getSelected");
if (item != null) {
editId = item.Id;
var html = "";
html += "项目名称:" + item.ProjectName + "<br/>";
html += "项目编号:" + item.ProjectNum + "<br/>";
html += "<br/>"; 
show(item.ProjectName + " 项目详情", html); 
}
}

第三步:弹出窗口显示详细信息:

<div id="details" style="padding: 10px;line-height:20px;font-size:12px"></div>
function show(title, msg) { 
$('#details').html("<div id=\"output\" style=\"width:99%;height:96%;border:0\">" + msg + "</div>");
$('#details').dialog({
title: title,
width: 800,
height: 400,
iconCls: 'icon-custom-eye',
closed: false,
cache: false,
modal: true
});
}

以上这篇jquery ezUI 双击行记录弹窗查看明细的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 #Javascript
sencha ext js 6 快速入门(必看)
Jun 01 #Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 #Javascript
分享一个插件实现水珠自动下落效果
Jun 01 #Javascript
js匿名函数作为函数参数详解
Jun 01 #Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 #Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 #Javascript
You might like
javascript基本语法分析说明
2008/06/15 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python 可爱的大小写
2008/09/06 Python
python 队列详解及实例代码
2016/10/18 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
食堂标语大全
2014/06/11 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
Java 数组的使用
2022/05/11 Java/Android