Jquery ezUI double-click the row record window to View Details. jqueryezui

Jquery ezUI double-click the row record window to View Details. jqueryezui

Step 1: bind the onDblClickRow event to the DataGrid;

<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: 'Project id', width: 30, align: 'left'}, {field: 'projectname', title: 'Project name', width: 150, align: 'left'}, {field: 'projectnum', title: 'Project No. ', width: 100, align: 'left'}], toolbar: '# myToolbar', pagination: true, fitColumns: true, pageSize: 20, onDblClickRow: onDblClickRow "> </table>

Step 2: Write a row double-click event

// Double-click the event function onDblClickRow () {var item =$ ('# able able'). datagrid ("getSelected"); if (item! = Null) {editId = item. id; var html = ""; html + = "Project name:" + item. projectName + "<br/>"; html + = "Project No.:" + item. projectNum + "<br/>"; html + = "<br/>"; show (item. projectName + "project details", html );}}

Step 3: the pop-up window displays details:

<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});}

The implementation method of the jquery ezUI double-click row record pop-up window to View Details is all the content shared by Alibaba Cloud. I hope you can provide a reference and support for the customer's house.