Double-click a cell line to display details. Double-click the cell details.

Double-click a cell line to display details. Double-click the cell details.

Effect: details are displayed when you double-click a unit, as shown in figure

Foreground implementation process:

1. First, you need to set a div box to store the queried details.

<Div id = "details" class = "easyui-panel" title = "details panel (double-click the ticket number to display it !) "> $ (" # 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: 'mermercode', title: 'customer name', width: 50}, {field: 'nums', title: 'quantity', width: 50}, {field: 'Total', title: 'total value', width: 50}, {field: 'contacter ', title: 'Contact', width: 50}, {field: 'telphone', title: 'Contact information', width: 70}, {field: 'businesser', title: 'business', 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) {var content = "<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 + "') \"/> "; return content ;}}]});

Add the double-click detail function to the data table. The Code is as follows:

OnDblClickRow: function (rowIndex, rowData) {$ ("# details "). show (); $ ("span [id = 'orderid']" pai.html (rowData. code); $. ajax ({url: '/ERP/order/getOrderDetailListServlet', data: {"code": rowData. code}, type: 'post', error: function () {alert ("sorry, no data") ;}, success: function (data) {$ ("# createtable" pai.html (""); var table = $ ("<table rules = \" all \ "border = '1'> <tr style = \" border-color: 'blue'; background-color: 'teal '; \ "> <td> quote no. </td> <td> Sn </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"); var nums = 0; var price = 0; for (var I = 0; I <data. rows. length; I ++) {var tr = $ ("<tr> </tr>"); price + = data. rows [I]. totals; nums + = data. rows [I]. nums; tr. appendTo (table); var td0 =0 ("<td>" + data. rows [I]. code + "</td>"); td0.appendTo (tr); var td1 = $ ("<td>" + data. rows [I]. partsNo + "</td>"); td1.appendTo (tr); var td2 =$ ("<td>" + data. rows [I]. partsNname + "</td>"); td2.appendTo (tr); var td3 =$ ("<td>" + data. rows [I]. partsBrand + "</td>"); td3.appendTo (tr); var td4 =4 ("<td>" + data. rows [I]. partsModel + "</td>"); td4.appendTo (tr); var td5 =$ ("<td>" + data. rows [I]. nums + "</td>"); td5.appendTo (tr); var td6 =6 ("<td>" + data. rows [I]. price + "</td>"); td6.appendTo (tr); var td7 =7 ("<td>" + data. rows [I]. totals + "</td>"); td7.appendTo (tr); var td8 =$ ("<td>" + data. rows [I]. remark + "</td>"); td8.appendTo (tr );}}});}

Note that the table is dynamically generated here. Therefore, you must clear the data and add $ ("# createtable" ).html ("") each time you double-click details (""); there will be no data overlay.

GetOrderDetailListServlet obtains the data in the table. In this way, you can double-click the unit row to display information!