jquery ezUI 双击行记录弹窗查看明细的实现方法
编程学习 2021-07-04 19:59www.dzhlxh.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家带来一篇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 双击行记录弹窗查看明细的实现方法就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。