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
});
}


目录
相关文章
|
3天前
|
JavaScript
jQuery模态框弹窗提示代码
jQuery模态框弹窗提示代码
19 1
jQuery模态框弹窗提示代码
|
JavaScript
JQuery重复校验导致出现双重提示的问题记录
最近在用JQuery Validate做表单校验时,由于需要校验用户名:1、是否符合注册规则;2、是否为空;3、是否已被注册;4、是否包含特殊字符,但问题来了,第一次点击是校验非空,但输入非法的用户名后会提示不符合注册规则,遂将其删掉,这时便出现了所述问题:既校验了非空,又校验了注册规则。
77 0
JQuery重复校验导致出现双重提示的问题记录
|
JavaScript 前端开发
jQuery实现表格行的删除和增加
使用jQuery实现对表格元素行的删除和增加效果
241 0
jQuery实现表格行的删除和增加
|
JavaScript
|
JavaScript 前端开发
jQuery +easyUI 实现双击编辑
jQuery +easyUI 实现双击编辑 DataGrid 数据表里面需要加属性 editor:’text’ 才能实现 $(function(){ $('#dg').datagrid({ url:'.
2051 0
|
Web App开发 前端开发 JavaScript