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 相关文章推荐
jquery 指南/入门基础
Nov 30 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
js仿手机页面文件下拉刷新效果
Oct 14 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 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
将数组写入txt文件 var_export
2009/04/21 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
python实现字符串和字典的转换
2018/09/29 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
python中提高pip install速度
2020/02/14 Python
jupyter notebook实现显示行号
2020/04/13 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
电信专业毕业生推荐信
2013/11/18 职场文书
关于迟到的检讨书
2014/01/26 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
市场总监岗位职责
2015/02/11 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python