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 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
vue-loader教程介绍
Jun 14 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 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
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
Python常见数据结构详解
2014/07/24 Python
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python切换pip安装源的方法详解
2016/11/18 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Python实现图像的垂直投影示例
2020/01/17 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
会计顶岗实习心得
2014/01/25 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
社区敬老月活动总结
2015/05/07 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers