jquery ezUI 雙擊行記錄彈窗查看明細的實現(xiàn)方法
更新時間:2016年06月01日 16:49:19 投稿:jingxian
下面小編就為大家?guī)硪黄猨query ezUI 雙擊行記錄彈窗查看明細的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
第一步:給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 雙擊行記錄彈窗查看明細的實現(xiàn)方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Jquery實現(xiàn)自定義彈窗示例
- 小巧強大的jquery layer彈窗彈層插件
- jQuery實現(xiàn)彈窗居中效果類似alert()
- 運用JQuery的toggle實現(xiàn)網(wǎng)頁加載完成自動彈窗
- jquery模擬alert的彈窗插件
- jquery彈窗插件colorbox綁定動態(tài)生成元素的方法
- jQuery實現(xiàn)簡單彈窗遮罩效果
- jquery實現(xiàn)彈出窗口效果的實例代碼
- Jquery彈出窗口插件 LeanModal的使用方法
- jQuery+jqmodal彈出窗口實現(xiàn)代碼分明
- jQuery Mobile彈出窗、彈出層知識匯總
- jQuery實現(xiàn)的兩種簡單彈窗效果示例
相關文章
基于Jquery的仿Windows Aero彈出窗(漂亮的關閉按鈕)
目前市面上已經(jīng)有很多成熟好用的jquery彈出窗插件,像模態(tài)窗口插件(Modal Dialog Plugins)以及數(shù)不勝數(shù)的燈箱插件(lightbox plugins)。2010-09-09jquery實現(xiàn)input輸入框實時輸入觸發(fā)事件代碼
如何實現(xiàn)input輸入框實時輸入觸發(fā)事件,下面有個不不錯的示例使用jquery實現(xiàn)的,感興趣的朋友可以參考下2014-01-01