jquery ezUI 双击行记录弹窗查看明细的实现方法
第一步：给DataGrid绑定onDblClickRow事件；
<tabletitle=""id="dataTable"class="easyui-datagrid"style="height:500px;"data-options="
url:'/ajaxget.aspx?_t='+newDate().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>
第二步：编写行双击事件
//行双击事件
functiononDblClickRow(){
varitem=$('#dataTable').datagrid("getSelected");
if(item!=null){
editId=item.Id;
varhtml="";
html+="项目名称："+item.ProjectName+"<br/>";
html+="项目编号："+item.ProjectNum+"<br/>";
html+="<br/>";
show(item.ProjectName+"项目详情",html);
}
}
第三步：弹出窗口显示详细信息：
<divid="details"style="padding:10px;line-height:20px;font-size:12px"></div>
functionshow(title,msg){
$('#details').html("<divid=\"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
});
}
以上这篇jqueryezUI双击行记录弹窗查看明细的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。