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

});