脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery ezUI 双击行记录弹窗查看明细

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

 更新时间：2016年06月01日 16:49:19   投稿：jingxian  
下面小编就为大家带来一篇jquery ezUI 双击行记录弹窗查看明细的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

第一步：给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 双击行记录弹窗查看明细的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • jQuery UI Dialog控件中的表单无法正常提交的解决方法

    jQuery UI Dialog控件中的表单无法正常提交的解决方法

    研究了页面源码后发现，jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部、form元素的后面，而原始的Dialog模板部分（其内包含表单元素）也被移到了 动态生成的HTML元素内。
    2010-12-12
  • JQUERY 设置SELECT选中项代码

    JQUERY 设置SELECT选中项代码

    本篇文章主要是对JQUERY 设置SELECT选中项的代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • jquery的冒泡事件的阻止与允许(三种实现方法)

    jquery的冒泡事件的阻止与允许(三种实现方法)

    冒泡或默认的事件发生,在某些时候是不需要的,在此就需要一些可以阻止冒泡和默认的事件的方法,本文介绍三种方法做到不同程度的阻止，感兴趣的朋友可以了解下，或许对你了解冒泡事件有所帮助
    2013-02-02
  • 基于JQuery的类似新浪微博展示信息效果的代码

    基于JQuery的类似新浪微博展示信息效果的代码

    滑动向下时，把最后一个节点copy过去插入在第一节点中，并在显示时隐藏，再通过透明渐变显示出来。附上源码，需要的朋友可以copy
    2012-07-07
  • jQuery的运行机制和设计理念分析

    jQuery的运行机制和设计理念分析

    jQuery是一个非常优秀的JavaScript库，与Prototype,YUI,Mootools等众多的Js类库相比，它剑走偏锋，从Web开发实用的角度出发，抛除了其它Lib中一些不实用的东西，为开发者提供了短小精悍的类库。
    2011-04-04
  • jquery操作checkbox示例分享

    jquery操作checkbox示例分享

    这篇文章主要介绍了jquery操作checkbox,需要的朋友可以参考下
    2014-07-07
  • 十个迅速提升JQuery性能让你的JQuery跑得更快

    十个迅速提升JQuery性能让你的JQuery跑得更快

    jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外如何提升语言的性能,本文提供即刻提升你的脚本性能的十个步骤 简单的几步让你的JQuery跑得更快 需要的朋友可以参考下
    2012-12-12
  • jQuery $.each的用法说明

    jQuery $.each的用法说明

    jQuery中$.each的用法，学习jquery的朋友可以参考下。
    2010-03-03
  • 基于JQuery的列表拖动排序实现代码

    基于JQuery的列表拖动排序实现代码

    基于JQuery的拖动插件有几个都相当好用，效果也很好，但再好，还是自己琢磨一个最好。所以，我的理念就是即使实际项目中使用别人的程序，自己也得根据自己的理解和想法写一个出来。那么今天，就来看看我的思路是不是可以实现拖动排序的功能
    2013-10-10
  • jQuery 瀑布流 绝对定位布局（二）(延迟AJAX加载图片)

    jQuery 瀑布流 绝对定位布局（二）(延迟AJAX加载图片)

    瀑布流-绝对定位布局，与浮动布局的区别在于布局不一样,AJAX不一样
    2012-05-05

最新评论