jquery ezUI 双击行记录弹窗查看明细的实现方法
时间:2021-06-06 08:49:41|栏目:jquery|点击: 次
第一步:给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 }); }
上一篇:详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
栏 目:jquery
下一篇:常见的jQuery选择器汇总
本文标题:jquery ezUI 双击行记录弹窗查看明细的实现方法
本文地址:http://www.codeinn.net/misctech/136687.html