Double-click the cell row to display details

Implementation effect: When double-clicking a cell row, details are displayed, such as

Foreground implementation process:

1. First set up a div box to hold the details of the query.

<div id= "Details" class= "Easyui-panel" title= "detail Panel (double-click the number to display!) ) "style=" padding:3px ">
The document label is: <span id= "OrderID" ></span> details are listed below!
<div id= "CreateTable" ></div>
</div>

2. The order list here is an AJAX-based background data displayed in a DataGrid data table with the following code:

$ ("#category_list"). DataGrid ({title:' Sales order Management list ', fixed:true, Fitcolumns:true, URL:'/erp/order/orderlistjsonservlet ', IDfield:' Code ', Singleselect:false, pagination:true, pagelist:[3,5,10,20], toolbar:"#category_tb", columns:[[{field:' CK ', checkbox:true}, {field:' Code ', title: ' Order number ', width:70}, {field:' OrderDate ', title: ' Order Date ', width:60}, {field:' Customercode ', title: ' Customer Name ', width:50}, {field:' Nums ', title: ' Quantity ', width:50}, {field:' Total ', title: ' Gross value ', width:50}, {field:' Contacter ', title: ' Contacts ', width:50}, {field:' Telphone ', title: ' Contact Us ', width:70}, {field:' Businesser ', title: ' Business People ', width:50}, {field:' state ', title: ' Audit status ', width:30}, {field:' AddUser ', title: ' operator ', width:50}, {field:' Opt ', title: ' Operation ', Width:100,formatter:function(VAL,ROW,IDX) {varcontent= "<input type= ' button ' value= ' Modify ' onclick=\ ' SetPwd (" +idx+ ", '" +row.code+ "', '" +row.customercode+ "', '" + row.businesser+ "', '" +row.adduser+ "') \"/> "; Content+ = "<input type= ' button ' value= ' delete ' onclick=\" del (' "+row.code+" ') \ "/>"; returncontent; }}        ]]});

Then add double-click the detailed function to this data table, the code is as follows

Ondblclickrow:function(Rowindex,rowdata) {$ ("#details"). Show (); $("Span[id= ' OrderID ')"). HTML (Rowdata.code); $.ajax ({URL:'/erp/order/getorderdetaillistservlet ', data:{"Code": Rowdata.code}, type:' Post ', Error:function() {alert ("Sorry, we didn't get the data."); }, Success:function(data) {$ ("#createtable"). HTML (""); vartable=$ ("<table rules=\" all\ "border= ' 1 ' ><tr style=\" Border-color: ' Blue '; Background-color: ' Teal '; \ "> <td> Quotation number </td><td> Part No. </td><td> accessory name </td><td> accessory brand </td><td> Accessory Model </td><td> Quantity </td><td> Unit price </td><td> amount </td><td> remarks </td> </tr> "); Table.appendto ($ ("#createtable")); varNums=0; varPrice=0;  for(vari=0;i<data.rows.length;i++)                 {                    vartr=$ ("<tr></tr>"); Price+=data.rows[i].totals; Nums+=data.rows[i].nums;                       Tr.appendto (table); vartd0=$ ("<td>" +data.rows[i].code+ "</td>");                       Td0.appendto (TR); vartd1=$ ("<td>" +data.rows[i].partsno+ "</td>");                       Td1.appendto (TR); vartd2=$ ("<td>" +data.rows[i].partsnname+ "</td>");                       Td2.appendto (TR); vartd3=$ ("<td>" +data.rows[i].partsbrand+ "</td>");                       Td3.appendto (TR); vartd4=$ ("<td>" +data.rows[i].partsmodel+ "</td>");                       Td4.appendto (TR); vartd5=$ ("<td>" +data.rows[i].nums+ "</td>");                       Td5.appendto (TR); vartd6=$ ("<td>" +data.rows[i].price+ "</td>");                       Td6.appendto (TR); vartd7=$ ("<td>" +data.rows[i].totals+ "</td>");                       Td7.appendto (TR); vartd8=$ ("<td>" +data.rows[i].remark+ "</td>");                    Td8.appendto (TR);        }                }            }); }

It is particularly important to note that this is a dynamically generated table table, so you need to clear the data and add $ ("#createtable") to each double-click. HTML (""); there is no data overlay, above

Getorderdetaillistservlet is to get the data in the table. This allows you to double-click the cell line to display the information function!

Double-click the cell row to display details