jquery ezUI 雙擊行記錄彈窗查看明細(xì)的實(shí)現(xiàn)方法

字號(hào):


    下面小編就為大家?guī)?lái)一篇jquery ezUI 雙擊行記錄彈窗查看明細(xì)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。
    第一步:給DataGrid綁定onDblClickRow事件; 
    <table id="dataTable" 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:'項(xiàng)目Id',width:30,align:'left'},
       {field:'ProjectName',title:'項(xiàng)目名稱',width:150,align:'left'},
       {field:'ProjectNum',title:'項(xiàng)目編號(hào)',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 += "項(xiàng)目名稱:" + item.ProjectName + "<br/>";
    html += "項(xiàng)目編號(hào):" + item.ProjectNum + "<br/>";
    html += "<br/>"; 
    show(item.ProjectName + " 項(xiàng)目詳情", html); 
    }
    }
    第三步:彈出窗口顯示詳細(xì)信息:
    <div id="details"></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 雙擊行記錄彈窗查看明細(xì)的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考