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 相关文章推荐
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
js实现批量删除功能
Aug 27 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
PHP编码转换
2012/11/05 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
PHP数组实例详解
2016/06/26 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
PHP时间类完整代码实例
2021/02/26 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
js实现批量删除功能
2020/08/27 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
年度献血先进个人事迹材料
2014/02/14 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python